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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/49940.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

650Kg大载重双旋翼无人直升机技术详解

650Kg大载重双旋翼无人直升机技术详解

大载重双旋翼无人直升机&#xff0c;作为现代航空技术的杰出代表&#xff0c;其设计巧妙融合了高效能、高稳定性与灵活性。该机采用经典的双旋翼布局&#xff0c;有效解决了传统单旋翼直升机尾桨产生的复杂气动力问题&#xff0c;极大提升了飞行稳定性和安全性。机体结构采用轻…
阅读更多...
网页突然被恶意跳转或无法打开？DNS污染怎么解决？

网页突然被恶意跳转或无法打开？DNS污染怎么解决？

前言 在网上冲浪时&#xff0c;我们时常会遭遇DNS污染这一区域性攻击&#xff0c;几乎无人能幸免。受影响时&#xff1a;尝试访问正规网站可能会被错误导向赌博、色情或其他恶意站点。 1.我们为什么需要DNS 当我们想要访问一个网站时&#xff0c;就像拨打朋友的电话号码一样…
阅读更多...
Java聚合快递小程序对接云洋系统程序app源码

Java聚合快递小程序对接云洋系统程序app源码

​一场物流效率的革命 引言&#xff1a;物流新时代的序章 在数字化浪潮席卷各行各业的今天&#xff0c;物流行业也迎来了前所未有的变革。为了进一步提升物流效率&#xff0c;优化用户体验&#xff0c;聚合快递系统与云洋系统小程序的对接成为了行业内外关注的焦点。这一创新…
阅读更多...
教务管理平台/高校教务管理系统的设计与实现/教务网站/学生成绩管理系统/学生课程管理系统

教务管理平台/高校教务管理系统的设计与实现/教务网站/学生成绩管理系统/学生课程管理系统

获取源码联系方式请查看文章结尾&#x1f345; 摘 要 伴随着社会以及科学技术的发展&#xff0c;互联网已经渗透在人们的身边&#xff0c;网络慢慢的变成了人们的生活必不可少的一部分&#xff0c;紧接着网络飞速的发展&#xff0c;管理系统这一名词已不陌生&#xff0c;越来…
阅读更多...
python_基础编程_字典、集合

python_基础编程_字典、集合

字典类型&#xff1a; 一、什么是字典 字典&#xff1a;是py内置的数据结构之一&#xff0c;与列表一样是一个可变的序列&#xff0c;以键值对的方式存储数据&#xff0c;是一个无序的序列 二、字典的原理 实现原理&#xff1a;Py根据key查找value所在的位置 三、字典的创…
阅读更多...
Win11安装Docker

Win11安装Docker

下载Docker Desktop for Windows 下载 下载连接&#xff1a;Install Docker Desktop on Windows | Docker Docs 地址在国外&#xff0c;需要科学上网。也可使用我提供的&#xff0c;百度网盘&#xff1a;https://pan.baidu.com/s/1232TTkkzLsoZyFjC3bmgiQ 安装 下载完成之后…
阅读更多...
java深浅拷贝

java深浅拷贝

目录 1、浅拷贝与深拷贝的区别 浅拷贝 深拷贝 2、浅拷贝实现 3、深拷贝实现 来都来了点个赞收藏一下再走呗~~~&#x1f339;&#x1f339;&#x1f339;&#x1f339;&#x1f339; 1、浅拷贝与深拷贝的区别 浅拷贝 定义&#xff1a;浅拷贝创建了一个新的对象&#xff0…
阅读更多...
数据容器-小结

数据容器-小结

目录 一、数据容器特点比较 二、数据容器操作小结 1、通用序列操作 2、通用的转换操作 3、案例演示 一、数据容器特点比较 二、数据容器操作小结 1、通用序列操作 2、通用的转换操作 3、案例演示 1&#xff09;list([iterable])&#xff1a;转换成列表 str_a "…
阅读更多...
Vue.js 2 项目实战（八）：小黑记事本组件版

Vue.js 2 项目实战（八）：小黑记事本组件版

前言 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计初衷是通过采用简洁且强大的结构&#xff0c;使前端开发变得更简单和高效。以下是对 Vue.js 的详细介绍&#xff1a; 核心特性 声明式渲染 Vue.js 使用声明式语法来描述用户界面&#xff0c;通过数据绑…
阅读更多...
Python酷库之旅-第三方库Pandas(049)

Python酷库之旅-第三方库Pandas(049)

目录 一、用法精讲 176、pandas.Series.rank方法 176-1、语法 176-2、参数 176-3、功能 176-4、返回值 176-5、说明 176-6、用法 176-6-1、数据准备 176-6-2、代码示例 176-6-3、结果输出 177、pandas.Series.sem方法 177-1、语法 177-2、参数 177-3、功能 177…
阅读更多...
深入探索Python3网络爬虫：构建数据抓取与解析的强大工具

深入探索Python3网络爬虫：构建数据抓取与解析的强大工具

前言 在当今这个信息爆炸的时代&#xff0c;数据成为了驱动各行各业发展的关键要素。无论是市场分析、用户行为研究&#xff0c;还是内容聚合与推荐系统&#xff0c;都需要从海量的互联网数据中提取有价值的信息。而网络爬虫&#xff0c;作为自动化获取网页数据的技术手段&…
阅读更多...
JVM系列(二) -类的加载过程

JVM系列(二) -类的加载过程

一、背景介绍 我们知道 Java 是先通过编译器将.java类文件转成.class字节码文件&#xff0c;然后再通过虚拟机将.class字节码文件加载到内存中来实现应用程序的运行。 那么虚拟机是什么时候加载class文件&#xff1f;如何加载class文件&#xff1f;class文件进入到虚拟机后发…
阅读更多...
后端解决跨域（Cross-Origin Resource Sharing）(三种方式)

后端解决跨域（Cross-Origin Resource Sharing）(三种方式)

注解CrossOrigin 控制层的类上或者方法上加注解CrossOrigin 实现接口并重写方法 Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {// 设置允许跨域的路径registry.addMapping("/**&qu…
阅读更多...
教您批量下载天猫图片信息，节省时间

教您批量下载天猫图片信息，节省时间

图片在电商中至关重要&#xff0c;高质量的商品图片能吸引顾客注意&#xff0c;提升购买欲望。好的图片可以直观展示产品特性&#xff0c;帮助消费者了解商品&#xff0c;减少疑问和退换货率。同时&#xff0c;优质的视觉呈现增强品牌形象&#xff0c;提高转化率&#xff0c;促…
阅读更多...
【Django】ajax和django接口交互（获取新密码）

【Django】ajax和django接口交互（获取新密码）

文章目录 一、需求1. 效果图 二、实验1. 写get接口后端2. 写html后端3. 写前端4. 测试 一、需求 1. 效果图 二、实验 1. 写get接口后端 写views import string import random def getnewpwd(request):words list(string.ascii_lowercasestring.ascii_uppercasestring.digi…
阅读更多...
大模型算法面试题（十三）

大模型算法面试题（十三）

本系列收纳各种大模型面试题及答案。 1、微调后的模型出现能力劣化&#xff0c;灾难性遗忘是怎么回事 微调后的模型出现能力劣化&#xff0c;灾难性遗忘&#xff08;Catastrophic Forgetting&#xff09;是一个在机器学习领域&#xff0c;尤其是在深度学习和大模型应用中频繁出…
阅读更多...
特斯拉财报看点：FSD拳打华为，Robotaxi 脚踢百度

特斯拉财报看点：FSD拳打华为，Robotaxi 脚踢百度

大数据产业创新服务媒体 ——聚焦数据 改变商业 特斯拉发最新财报了&#xff0c;这不仅是一份财务报告&#xff0c;更是一张未来发展的蓝图。在这份蓝图中&#xff0c;两个关键词格外耀眼——FSD&#xff08;全自动驾驶系统&#xff09;和Robotaxi&#xff08;无人驾驶出租车&…
阅读更多...
探索科技新境界，体验系统维护的极致自由—蓝屏工具箱4.0全新登场

探索科技新境界，体验系统维护的极致自由—蓝屏工具箱4.0全新登场

官网&#xff1a;蓝屏工具箱官网 下载链接&#xff1a;蓝屏工具箱最新版安装包官方版下载 在数字化浪潮席卷全球的今天&#xff0c;软件工具已不仅仅是简单的代码集合&#xff0c;它们如同工匠手中的雕刻刀&#xff0c;精细打磨、雕琢着数字世界的每一个角落。创峄公司深谙此道…
阅读更多...
基于多种机器学习算法的短信垃圾分类模型

基于多种机器学习算法的短信垃圾分类模型

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主导入第三方库读取数据数据预处理数据分析与可视化机器学习建模贝叶斯逻辑回归支持向量机随机森林XGBoost总结每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私…
阅读更多...
【数据结构初阶】单链表经典算法题十二道——得道飞升（中篇）

【数据结构初阶】单链表经典算法题十二道——得道飞升（中篇）

hi&#xff0c;bro—— 目录 5、 链表分割 6、 链表的回文结构 7、 相交链表 8、 环形链表 【思考】 —————————————— DEAD POOL —————————————— 5、 链表分割 /* struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023