当前位置： 首页 > news >正文

css 作业 2

news 2026/1/18 4:59:56

文章目录

  • 前言
  • 第四题
  • 第五题
  • 第六题
  • 第七题
  • 第八题
  • 第九题
  • 第十题（子标签）

前言

昨天写了前面三次作业，今天把剩下的七个作业写完

第四题

http://127.0.0.1:5500/index1.html，就用这个网址查看代码在网页的展示效果
在这里插入图片描述
代码评测过不了，但是代码没有问题，试了好几个浏览器，也尝试了手机端，不管了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;}div:nth-child(1) {border-width: 10px;border-style: solid dotted inset dashed;border-color: blue red blue red;border-radius: 50%;}div:nth-child(2) {border: solid 3px black;border-radius: 10px;}</style>
</head><body><div></div><div></div>
</body></html>

第五题

修改之前的网页
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: block;width: 500px;height: 500px;padding: 10px;margin: 20px;background-color: lightblue;}.inline-block-div {display: inline-block;width: 100px;height: 100px;padding: 10px;margin: 10px;background-color: blue;color: white;}span {display: inline;padding-left: 10px;padding-right: 10px;margin-left: 20px;margin-right: 20px;background-color: bisque;color: green;}.block-div {display: block;width: 100px;height: 100px;padding: 10px;margin: 10px;background-color: blue;color: white;overflow: hidden;text-overflow: ellipsis;}</style>
</head><body><div class="container"><div class="inline-block-div">div-1</div><div class="inline-block-div">div-2</div><div class="inline-block-div">div-3</div><br><span>span-1</span><span>span-2</span><span>span-3</span><br><div class="block-div">123456789101112</div></div>
</body></html>

在这里插入图片描述

第六题

修改之前
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: lightsalmon;}div:nth-child(1) {padding: 10px 20px 30px 40px;margin: 10px 20px 30px 40px;}div:nth-child(2) {margin: 0 auto;}</style>
</head><body><div>文本1</div><div>文本2</div>
</body></html>

在这里插入图片描述

第七题

修改之前
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;padding: 10px;margin: 10px;background-color: lightblue;border: solid 10px gray;}div:nth-child(1) {box-sizing: content-box;}div:nth-child(2) {box-sizing: border-box;}</style>
</head><body><div>1</div><div>2</div>
</body></html>

在这里插入图片描述

第八题

修改之前效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 2000px;margin: 0;}div {width: 200px;height: 200px;background-color: lightblue;margin: 20px;}div:nth-child(1) {position: static;}div:nth-child(2) {position: relative;left: 50px;top: 15px;}div:nth-child(3) {position: absolute;background-color: rgba(0, 0, 255, 0.5);left: 30px;top: 30px;}div:nth-child(4) {position: fixed;background-color: rgba(0, 255, 0, 0.5);left: 100px;top: 250px;}div:nth-child(10) {position: sticky;background-color: rgba(255, 0, 0, 0.5);bottom: 10px;}</style>
</head><body><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</body></html>

修改之后
在这里插入图片描述

第九题

修改之前
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 500px;height: 500px;background-color: lightblue;}.item {width: 100px;height: 100px;margin: 10px;background-color: lightcoral;float: left;}.next-line {width: 150px;height: 150px;background-color: rgba(0, 0, 255, 0.5);clear: left;}</style>
</head><body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="next-line"></div></div>
</body></html>

修改之后的样式
在这里插入图片描述

第十题（子标签）

修改之前的样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;width: 50%;height: 500px;background-color: lightblue;margin: 10px;}.container>div {width: 120px;height: 120px;}.container>div:nth-child(odd) {background-color: lightsalmon;}.container>div:nth-child(even) {background-color: lightgreen;}.container:nth-child(1) {flex-wrap: wrap;justify-content: space-between;align-content: flex-start;}.container:nth-child(2) {flex-direction: row-reverse;flex-wrap: nowrap;}.container:nth-child(2)>div:nth-child(odd) {flex-grow: 3;flex-shrink: 3;}.container:nth-child(2)>div:nth-child(even) {flex-grow: 1;flex-shrink: 1;}</style>
</head><body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
</body></html>

修改之后的样式
在这里插入图片描述

相关文章：

css 作业 2

文章目录 前言第四题第五题第六题第七题第八题第九题第十题&#xff08;子标签&#xff09; 前言 昨天写了前面三次作业&#xff0c;今天把剩下的七个作业写完 第四题 http://127.0.0.1:5500/index1.html&#xff0c;就用这个网址查看代码在网页的展示效果 代码评测过不了&…...

编程日记 2024/7/28 13:28:58

axios在vue中的使用

文章目录 一、axios是什么&#xff1f;二、使用步骤2.1 下载2.2 引入2.3 使用Get请求Post请求Forms 三、封装 一、axios是什么&#xff1f; Axios 是一个基于 promise 网络请求库&#xff0c;作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和no…...

编程日记 2024/7/28 13:27:57

FastAPI（七十七）实战开发《在线课程学习系统》接口开发-- 课程编辑和查看评论

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 课程编辑 先来看下课程编辑 1.判断是否登录 2.判断课程是否存在 3.是否有权限&#xff08;只有自己可以修改自己的课程&#xff09; 4.名称是否重复…...

编程日记 2024/7/28 13:26:57

【JavaEE初阶】线程的概念及创建

目录 &#x1f4d5; 前言 &#x1f4d5; 认识线程&#xff08;Thread&#xff09; &#x1f6a9; 概念 &#x1f60a;线程是什么 &#x1f642; 为啥要有线程 &#x1f62d; 进程和线程的区别&#xff08;面试题重点&#xff09; &#x1f92d; Java的线程和操作系统线程…...

编程日记 2024/7/28 13:23:53

0727，学什么学，周六就应该休息！！！！！

周六就应该休息&#xff0c;一天就忙了两小时也不是我的错喵 目录 UDP的小总结 01&#xff1a;使用select实现一个基于UDP的一对一即时聊天程序。 1.0 复读机服务器和树洞客户端 2.0 byby不了一点的敬业服务器&#xff01;&#xff01;&#xff01; 今天到此为止&#x…...

编程日记 2024/7/28 13:18:49

【C#】获取DICOM图像像素的像素值

8位像素深度的像素值 public byte GetGreyValue(int x, int y) {x Math.Min(x, m_nWidth - 1);y Math.Min(y, m_nHeight - 1);unsafe{byte* greyValue (byte*)m_pDicomData.ToPointer() y * m_nWidth x;return *greyValue;} } 16位像素深度的像素值 public ushort GetG…...

编程日记 2024/7/28 13:16:45

k8s多集群管理工具kubecm

文章目录 一、概述二、安装1、官网链接2、各平台安装2.1、MacOS2.2、Linux2.3、Windows 三、实例1、验证2、配置kubecm自动补全&#xff08;选做&#xff09;2.1、Bash2.2、Zsh2.3、fish2.4、PowerShell 3、创建存放kubeconfig文件的目录4、添加到 $HOME/.kube/config4.1、kube…...

编程日记 2024/7/28 13:15:44

通过 WSL 2 在Windows 上挂载 Linux 磁盘

原文查看 曾为了传输或者共享不同系统的文件频繁地在 Windows 和 Linux 系统之间切换&#xff0c;效率过低&#xff0c;所以尝试通过 WSL 2 在Windows 上挂载 Linux 磁盘。 先决条件 需要在Windows 10 2004 及更高版本&#xff08;Build 19041 及更高版本&#xff09;或 Win…...

编程日记 2024/7/28 13:13:42

【C#】在一个给定的宽、高范围内，获取到该多边形内部的所有坐标集合？

问题点 使用C#语言在一个给定的宽、高范围内&#xff0c;获取到该多边形内部的所有坐标集合&#xff1f; 这个多边形可能存在交叉及互相重叠部分 图像的宽、高可以定义为&#xff1a;2000*2000 多边形坐标集合&#xff1a;Point[] polygon_points new Point[] { new Point…...

编程日记 2024/7/28 13:11:40

json的数据结构

JSON 的数据结构 JSON 由两种数据结构组成&#xff1a;对象&#xff08;字典&#xff09;和数组。 一、对象 对象&#xff08;object&#xff09;是由键值对组成的无序集合。 键是字符串&#xff0c;值可以是任何类型&#xff0c;包括对象和数组&#xff1b;对象由一对花括…...

编程日记 2024/7/28 13:09:37

html-docx-js和file-saver实现html导出word

依赖html-docx-js&#xff0c;file-saver&#xff0c;html2canvas import { asBlob } from html-docx-js/dist/html-docx; import { saveAs } from file-saver; import html2Canvas from html2canvas;const handleImageToBase64 (cloneEle) > {let imgElements cloneEle.…...

编程日记 2024/7/28 13:06:34

三维影像系统PACS源码，图像存储与传输系统，应用于医院中管理医疗设备如CT，MR等产生的医学图像的信息系统

PACS&#xff0c;即图像存储与传输系统&#xff0c;是应用于医院中管理医疗设备如CT&#xff0c;MR等产生的医学图像的信息系统。目标是支持在医院内部所有关于图像的活动&#xff0c;集成了医疗设备&#xff0c;图像存储和分发&#xff0c;数字图像在重要诊断和会诊时的显示&a…...

编程日记 2024/7/28 13:04:31

Golang | Leetcode Golang题解之第292题Nim游戏

题目&#xff1a; 题解&#xff1a; func canWinNim(n int) bool {return n%4 ! 0 }...

编程日记 2024/7/28 13:03:30

Redis在SpringBoot中配置

lettuce redis的使用方法有两种&#xff0c;jedis和lecttuce&#xff0c;jedis用的不是很多&#xff0c;下面讲解用lettuce的使用方法。 首先导包&#xff1a; <!--redis依赖--> <dependency><groupId>org.springframework.boot</groupId><artif…...

编程日记 2024/7/28 13:00:26

linux 网络子系统

__netif_receive_skb_core 是 Linux 内核网络子系统中一个非常重要的函数&#xff0c;它负责将网络设备驱动层接收到的数据包传递到上层协议栈进行处理。以下是对该函数的一些关键点的详细解析&#xff1a; 一、函数作用 __netif_receive_skb_core 函数是处理接收到的网络数据…...

编程日记 2024/7/28 12:55:22

JVM：垃圾回收器演进

文章目录 一、演进二、Shenandoah三、ZGC 一、演进 二、Shenandoah Shenandoah是由Red Hat开发的一款低延迟的垃圾收集器&#xff0c;Shenandoah并发执行大部分GC工作&#xff0c;包括并发的整理&#xff0c;堆大小对STW的时间基本没有影响。 三、ZGC ZGC是一种可扩展的低延…...

编程日记 2024/7/28 12:54:20

全新微软语音合成网页版源码，短视频影视解说配音网页版系统-仿真人语音

源码介绍 最新微软语音合成网页版源码&#xff0c;可以用来给影视解说和短视频配音。它是TTS文本转语言&#xff0c;API接口和PHP源码。 这个微软语音合成接口的源码&#xff0c;超级简单&#xff0c;就几个文件搞定。用的是官方的API&#xff0c;试过了&#xff0c;合成速度…...

编程日记 2024/7/28 12:44:11

大语言模型-对比学习-Contrastive Learning

一、对比学习概念 对比学习是一种特殊的无监督学习方法。 旨在通过拉近相关样本的距离并且推远不相关样本的距离&#xff0c;来学习数据表示。 通常使用一种高自由度、自定义的规则来生成正负样本。在模型预训练中有着广泛的应用。 二、对比学习小案例 对比学习主要分为三个…...

编程日记 2024/7/28 12:43:10

C++ 封装的用法

C(七)封装 封装&#xff0c;可以达到&#xff0c;对外提供接口&#xff0c;屏蔽数据&#xff0c;对内开放数据。 权限控制 struct 中所有行为和属性都是 public 的(默认)&#xff0c;此举也是为了 C兼容 C 语言&#xff0c; 因为 C 语言中没有权限的概念。 C中的 class 可以…...

编程日记 2024/7/28 12:42:09

【C++11：异常】

目录 抛异常标准书写格式 抛异常如何执行&#xff1f; 指定抛出异常类型&#xff1a; noexcept 关键字&#xff1a;throw 抛异常标准书写格式 抛异常如何执行&#xff1f; 当212行的异常被抛出&#xff0c;程序会重新返回函数func中&#xff0c;在函数中去寻找catch 语句的…...

编程日记 2024/7/28 12:41:08

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/1/16 9:27:48

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/1/15 5:29:59

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/1/14 22:06:21

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/1/17 18:03:52

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/15 6:36:07

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/1/15 5:01:44