做网站学习什么,重庆观音桥步行街,中国最好的建筑设计公司,手机制作图片的软件免费文章目录 前言第四题第五题第六题第七题第八题第九题第十题#xff08;子标签#xff09; 前言
昨天写了前面三次作业#xff0c;今天把剩下的七个作业写完
第四题
http://127.0.0.1:5500/index1.html#xff0c;就用这个网址查看代码在网页的展示效果 代码评测过不了子标签 前言
昨天写了前面三次作业今天把剩下的七个作业写完
第四题
http://127.0.0.1:5500/index1.html就用这个网址查看代码在网页的展示效果 代码评测过不了但是代码没有问题试了好几个浏览器也尝试了手机端不管了
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {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
/headbodydiv/divdiv/div
/body/html第五题
修改之前的网页
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classcontainerdiv classinline-block-divdiv-1/divdiv classinline-block-divdiv-2/divdiv classinline-block-divdiv-3/divbrspanspan-1/spanspanspan-2/spanspanspan-3/spanbrdiv classblock-div123456789101112/div/div
/body/html第六题
修改之前
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {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
/headbodydiv文本1/divdiv文本2/div
/body/html第七题
修改之前
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {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
/headbodydiv1/divdiv2/div
/body/html第八题
修改之前效果
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {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
/headbodydiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/divdiv9/divdiv10/div
/body/html修改之后
第九题
修改之前
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classcontainerdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classnext-line/div/div
/body/html修改之后的样式
第十题子标签
修改之前的样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {display: flex;width: 50%;height: 500px;background-color: lightblue;margin: 10px;}.containerdiv {width: 120px;height: 120px;}.containerdiv:nth-child(odd) {background-color: lightsalmon;}.containerdiv: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
/headbodydiv classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/divdiv classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/div
/body/html修改之后的样式
