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

css 作业 2

news 2025/12/10 18:07:10

文章目录

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

前言

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

第四题

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/12/8 11:22:00

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/12/10 1:31:19

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/8 7:22:08

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/11/30 16:55:15

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/11/5 20:18:24

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/11/30 0:44:00

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/12/1 5:09:24