CSS

css

如何学习

  1. CSS是什么？

  2. CSS怎么用(快速入门)

  3. CSS选择器 (重点+难点)

  4. 美化网页 （文字、阴影、超链接、列表渐变...）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）

什么是CSS

css概述

CSS：Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...

打开网页-->右键-->审查元素

 

CSS发展史：

  • CSS1.0

  • CSS2.0 DIV(块) +CSS HTML与CSS结构分离的思想，网页变得简单

  • CSS2.1 浮动定位

  • CSS3.0 圆角、阴影、动画......

基本入门

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 ​
 <!--规范：<style>可以编写css的代码，每一个声明，最好使用分号结尾
 语法：
     选择器{
         声明1;
         声明2;
         声明3;
     }
 -->
 <style>
     h1{
         color: chartreuse;
     }
 </style>
 ​
 <body>
 <h1>一级标题</h1>
 </body>
 </html>

上面是没有分离的，最好使用下面这样分离的：

 

css的优势：

  1. 内容和表现分离

  2. 网页结构表现统一，可以实现复用

  3. 样式十分的丰富

  4. 利用SEO，容易被搜索引擎收录

css的三种导入方式

  • 行内样式

  • 内部样式

  • 外部样式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <!--优先级：就近原则 就这个例子，谁挨着h1近，就按哪个样式-->
 ​
 <!--内部样式-->
 <style>
     h1{
         color: chartreuse;
     }
 </style>
 <!--外部样式-->
 <link rel="stylesheet" href="css/style.css">
 ​
 <body>
 <!--行内样式-->
 <h1 style="color:#ef3525;">一级标题</h1>
 </body>
 </html>

选择器

作用：选择页面上的某一个或者某一类元素

1.基本选择器（重要）

  • 标签选择器 :选择一类标签 标签{}

  • 类 选择器 class:选择所有class属性一致的标签，跨标签 .类名{}

  • Id选择器 :全局唯一 #id名{}

 

优先级：id选择器>类选择器>标签选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <style>
     /*标签选择器*/
     h1{
        color: yellow;
     }
     /*类选择器*/
     .blue{
         color: blue;
     }
     /*id选择器*/
     #red{
         color: red;
     }
     #red1{
         color: #ef3525;
     }
 ​
 </style>
 <body>
 ​
 <!--优先级
 id选择器>类选择器>标签选择器
 -->
 <h1>一级标签</h1>
 <h1 class="blue">一级标签</h1>
 <h1 class="blue">一级标签</h1>
 <h1 id="red">一级标签</h1>
 <h1 class="blue" id="red1">一级标签</h1>
 ​
 </body>
 </html>

2.层次选择器

 

  1. 后代选择器：在某个元素的后面 爷爷 爸爸 你

     /*后代选择器*/
     body p{
         background-color: blue;
     }

  2. 子选择器：一代 儿子

     /*子选择器*/
     body>p{
         background-color: red;
     }

  3. 相邻兄弟选择器

     /*相邻兄弟选择器  只有一个 相邻（向下）*/
     #action+p{
         background-color: yellow;
     }

  4. 通用兄弟选择器

     /*通用兄弟选择器 */
     .action~p{
         background-color: chartreuse;
     }

 

3.结构伪类选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         /*定位ul的第一个元素*/
         ul li:first-child{
            background-color: #ef3525;
         }
         /*定位ul的最后一个元素*/
         ul li:last-child{
             background-color: chartreuse;
         }
         /*选中p1元素，定位到父元素，获取当前的第一个元素 如果第一个不是p元素 不显示   看顺序*/
         p:nth-child(1){
             background-color: blue;
         }
         /*选中p1元素，定位到父元素，获取第二个p元素*/
         p:nth-of-type(2){
             background-color: aqua;
         }
     </style>
 ​
 </head>
 <body>
     <h1>h1</h1>
     <p>p1</p>
     <p>p2</p>
     <p>p3</p>
     <ul>
         <li>li1</li>
         <li>li2</li>
         <li>li3</li>
     </ul>
 </body>
 </html>

 

4.属性选择器（重要）

id+class的结合

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         .p a{
             float: left;
             display: block;
             height: 50px;
             width: 50px;
             border-radius: 10px;
             background-color: chartreuse;
             text-align: center;
             color: red;
             text-decoration: none;
             margin-right: 5px;
             font: bold 20px/50px Arial;
         }
         /*属性名， 属性名 = 属性值（正则）
         = 绝对等于
         *= 包含这个元素
         ^= 以这个开头
         $= 以这个结尾
         */
         
         /*存在id属性的元素 a[id]{} */
         /*a[id]{*/
         /*    */
         /*}*/
 ​
         /*id属性为one的元素 a[id=one]{} */
         /*a[id=one]{*/
         /*    */
         /*}*/
 ​
         /*class属性为last的元素 a[class="last"]{}*/
         /*a[class="last"]{*/
         /*    */
         /*}*/
 ​
         /*class属性中有HH的元素  a[class*=HH]{}*/
         /*a[class*=HH]{*/
         /*    */
         /*}*/
 ​
         /*选中href中以https开头的元素  a[href^=https]{}*/
         /*a[href^=https]{*/
         /*    */
         /*}*/
 ​
         /*选中href中以jpg结尾的元素  a[href$=jpg]{}*/
         a[href$=jpg]{
             background-color: darkgoldenrod;
         }
     </style>
 ​
 </head>
 <body>
 <p class="p">
     <a href="https://www.baidu.com/" class="first HH com " id="one">1</a>
     <a href="https://www.csdn.net/" class="first HH ">2</a>
     <a href="基本选择器.html">3</a>
     <a href="层次选择器.html"class="first com ">4</a>
     <a href="../../resources/video/G.E.M.%20邓紫棋-光年之外%20(《太空旅客》电影中国区主题曲)(蓝光).mp4">5</a>
     <a href="../../resources/image/奋斗的小孩.jpg">6</a>
     <a href="1.jpg">7</a>
     <a href="abc.pdf">8</a>
     <a href="ab.png" id="nine">9</a>
     <a href="abc.png" class="last">10</a>
 </p>
 </body>
 </html>

美化网页元素

为什么要美化网页？

  1. 有效的传递页面信息

  2. 美化网页，页面漂亮，才能吸引用户

  3. 凸显页面的主题

  4. 提高用户体验

字体样式

 

span标签：重点要突出的字，使用span套起来

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #study{
             font:50px bold ;
         }
     </style>
 </head>
 <body>
 我爱<span id="study">学习</span>
 </body>
 </html>

 

常用的字体样式：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <!--分开写：
     font-family ：字体
     font-size  :字体大小
     font-weight  :字体粗细
     color :字体颜色
 ​
     合一块写：font:oblique bolder 20px "华文隶书";
     -->
     <style>
         body{
             font-family: 楷体;
             color: #ef3525;
         }
         h2{
            font-size: 100px;
         }
         .p1{
             font-weight: bolder;
         }
         #p3{
             font: oblique bolder 20px "华文隶书";
         }
     </style>
 ​
 </head>
 <body>
     <h2>赵立坚为上海加油</h2>
     <p class="p1">没有一场疫情不会过去</p>
     <p>没有一场战争不会结束</p>
     <p id="p3">加油</p>
 </body>
 </html>

 

文本样式

  1. 颜色 color rgb rgba

  2. 文本对齐的方式 text-align

  3. 首行缩进 text-indent

  4. 行高 height line-height

  5. 装饰 text-decoration

  6. 文本图片水平对齐 两个参照物 vertucal-align

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
 <!--文本样式
     颜色：rgb()颜色：0~255   rgba()颜色+透明度：0~1
     文本对齐方式：text-align    center 水平居中
     首行缩进：text-indent     1em表示一个字的宽度
     height: 100px;      line-height: 100px;   行高和块高一样就可以上下居中
     text-decoration  装饰   underline下划线   line-through中划线   overline上划线
 ​
     图片与文本水平对齐  有2个参照物： a b
     #libai001,#libai002{
             vertical-align: middle;
         }
 -->
     <style>
         h2{
             color:rgba(0,255,255,0.9);
             text-align: center;
         }
         p{
             text-align: center;
         }
         #libai{
             text-indent: 3em;
         }
         .h3{
             background-color: blue;
             height: 100px;
             line-height: 100px;
         }
         #p02{
             text-decoration: underline;
         }
         #p03{
             text-decoration: line-through;
         }
         #p04{
             text-decoration: overline;
         }
         #libai001,#libai002{
             vertical-align: middle;
         }
     </style>
 </head>
 <body>
     <h2>静夜思</h2>
     <p id="libai">李白</p>
     <p id="p01">窗 前 明 月 光</p>
     <p id="p02">疑 是 地 上 霜</p>
     <p id="p03">举 头 望 明 月</p>
     <p id="p04">低 头 思 故 乡</p>
 ​
     <h3 class="h3">《静夜思》是唐代诗人李白的诗作。此诗描写了秋日夜晚，旅居在外的诗人于屋内抬头望月而思念家乡的感受。</h3>
 <p>
     <img src="../../resources/image/李白.png" alt="李白" height="290" width="201" id="libai001">
     <span id="libai002">李白</span>
 </p>
 </body>
 </html>

文本阴影和超链接伪类

文本阴影：text-shadow：颜色,x坐标,y坐标

超链接伪类：a:hover 鼠标按住未释放的状态

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         /*默认的状态*/
         a{
             text-decoration: none;
             color: blue;
         }
         /*鼠标悬浮上去的状态  (重点记住这个就好 hover)*/
         a:hover{
             color: aqua;
             font-size: 30px;
         }
         /*鼠标按住未释放的状态*/
         a:active{
             color: red;
         }
         /*阴影*/
         #L666{
             text-shadow: red 15px 15px;
         }
     </style>
 ​
 </head>
 <body>
     <p>
         <a href="">
             <img src="../../resources/image/奋斗的小孩.jpg" alt="努力拼搏" width="240" height="240">
         </a>
     </p>
 ​
     <p><a href="" >奋斗的小孩</a></p>
 ​
     <p><a href="">开心每一天</a></p>
 ​
     <p><a href="" id="L666">666</a></p>
 </body>
 </html>

列表样式

 ​
 #div01{
     background-color: #006272;
     width:266px ;
 }
 #title{
     font-size: 18px;
     font-weight: bold;
     text-indent: 1em;
     line-height: 35px;
     background-color: red;
 }
 ​
 /*list-style
 none:去掉原点
 circle：空心圆
 decimal:数字
 square:小正方形
 */
 li{
     list-style: none;
     height: 30px;
     text-indent: -1em;
 }
 a{
     text-decoration: none;
     color: black;
     font-size: 14px;
 }
 a:hover{
     color: blue;
 }
 ​

 

背景图片应用和渐变

背景图片：

 <style>
         div{
             width: 1280px;
             height: 640px;
             border: 1px solid red;
             background-image: url("../../resources/image/nb.jpg" );
             /*默认是全部平铺的*/
         }
         /*平铺一行*/
         #div1{
             background-repeat: repeat-x;
         }
         /*向下平铺一列*/
         #div2{
             background-repeat: repeat-y;
         }
         /*不平铺*/
         #div3{
             background-repeat: no-repeat;
         }
     </style>

渐变：

网站：https://www.grabient.com/

 background-color: #0093E9;
 background-image: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);

 

盒子模型

什么是盒子模型？

 

内外边距 边框

margin：外边距

padding：内边距

border：边框 （粗细 样式 颜色）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         /*body总有一些默认的属性值，外边距等  常见操作直接设置为0*/
         /*h1,ul,li,a,body{*/
         /*    margin: 0;*/
         /*    padding: 0;*/
         /*    text-decoration: none;*/
         /*}*/
 ​
         /*border: 粗细 样式 颜色;*/
         /*margin: 0 auto;  水平居中*/
         #box_01{
             width: 250px;
             border: 1px solid red;
             background: #0093E9;
             margin: 0 auto;
         }
         h2{
            background: #0093E9;
            font-size: 36px;
            margin: 0;
             padding:0 0 0 50px;
         ;
         }
         div:nth-of-type(1)>input{
             border: 2px solid greenyellow;
         }
         div:nth-of-type(2)>input{
             border: 2px dashed yellow;
         }
         div:nth-of-type(3)>input{
             border: 2px solid #0833ff;
         }
     </style>
 ​
 </head>
 <body>
 <div id="box_01">
 ​
         <h2>京东商城</h2>
 ​
         <form action="#">
             <div>
                 <span>用户名：</span>
                 <input type="text" name="username">
             </div>
             <div>
                 <span>密&nbsp;&nbsp;&nbsp;码：</span>
                 <input type="password" name="password">
             </div>
             <div>
                 <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
                 <input type="text" name="postbox">
             </div>
         </form>
 </div>
 </body>
 </html>

 

盒子的计算方式：你这个元素到底有多大？ margin+border+padding+内容宽高度

 

圆角边框

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
 /*border-radius
 成圆：等于圆的半径
 左上 右上 左下 右下   顺时针
 */
         div{
             width: 100px;
             height: 100px;
             border: 1px solid red;
             border-radius: 60px;
         }
 /*方形照片制成圆形照片
   只要border-radius 的数值大于它的半径就可
 */
         img{
             border-radius: 100px;
         }
     </style>
 ​
 </head>
 <body>
 ​
 <div></div>
 ​
 <img src="../../resources/image/nb.jpg" alt="nb">
 ​
 </body>
 </html>

 

盒子阴影

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         /*盒子阴影
         box-shadow   颜色 X坐标 Y坐标 阴影的范围
         */
         img{
             border-radius: 100px;
             box-shadow: yellow 10px 10px 100px;
         }
         /*居中*/
         div{
             text-align: center;
         }
     </style>
 ​
 </head>
 <body>
 <div>
     <img src="../../resources/image/nb.jpg" alt="nb">
 </div>
 ​
 ​
 </body>
 </html>

浮动

标准文档流

标准文档流就是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中的元素可以分为两大类：块级元素和行内元素。

块级元素： 块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素： 行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img等。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

 

display

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         /*
         block:块元素
         inline:行内元素
         inline-block:  是块元素 但是可以内联(在一行)
         none:不展示
         */
         div{
             width: 500px;
             height: 200px;
             border: 1px solid red;
             display: inline-block;
         }
         span{
             width: 500px;
             height: 200px;
             border: 1px solid red;
             display: inline-block;
         }
     </style>
 ​
 </head>
 <body>
 <div>
     <img src="../../resources/image/nb.jpg" alt="nb">
 </div>
 <span>nb的小孩</span>
 </body>
 </html>

这个也是实现块级元素排列的一种方式 但是我们在多数情况下还是使用float

float

左右浮动：float

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <link rel="stylesheet" href="css/style.css">
 ​
 </head>
 <body>
 <div id="Fu">
     <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div>
     <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div>
     <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div>
     <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div>
 </div>
 </body>
 </html>
 div{
     margin: 10px;
     padding: 5px;
 }
 #Fu{
     border: 1px solid red;
 }
 #Zi1{
     border: 1px dashed red;
     float: right;
 }
 #Zi2{
     border: 1px dashed blue;
     float: left;
 }
 #Zi3{
     border: 1px dashed black;
     float: left;
 }
 #Zi4{
     border: 1px dashed yellow;
     float: right;
 }

 

 

 

父级边框塌陷的问题

clear

 clear:right  右侧不允许有浮动元素
 clear:left  左侧不允许有浮动元素
 clear:both  两侧不允许有浮动元素
 clear:none

父级边框塌陷解决办法：

  1. 增加父级(div)元素的高度

     <div id="Fu">
         <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div>
         <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div>
         <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div>
         <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div>
     </div>
     ​
     #Fu{
         border: 1px solid red;
         height: 800px;
     }

  2. 增加一个空的div标签 清除浮动 

     <div id="Fu">
         <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div>
         <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div>
         <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div>
         <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div>
         <div id="clear"></div>
     </div>
     ​
     #clear{
         clear: both;
         margin: 0;
         padding: 0;
     }

  3. overflow

     overflow: scroll;  //滚动条 不建议使用 太丑
     用hidden
     在父级元素添加：
     #Fu{
         border: 1px solid red;
         overflow: hidden;
     }

  4. 添加父类的伪类选择器:after

     #Fu:after{
         content: "";
         display: block;
         clear: both;
     }

小结：

  1. 增加父级(div)元素的高度

    简单 但是假设元素有了固定的高度，就会被限制

  2. 增加一个空的div标签 清除浮动

    简单 但是在代码中应避免空div的编写

  3. overflow

    简单 下拉的一些场景避免使用 太丑

  4. 添加父类的伪类选择器:after

    写法稍微微复杂一些，但是没有副作用，推荐使用

 

定位

相对定位relative

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         div{
             margin: 10px;
             padding: 10px;
         }
         #Fu01{
             width: 300px;
             height: 200px;
             border: 1px solid yellow;
         }
         #one{
             border: 1px dashed green;
             position: relative;
             top: -20px;
             left: 20px;
         }
         #two{
             border: 1px solid red;
             position: relative;
         }
         #three{
             border: 1px solid black;
             bottom: 30px;
             right: 20px;
         }
     </style>
 ​
 </head>
 <body>
 <div id="Fu01">
     <div id="one">第一个盒子</div>
     <div id="two">第二个盒子</div>
     <div id="three">第三个盒子</div>
 </div>
 </body>
 </html>

相对定位：position:relative;

相对于原来的位置，进行指定的偏移。相对定位的话，它仍然在标准文档流中，原来的位置会被保留

 position: relative;   /*开启相对定位*/
 ​
 top: -20px;     /*距离顶部-20px*/
 bottom: 30px;   /*距离下部30px*/
 left: 20px;     /*距离左部20px*/
 right: 20px;    /*距离右部20px*/

 

方块定位练习：

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <link rel="stylesheet" href="css/style.css">
 ​
 </head>
 <body>
 <div id="all">
     <a id="l_t" href="相对定位.html">左上</a>
     <a id="r_t" href="相对定位.html">右上</a>
     <a id="center" href="相对定位.html">中</a>
     <a id="l_b" href="相对定位.html">左下</a>
     <a id="r_b" href="相对定位.html">右下</a>
 </div>
 </body>
 </html>
 #all{
     width: 300px;
     height: 300px;
     border: 1px solid red;
     padding: 10px;
 }
 a{
     display: block;
     width: 100px;
     height: 100px;
     background-color: pink;
     text-decoration: none;
     line-height: 100px;
     text-align: center;
     color: white;
 }
 a:hover{
     background-color: blue;
 }
 #r_t{
     position: relative;
     top: -100px;
     left: 200px;
 }
 #center{
     position: relative;
     top: -100px;
     left: 100px;
 }
 #l_b{
     position: relative;
     top: -100px;
 ​
 }
 #r_b{
     position: relative;
     top: -200px;
     left: 200px;
 }

 

绝对定位 absolute

定位：基于***定位，上下左右~

  1. 没有父级元素定位的前提下，相对于浏览器定位

  2. 假设父级元素存在定位，相对于父级元素定位，我们通常会相对于父级元素进行偏移

  3. 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不存在于标准文档流中，原来的位置不会被保留

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         div{
             margin: 10px;
             padding: 10px;
             position: absolute;
         }
         #Fu01{
             width: 300px;
             height: 200px;
             border: 1px solid yellow;
         }
         #one{
             border: 1px dashed green;
             position: absolute;
             left: 0px;
             top: 0px;
         }
         #two{
             border: 1px solid red;
         }
         #three{
             border: 1px solid black;
         }
     </style>
 ​
 </head>
 <body>
 <div id="Fu01">
     <div id="one">第一个盒子</div>
     <div id="two">第二个盒子</div>
     <div id="three">第三个盒子</div>
 </div>
 </body>
 </html>

固定定位

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         body{
             height: 3300px;
         }
         div{
             width: 100px;
             height: 100px;
             border: 1px solid yellow;
             background-color: yellow;
         }
         div:nth-of-type(1){  /*绝对定位  相对于浏览器*/
             position: absolute;
             right: 0px;
             bottom: 0px;
         }
         div:nth-of-type(2){   /*固定定位*/
             position: fixed;
             right: 0px;
             bottom: 0px;
         }
     </style>
 ​
 </head>
 <body>
 <div>div01</div>
 <div>div02</div>
 </body>
 </html>

 

z-index

 

图层~

z-index:默认是0，最高无限 追求最高级别用大数

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="css/style02.css">
 </head>
 <body>
 <div class="d001">
     <ul>
         <li>
             <img src="../../resources/image/李白.png" alt="lb">
         </li>
         <li class="li001">这是李白</li>
         <li class="li002"></li>
         <li>李白 唐代大诗人，有诗仙著称</li>
     </ul>
 </div>
 </body>
 </html>
 .d001{
     margin: 0px;
     padding: 0px;
     overflow: hidden;
     width: 800px;
     border: 1px solid red;
     font-size: 25px;
     line-height: 25px;
 }
 ul,li{
     margin: 0;
     padding: 0;
     list-style: none;
 }
 .d001 ul{
     position: relative;
 }
 .li001,.li002{
     position: absolute;
     width: 800px;
     height: 25px;
     top: 1100px;
 }
 .li002{
     background-color: black;
     opacity: 0.5;   /*透明度*/
 }
 .li001{
     color: white;
     z-index: 999;   /*图层级别  在.li002之上*/
 }
 ​

 

 

动画

css也可做出好看的动画

可去菜鸟教程上查看 不做为重点了解

可以去网上找一些动画 特别好看 下载可查看源码

 

经验

开发前端页面 不是非要自己写

  1. 可以直接拿别人的网页，右键另存为到桌面 直接进行修改

  2. 也可以直接去 源码世界等 这样的网站 直接去找需要的页面 拿上面的代码 在进行修改

源码世界： https://www.ym4j.com/

飞冰：https://ice.work/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2022-04-16 20:44  超、自律即自由  阅读(81)  评论(0)  编辑  收藏  举报