上篇博客介绍了组合选择器，包括四种，分别是群组选择器、后代（子代）选择器、兄弟（相邻选择器）及交集选择器；a 标签的四大伪类选择器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也可以用于其他标签，索引选择器包括三种
<!-- 先位置后类型 -->div:nth-child(1) <!-- 先类型后位置 -->div:nth-of-type(1)<!-- 取反，先找到有 abc 和 div 类的标签，然后取反-->.div:not([abc])
最后介绍了最最重要的盒模型，盒模型由四部分组成由内到外分别是：content+padding+border+margin，其中 content+padding+border 参与盒子显示，margin 参与盒子布局。
<!doctype html><html><head> <meta chart="utf-8"> <title>常用标签的使用</title> <!-- o --> <!-- <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> --> <!-- <meta name="description" content="80字以内的一段话，与网站内容相关"> --> <!-- 移动适配 --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,ur-scalable=no" /> --> <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico"> <style type="text/css"> .img { /*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/ 压力定义 /*width: 200px;*/ height: 100px; } /*四个伪类*/ /*ret操作*/ a { color: #333; text-decoration: none; } /*ul的ret操作*/ ul { margin: 0; padding: 0; list-style: none; /*margin-left: 40px;*/ } </style></head><body> <!-- 1.设置锚点: 锚点名page_top --> <a href="" name="page_top"></a> <img class="img" src="./img/timg.jpg" alt=""> <a href="00_复习预习.html">前往00页面</a> <!-- 前往本页面中个某个位置: top => 锚点 --> <!-- 1.设置锚点 2.设置前往锚点的a转跳 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 通配标签页可以设置锚点 --> <!-- <a href="" name="t_123"></a> --> <div id="t_123">123</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <b爱有多远r> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 2.设置前往锚点的a转跳: #锚点名 --> <a href="#page_top">top</a> <a href="#t_123">123</a> <a href="00_复习预习.html#md">前往锚点</a></body></html><!doctype html><html><head> <meta chart="utf-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; 日文简历模板免费下载 background-color: orange; } .box { /*边界圆角*/ /*百分比控制*/ /*border-radius: 50%;*/ /*实际像素控制*/ /*border-radius: 20px;*/ /*横纵分离 横 / 纵*/ /*border-radius: 20px / 50%;*/ /*左上为第一个角, 顺时针赋值, 无值找对角*/ /*左上横30px 右上横100px 右下横=左上横 左下横=右上横, 四角纵向全是50%*/ /*border-radius: 30px 100px / 50%;*/ /*单独设置时, 横向 纵向*/ /*border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%;*/ border-radius: 50% 50% 0 0 / 100% 100% 0 0; } </style></head><body> <div class="box"></div></body></html><!doctype html><html><head>食品安全宣传展板 <meta chart="utf-8"> <title>背景样式</title> <style type="text/css"> .box, .wrap { width: 200px; height: 200px; background-color: orange; } .wrap { /*图片过大会显示不全*/ background-image: url('img/timg.jpg'); /*规定背景图片显示尺寸*/ background-size: 200px 200px; } .box { /*图片过小会平铺*/ background-image: url('img/123.png'); /*平铺:repeat-x | repeat-y | repeat | no-repeat*/ background-repeat: no-repeat; /*位置(定位): 可以写具体数值,也可以写位置单词*/ /*background-position: 10px center;*/ /*background-position: right bottom;*/ /*background-position: center center;*/ /*设置一个值时,控制的是x轴,y轴取center*/ /*设置;两个值时,第一个值控制x,第二个值控制y*/ background-position: 10px 40px; /*整体设置*/ background: url('img/123.png') red no-repeat 50px 50px; } /*注: 实际开发中,资源图片大小一定要与显示区域等工作失误检讨书大*/ </style></head><body> <img src="img/123.png" alt=""> <div class="box"></div> <div class="wrap"></div></body></html><!doctype html><html><head> <meta chart="utf-8"> <title>精灵图</title> <style type="text/css"> .box { width: 500px; height: 100px; /*height: 300px;*/ border: 5px solid black; } .box { background-image: url('img/bg.png'); background-position: 0 -150px; } .box:hover { cursor: pointer; background-position: 0 -250px; } /*1.显示区域一定要与精灵图目标小图大小一致*/ /*2.通过背景图片定位方式将目标小图移至显示位置*/ </style> <style type="text/css"> .lt1 { width: 155px; height: 48px; background: url('img/bg.png') no-repeat 0 0; } .lt1:hover { cursor: pointer; background: url('img/bg.png') no-repeat 0 -48px; } </style></head><body> <!-- 精灵图: 各种小图拼接起来的一张大图 --> <!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) --> <div class="box"></div> <div class="lt1"></div></body></html><!doctype html><html><head> <meta chart="utf-8"> <title>盒模型布局细节</title> <style type="text/css"> .sup { width: 500px; height: 100px; background: orange; } .sub { width: 50px; height: 50px; background-color: red; } /*sub在sup中 水平居中*/ .sub { /*margin-left: auto; margin-right: auto;*/ margin: 0 auto; } /*垂直居中*/ .sub { margin-top: 24px; } /*margin坑: 父子联动*/ /*.box { width: 1px; height: 1px; }*/ /*解决一: 设置border-top*/ .sup { /*border-top: 1px solid transparent; height: 99px;*/ } /*解决二: 设置padding-top*/ .sup { padding-top: 1px; height: 99px; } /*margin坑: 上兄弟margin-bottom与下兄弟margin-top重合, 取大值*/ /*解决方案: 只设置一个,建议设置下兄弟margin-top*/ /*margin布局: 下盒子的垂直起始位置决定于同结构中上盒子的margin结束位置;水平起始位置就是父级content最左侧*/ </style></head><body> <div class="sup"> <!-- <div class="box"></div> --> <div class="sub"></div> </div></body></html>
本文发布于:2023-04-03 11:30:02，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f59b8800bdc09201041d8f671ad21d6c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：前端（四）.doc
本文 PDF 下载地址：前端（四）.pdf
| 留言与评论（共有 0 条评论） |
