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

css 作业 2

news 2025/8/15 4:44:00

文章目录

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

前言

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

第四题

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>