css 作业 2
文章目录
- 前言
- 第四题
- 第五题
- 第六题
- 第七题
- 第八题
- 第九题
- 第十题（子标签）
前言
昨天写了前面三次作业，今天把剩下的七个作业写完
第四题
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
文章目录 前言第四题第五题第六题第七题第八题第九题第十题（子标签） 前言 昨天写了前面三次作业，今天把剩下的七个作业写完 第四题 http://127.0.0.1:5500/index1.html，就用这个网址查看代码在网页的展示效果 代码评测过不了&…...
axios在vue中的使用
文章目录 一、axios是什么？二、使用步骤2.1 下载2.2 引入2.3 使用Get请求Post请求Forms 三、封装 一、axios是什么？ Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和no…...
FastAPI（七十七）实战开发《在线课程学习系统》接口开发-- 课程编辑和查看评论
源码见："fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 课程编辑 先来看下课程编辑 1.判断是否登录 2.判断课程是否存在 3.是否有权限（只有自己可以修改自己的课程） 4.名称是否重复…...
【JavaEE初阶】线程的概念及创建
目录 📕 前言 📕 认识线程（Thread） 🚩 概念 😊线程是什么 🙂 为啥要有线程 😭 进程和线程的区别（面试题重点） 🤭 Java的线程和操作系统线程…...
0727，学什么学，周六就应该休息！！！！！
周六就应该休息，一天就忙了两小时也不是我的错喵 目录 UDP的小总结 01：使用select实现一个基于UDP的一对一即时聊天程序。 1.0 复读机服务器和树洞客户端 2.0 byby不了一点的敬业服务器！！！ 今天到此为止&#x…...
【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…...
k8s多集群管理工具kubecm
文章目录 一、概述二、安装1、官网链接2、各平台安装2.1、MacOS2.2、Linux2.3、Windows 三、实例1、验证2、配置kubecm自动补全（选做）2.1、Bash2.2、Zsh2.3、fish2.4、PowerShell 3、创建存放kubeconfig文件的目录4、添加到 $HOME/.kube/config4.1、kube…...
通过 WSL 2 在Windows 上挂载 Linux 磁盘
原文查看 曾为了传输或者共享不同系统的文件频繁地在 Windows 和 Linux 系统之间切换，效率过低，所以尝试通过 WSL 2 在Windows 上挂载 Linux 磁盘。 先决条件 需要在Windows 10 2004 及更高版本（Build 19041 及更高版本）或 Win…...
【C#】在一个给定的宽、高范围内，获取到该多边形内部的所有坐标集合？
问题点 使用C#语言在一个给定的宽、高范围内，获取到该多边形内部的所有坐标集合？ 这个多边形可能存在交叉及互相重叠部分 图像的宽、高可以定义为：2000*2000 多边形坐标集合：Point[] polygon_points new Point[] { new Point…...
json的数据结构
JSON 的数据结构 JSON 由两种数据结构组成：对象（字典）和数组。 一、对象 对象（object）是由键值对组成的无序集合。 键是字符串，值可以是任何类型，包括对象和数组；对象由一对花括…...
html-docx-js和file-saver实现html导出word
依赖html-docx-js，file-saver，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.…...
三维影像系统PACS源码，图像存储与传输系统，应用于医院中管理医疗设备如CT，MR等产生的医学图像的信息系统
PACS，即图像存储与传输系统，是应用于医院中管理医疗设备如CT，MR等产生的医学图像的信息系统。目标是支持在医院内部所有关于图像的活动，集成了医疗设备，图像存储和分发，数字图像在重要诊断和会诊时的显示&a…...
Golang | Leetcode Golang题解之第292题Nim游戏
题目： 题解： func canWinNim(n int) bool {return n%4 ! 0 }...
Redis在SpringBoot中配置
lettuce redis的使用方法有两种，jedis和lecttuce，jedis用的不是很多，下面讲解用lettuce的使用方法。 首先导包： <!--redis依赖--> <dependency><groupId>org.springframework.boot</groupId><artif…...
linux 网络子系统
__netif_receive_skb_core 是 Linux 内核网络子系统中一个非常重要的函数，它负责将网络设备驱动层接收到的数据包传递到上层协议栈进行处理。以下是对该函数的一些关键点的详细解析： 一、函数作用 __netif_receive_skb_core 函数是处理接收到的网络数据…...
JVM：垃圾回收器演进
文章目录 一、演进二、Shenandoah三、ZGC 一、演进 二、Shenandoah Shenandoah是由Red Hat开发的一款低延迟的垃圾收集器，Shenandoah并发执行大部分GC工作，包括并发的整理，堆大小对STW的时间基本没有影响。 三、ZGC ZGC是一种可扩展的低延…...
全新微软语音合成网页版源码，短视频影视解说配音网页版系统-仿真人语音
源码介绍 最新微软语音合成网页版源码，可以用来给影视解说和短视频配音。它是TTS文本转语言，API接口和PHP源码。 这个微软语音合成接口的源码，超级简单，就几个文件搞定。用的是官方的API，试过了，合成速度…...
大语言模型-对比学习-Contrastive Learning
一、对比学习概念 对比学习是一种特殊的无监督学习方法。 旨在通过拉近相关样本的距离并且推远不相关样本的距离，来学习数据表示。 通常使用一种高自由度、自定义的规则来生成正负样本。在模型预训练中有着广泛的应用。 二、对比学习小案例 对比学习主要分为三个…...
C++ 封装的用法
C(七)封装 封装，可以达到，对外提供接口，屏蔽数据，对内开放数据。 权限控制 struct 中所有行为和属性都是 public 的(默认)，此举也是为了 C兼容 C 语言， 因为 C 语言中没有权限的概念。 C中的 class 可以…...
【C++11：异常】
目录 抛异常标准书写格式 抛异常如何执行？ 指定抛出异常类型： noexcept 关键字：throw 抛异常标准书写格式 抛异常如何执行？ 当212行的异常被抛出，程序会重新返回函数func中，在函数中去寻找catch 语句的…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中，提供了一系列静态方法用于操作数组（如排序、搜索、填充、比较等）。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序（sort） 对数组进行升序…...