元素的层级
<!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>元素的层级</title> <style> body{ font-size: 40px; } .box1{ width: 100px; height: 100px; background-color:rgb(205,0, 0,.5); position: absolute; /* 开启了定位元素,可通过z-index属性来指定元素的层级 z-index需要一个整数作为参数,值越大元素的层级越高 元素的层级越高越优先显示 如果元素层级一样,则优先显示靠下的元素 祖先元素的层级再高也不会覆盖后代元素 */ z-index:3; } .box2{ width: 100px; height: 100px; background-color:rgb(25,0, 0,.5); position: absolute; top: 50px; left: 50px; } .box3{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 75px; left: 75px; } .box4{ width: 100px; height: 100px; background-color: rgb(48, 238, 23); position: absolute; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3 <div class="box4">4</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>轮播图的结构部分</title> <link rel="stylesheet" href="../css/reset.css"> <style> /* 设置图片的容器 */ .img-list{ width: 590px; height: 470px; margin: 100px auto; /* 为ul开启相对定位,目的使ul中的pointer可以相对于ul定位 而不是相对于初始包含块(html)去定位 */ position: relative; } /* 设置li */ .img-list li{ position: absolute; } /* 通过修改元素的层级来显示指定的图片 */ .img-list li:nth-child(8){ z-index: 1; } /* 设置导航点的样式 */ .pointer{ position: absolute; z-index: 666; bottom: 20px; left: 40px; } .pointer a{ /* 设置元素相左浮动 */ float: left; width: 20px; height: 20px; margin: 0 2px; border-radius: 50%; background-color: rgba(255, 255, 255,.3); background-clip: content-box; border: 2px solid transparent; } .pointer a.active, .pointer a:hover{ background-color: #fff; border: 2px solid rgba(255, 255, 255,.3); } </style> </head> <body> <ul class="img-list"> <li><a href="javascript:;"><img src="./img/1.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/4.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/6.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/7.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./img/8.jpg" alt=""></a></li> <div class="pointer"> <a class="active" href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </ul> </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>字体</title> <style> /* font-face可以将服务器中的字体直接提供给用户使用 1加载速度取决于网速 2版权 3字体格式 */ @font-face{ /* 指定字体的名字 */ font-family: 'myfont'; /* 服务器中字体的路径 */ src: url(./font/COOPBL.TTF) format("truetype"); } p{ /* 字体的相关样式 color 设置字体颜色 font-size字体的大小 和font-size相关的单位 em相当于当前元素的一个font-size rem相当于根元素的一个font-size font-family字体族(字体的格式) 可选值: serif 衬线字体 san-serif 非衬线字体 monospace等宽字体 指定字体的类别,浏览器会自动使用该类下的字体 font-family可以同时指定多个字体,之间用','隔开 字体生效时优先使用第一个,第一个无法使用时使用第 二个,以此类推。 例:Microsoft YaHei,Heiti SC,tahoma,arial, Hiragino Sans GB,"\5B8B\4F53",sans-serif; */ color: red; font-size: 60px; /* font-family: monospace; */ font-family: myfont; · · · } </style> </head> <body> <p>你好吗?<br>how are you!</p> </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>图标字体</title> <link rel="stylesheet" href="./fa/css/all.css"> </head> <body> <!-- 图标字体(iconfont) 在网页中经常需要使用一些图标,可以通过图片引入图标 但图片内存较大,并且不灵活 在使用图标时,可以将图标直接设置为字体 再通过font-face的形式来对字体进行引入 就可以通过使用字体的形式来使用图标。 fontawesome使用步骤 1下载https://fontawesome.com/download 2解压 3将css和webfonts移动到项目中 4将all.css引入到网页中 5使用图标字体 直接通过类名来使用图标字体 --> <i class="fas fa-bell" style="font-size: 80px; color:red;"></i> <i class="fas fa-bell-slash"style="font-size: 80px; color:red;"></i> <i class="fas fa-a" style="font-size: 80px; color:green;"></i> <i class="fab fa-accessible-icon"style="font-size: 80px; color:red;"></i> </body> </html>
图标字体2
<!DOCTYPE html> <html lang="zh "> <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>图标字体2</title> <link rel="stylesheet" href="./fa/css/all.css"> <style> li { list-style: none; color: blue; } li::before{ /* 通过伪元素设置图标字体 1找到要设置图标的元素通过before或after选中 2在content中设置字体的编码 3设置字体样式 fab font-family:‘font awesome 5 brands’; fas font-family:‘font awesome 5 free’; font-weight:900 */ content: '\f1b0'; /* font-family:'Font Awesome 6 Brands' */ font-family: 'Font Awesome 6 Free'; font-weight:900; color: red; } </style> </head> <body> <div class="a"> <i class="fas fa-star"></i> </div> <ul> <li> <!-- <i class="fas fa-star"></i> --> 横看成岭侧成峰 </li> <li> <i class="fas fa-star"></i> 远近高低各不同 </li> <li> <i class="fas fa-star"></i> 不识庐山真面目 </li> <li> <i class="fas fa-star"></i> 只缘身在此山中 </li> </ul> <span class="fas fa-bell"></span> <!-- 通过实体使用图标字体 &#x图标的编码 --> <span class="fas"></span> </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>阿里的字体库</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> i.iconfont{ font-size: 100px; } p::before{ content:"\e627" ; font-family: 'iconfont'; font-size: 100px; } </style> </head> <body> <i class="iconfont"></i> <i class="iconfont icon-zhixianghuishou"></i> <p>hello</p> </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>行高</title> <style> div{ font-size: 30px; /* 可以将行高设置为和高度一样的值,是单行文字在一个元素中垂直居中 */ line-height: 100px; /* 行高(line height) ·行高指文字占有的实际高度 ·可以通过line-height来设置行高 行高可以直接指定一个大小(px em) 也可以直接为行高设置一个整数 若是一个整数,行高即就是字体的指定的倍数 字体框 字体框是字体存在的格子,设置font-size实际上就是在 设置字体框的高度。 行高会在字体框的上下平均分配 */ border: 1px red solid; /* line-height: 1.3333; */ } </style> </head> <body> <div>人之初,性本善,123451654651654根据用户边缘户借款hi偶奇偶以哦哦6</div> </body> </html>