CSS学习

最新推荐文章于 2025-06-06 17:58:26 发布

無言46

最新推荐文章于 2025-06-06 17:58:26 发布

阅读量147

点赞数

分类专栏：前端学习文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/zi2242975806/article/details/120464547

版权

前端学习专栏收录该内容

2 篇文章

订阅专栏

css学习

如何学习

1、什么是css

2、如何快速入门

3、css选择器（重点难点）

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

5、盒子模型

6、浮动

7、定位

8、网页动画（特效效果）

菜鸟教材可以学习

1、什么是css

1.1什么是css

Cascading Style Sheet: 层叠级联样式表

css : 表现（网页美化）

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

1.2 css的发展史

在这里插入图片描述

1.3 快速入门

编写格式：

在这里插入图片描述

编写形式

1、html内部直接编写

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

</body>
</html>

2、另外写一个css文件，与html文件相关联就好了

<link rel="stylesheet" href="css/style.css">

css的代码写在style.css文件中

css的优点：
- 内容和表现分离
- 网页结构表现统一、可以实现复用
- 样式十分丰富
- 建议使用独立的html的css文件
- 利用SEO、容易被搜索引擎收录

1.4 css的3种导入方式

行内样式

<h1 style="color:red">我是标题</h1>

行外样式

 <style>
        h1 {
            color: red;
        }
  </style>

外部样式

1、链接式

<link rel="stylesheet" href="css/style.css">

2、导入式

css2.1特有的

<style>
    @import url("css/style.css");
</style>

2、选择器

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

2.1、基本选择器

标签选择器
- 所有的标签都会一起修改，无法自由的控制

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1 {
            color: red;
        }
        p {
            color: black;
        }
    </style>
</head>

<body>
<h1>这是一个标签</h1>
<h1>这是标签</h1>
<p>这是一个标签</p>

</body>

类选择器 class

可以自由控制想要修改的， class可以复用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .daiziru {
      color: aqua;
    }
    .wuyan {
      color: bisque;
    }
  </style>
</head>
<body>
<h1 class="daiziru">标题1</h1>
<h1 class="wuyan">标题2</h1>
<h1 class="daiziru">标题3</h1>
<p class="daiziru">p标签</p>

</body>

id选择器：全局唯一：

#id名 {}
<style>
    #nihao {
        color : red;
    }
</style>
<h1 id="nihao">标题</h1>

优先级： id > class > 标签

2.2层次选择器

后代选择器

/* 后代选择器 */
    body p { /* body 后面的所有p标签全部变色*/
      background: aqua;
    }

子代选择器

/*子代选择器 -- 儿子 ，只是一代人*/
    body > p { /*body的儿子中的所有p标签*/
      background: blueviolet;
    }

相邻兄弟选择器，同辈，只有一个，向下的一个兄弟
```
.active + p {
  background : red;
}
```

通用选择器

.active ~ p { <!--向下的所有同级的p标签-->
  background : red;
}

代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*!* 后代选择器 *!*/
    /*body p { !* body 后面的所有p标签全部变色*!*/
    /*  background: aqua;*/
    /*}*/
    /*子代选择器 -- 儿子 ，只是一代人*/
    /*body > p { !*body的儿子中的所有p标签*!*/
    /*  background: blueviolet;*/
    /*}*/
  /*  相邻兄弟选择器*/
.active ~ p {
  background : red;
}
  </style>
</head>
<body>
 <p>p1</p>
 <p class="active">p2</p>
 <p>p3</p>
   <u>
     <li>
       <p>p4</p>
     </li>
     <li>
       <p>p5</p>
     </li>
     <li>
       <p>p6</p>
     </li>
   </u>
   <p>p7</p>
</body>

2.3结构伪类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
     /*ul的第一个子元素*/
     ul li:first-child {
       background: blueviolet;
     }
     /*ul的最后一个子元素*/
     ul li:last-child {
       background: red;
     }
     /*选中p1 : 定位到p1的父元素， 选择当前的第一个元素，并且是当前的元素（p元素）才生效*/
     p:nth-child(1) {
       background: chartreuse;
     }
     /*选中父元素下的p元素的第三个*/
     p:nth-of-type(3) {
         background: rgba(130, 98, 50, 0.58);
     }
  </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
   <ul>
     <li>li1</li>
     <li>li2</li>
     <li>li3</li>
   </ul>

</body>

在这里插入图片描述

2.4属性选择器（常用）

属性名 = 属性（正则） 
= 绝对等于
*= 包含等于
^= 以什么开头
$= 以什么结尾

存在id属性的元素 a[]{}

a[id] {}

id = first 的元素

a[id=first] {}

class 中有link 的元素

a[class*="link"]{}

选中 href中以http开头的元素

a[href^="http"] {}

选中以png结尾的

 a[href$=jpg] {}

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .demo a {
      float:left; /*向左浮动*/
      display: block;/* 变成块级元素*/
      height: 50px;
      width: 50px;
      border-radius: 10px; /*边框大小*/
      background: darkorange; /*背景颜色*/
      text-align: center; /*对齐方式*/
      color: black; /*文字颜色*/
      text-decoration: none; /*去掉下hua线*/
      margin-right: 5px; /*向右偏移*/
      font: bold 20px/50px Arial; /*字体粗体居中*/
    }

    /* 存在id属性的元素   a[]{} */
    /*a[id] {*/
    /*  background: blue;*/
    /*}*/
    /*id = first 的元素 */
    /*
    a[id=first] {
      background: blueviolet;
    }*/
    /*class 中有link 的元素   *=    */
   /* a[class*="link"] {
      background: chartreuse;
    }*/
    /* 选中 href中以http开头的元素 */
    a[href^="http"] {
      background: aliceblue;
    }
    /* 选中以什么结尾的 */
    a[href$=jpg] {
      background: crimson;
    }

  </style>
</head>
<body>

<p class="demo">

  <a href="http://www.baidu.com" class="link first" id="first">1</a>
  <a href="" class="link second" target="_blank" title="test">2</a>
  <a href="image/123.html" class="link item" >3</a>
  <a href="image/123.png" class="link item" >4</a>
  <a href="image/123.html" class="link item" >5</a>
  <a href="image/123.jpg" class="link item" >6</a>
  <a href="/a.pdf" class="link item" >7</a>
  <a href="/abc.pdf" class="link item" >8</a>
  <a href="image/abc.doc" class="item" >9</a>
  <a href="abcd.doc" class="link item" last>10</a>
</p>

</body>
</html>

3、美化网页

3.1 为什么美化网页

有效地传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

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

<style>
    #title1 {
        font-size: 50px;
    }
</style>
<span id="title1" >java</span>

3.2 字体样式

font-family :"楷书" 字体类型
font-size:  大小
color ： 颜色
font-weight: bolder 字体粗细

3.3文本样式

颜色 color rgb rgba
文本对齐方式 text-align : center
首行缩进 text-indent: 2em (em 是一个字的大小)
行高 line-height :
装饰 text-decoration : （下划线）
文本图片水平对齐： vertical-align : middle

行高和块的高度一样就可以上下对齐

height:300px
line-height_300px

上中下划线

text-decoration:overline
text-decoration:line-through
text-decoration:ounderline
text-decoration:none

图片文字对齐

<style>
    img,span {
        vertical-align: middle;
    }
</style>
<p>
    <img src="image/a.png" alt="">
    <span>ayhfeifhf</span>
</p>

3.4阴影cmd

/*text-shadow: 阴影颜色， 水平位移， 垂直偏移， 阴影半径*/
#price {
    text-shadow: #3cc7f5 10px -10px 2px;
}

3.5 超链接伪类

a:link {color:#FF0000} //未访问的链接
a:visited {color: #00FF00} //已经访问的链接
a:hover {color: #0000FF} //当鼠标悬停在上面的时候
a:active {color: #FF00FF} //已经选择的超链接

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: chartreuse;
        }
        #id1 {
            text-shadow: aqua 10px 10px 1px;
        }
    </style>
</head>
<body>
<a href="" >
    <img src="image/1.jpg" alt="">
</a>
<p>
    <a href="">男人</a>
</p>
<P>
    <a href="">所属者:陈俊华</a>
</P>
<p id="id1"> 属性:稀有物品</p>

</body>

3.6 列表

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">护肤化妆</a>&nbsp;&nbsp;<a href="#">日用生活</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠表</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">儿童零食</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a></li>
    </ul>
</div>
</body>
</html

要点说明：

<div> </div> ----表示一个盒子，可以调整大小

css文件

#nav {
    width: 300px;
    background: aqua;
}

.title {
    font-size: 30px;
    text-indent:1.5em;
    background: burlywood;
    font-weight: bold;
    line-height: 50px;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a {
    text-decoration: none;
    color: black;
    font-size: 15px;
}

a:hover {  /*悬浮显示*/
    color: orangered;
    text-decoration: underline;
}

要点解释

ist-style: none;   去掉原点
ist-style: circle  空心圆
ist-style: decimal 数字
ist-style: square  正方形

运行效果：

在这里插入图片描述

给旁边加上箭头，点击可以加载更多那种

 
 颜色          图片                图片位置    不铺满，也就是只用一张
background: burlywood url("../image/img.png") 253px 13px no-repeat;

三个地方加了图片

#nav {
    width: 300px;
    height: 354px;
    background-color: #4158D0;   //加了渐变色背景
    background-image: linear-gradient(84deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.title {
    font-size: 30px;
    text-indent:1.5em;
    background: burlywood url("../image/img.png") 253px 13px no-repeat;
    font-weight: bold;
    line-height: 50px;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url(../image/img_1.png);
    background-repeat: no-repeat;
    background-position: 218px 2px;
}

灰色的应该是箭头图片，不过我没有资源

在这里插入图片描述

3.7 背景

查看网页，调整自己喜欢的颜色，复制css代码，放入自己写的项目中就可以了

https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(84deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

background-repeat: repeat-x; 横向铺满一行
background-repeat: repeat-y; 纵向铺满一行
background-repeat: none-repeat; 不铺满，默认一张

4、盒子模型

4.1什么是盒子模型

在这里插入图片描述

margin: 外边框

border: 内边距

padding:边框

4.2边框

边框的粗细
边框的样式
边框的颜色

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的登录界面</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div id="div1">
            <span>用户名:</span>
            <input type="text">
        </div>
        <div id="div2">
            <span>密&nbsp;&nbsp;&nbsp;码:</span>
            <input type="text">
        </div>
        <div id="div3">
            <span>邮&nbsp;&nbsp;&nbsp;箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

css代码


#box {
    width: 236px;
    border: 1px solid #ff6f00
}

h2 {
    font-size: 16px;
    color: black;
    background-color: darkgoldenrod;
    margin: 0;
    line-height: 30px;
}

form {
    background: #00ccff;
}

div :nth-of-type(1) input {
     border:3px solid blueviolet;
}
div :nth-of-type(2) input {
    border:3px dashed rgba(255, 0, 119, 0.45);
}
div :nth-of-type(3) input {
    border:3px solid rgba(128, 0, 255, 0.44);
}

效果图

在这里插入图片描述

解析：

/*  border: 粗细  线条样式  颜色 */
border: 1px solid #ff6f00
/* solid 实线 ； dashed  虚线； */
 //border默认会有一个外边框的margin 
    /*常规操作*/
h1, ul, li, a, body {
    margin: 0;
    padding:0;
    text-decoration:none;
}

4.3内外边距

margin: 0 0 0 0 分别是上下左右
margin: 0 0 表示上下， 左右
//自动居中
margin: 0 auto; （外边距）
padding: 0 0 0 0也是一样  （内边距）

4.4圆角边框

	boeder-radius: 0 0 0 0 分别对应 左上，右上，右下，左下的四个角，顺时针位置

画了一个圆：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid red;
            border-radius: 100px;
        }
    </style>
</head>
<body>
  <div></div>

</body>

实现圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img {
      border-radius: 200px; //设置为图片大小的一半
    }
  </style>
</head>
<body>
<img src="image/img_1.png" alt="">

</body>

在这里插入图片描述

4.5阴影

box-shadow:10px 10px 100px yello;

图片居中

<div style="width:50px; display:block; text-align:center">
    <img src="image.jpg" alt="">
</div>

5、浮动

块级元素：独占一行

h1 - h6  p  div 列表。。。。

行内元素：不独占一行

span a  img  strong 。。。

行内元素可以被包含在块级元素中，反之不可以

5.1标准文档流

在这里插入图片描述

5.2 display

 <style>
      /* 
      block : 块元素
      inline: 行内元素
      inline-block: 是块元素，但是可以内联，在一行
       none： 消失
       */
      div {
          width: 100px;
          height: 100px;
          border: 1px solid red;
          display: inline-block;
      }
      span {
          width: 100px;
          height: 100px;
          border: 1px solid red;
          display: inline-block;
      }

  </style>

这是一种简单的排列方式，我们一般使用浮动float更多

5.3 float浮动

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
   <div id="father">
     <div class="one"><img src="image/d.jpg" alt=""></div>
     <div class="two"><img src="image/img.png" alt=""></div>
     <div class="third"><img src="image/right.jpg" alt=""></div>
     <div class="four">可得两个房间看了看感觉</div>
   </div>
</body>
</html>


div {
    margin: 10px;
    padding: 5px;
}
#father {
    border: 1px solid #000;
}

.one {
    border: 1px #ff6f00 dashed;
    display: inline-block;
    float: left;
}

.two {
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}
.third {
    border: 1px #ff6 dashed;
    display: inline-block;
    float: left;
}
.four{
    border: 1px #f06 dashed;
    display: inline-block;
    float: left;
    font-size: 13px;
    line-height: 23px;
}

在这里插入图片描述

5.4 父级边框塌陷的问题

在这里插入图片描述

clear:left 左侧不允许浮动
clear:right 右侧不允许浮动
clear:both 两侧都不允许浮动
clear:none

解决方案：

1、增加父级边框的高度

#father {
    border: 1px solid #000;
    height:500px ;
}

2、增加一个新的div标签在所有div标签后面，清楚浮动

<div class="clear"></div>

.clear {
    margin: 0;
    padding: 0;
    clear:both;
}

overflow

父级元素中增加一个    overflow:hidden
overflow:scroll --->滚动条
#father {
    border: 1px solid #000;
    overflow:hidden;
}

增加一个父级伪类 after(推荐使用)

和第二个方法原理一样，不过不需要增加空的div标签了

#father:after {
    content: ''; /*增加一个空的组件，空间 */
    display: block; /*设置为块，其实就是一个空的div */
    clear: both; /*这个虚拟块的周围不允许浮动 */
}

在这里插入图片描述

5.5 display 和float

display 方向不可以控制
float 浮动起来的话会脱离标准文档流，需要处理父级边框塌陷的问题

6.定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
  <style>
      body {
        padding: 10px;
      }
      div {
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
      }
      .father {
        border: 1px solid #000000;
      }
      .first {
        border: 1px solid #00ccff;
        background: #ff6f00;
        position: relative;
        top: -30px;
      }
      .second {
        border: 1px solid #00cc;
        background: #ff6f;
        position: relative;
        left: 50px;
      }
      .third {
        border: 1px solid #00cc09;
        background: #f065;
        position: relative;
        right: 50px;
      }

  </style>
</head>
<body>
   <div class="father">
     <div class="first">第一个盒子</div>
     <div class="second">第二个盒子</div>
     <div class="third">第三个盒子</div>

   </div>

</body>
</html>

原来：

在这里插入图片描述

加了相对定位之后：

在这里插入图片描述

相对定位： position:relative

相对原来的位置，进行指定的偏移，相对定位的话，她任然在标准文档流之中

注意：全都相对于一开始出现的位置，进行移动的

top: -20px  相对原来的位置-20px的距离--》向上移动了
left: 20px  向右移动
right:40px 向左移动
bottom: -10px  下移动

练习题

在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <link rel="stylesheet" href="CSS/style.css">

</head>
<body>
 <div id="box">
     <a class="a1">链接1</a>
     <a class="a2">链接2</a>
     <a class="a3">链接3</a>
     <a class="a4">链接4</a>
     <a class="a5">链接5</a>
 </div>

</body>
</html>

css代码

#box {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    padding: 10px;
}

a {
    background: deeppink;
    text-decoration: none;
    display: block;/*设置为块级元素*/
    height: 100px;
    width: 100px;
    line-height: 100px; /*设置和高度一样，可以上下居中*/
    text-align: center; /*文本左右居中*/
}
a:hover {
    background: #4158D0;
}
.a2, .a4 {
    position: relative;
    left: 200px;
    top: -100px;
}
.a5 {
    position: relative;
    right: -100px;
    top: -300px;
}

注意：移动的时候要参照这个第一次出现的位置

在这里插入图片描述

我们观察到，链接2这个元素需要移动到图二的位置，需要向上移动100px，再向右移动200px, 4要移动的步骤和2的是一样的， 5首先需要向上移动300px, 再向右移动100px.

6.2 绝对定位

position:absoulte

定位：基于xxx定位，上下左右

没有父级元素定位的情况下，相对于浏览器定位
假设存在父级元素定位，会相对于父级元素进行偏移

6.3固定定位

 position: fixed;

位置永远不会变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1) { /*绝对定位，相对于浏览器*/
      width: 100px;
      height: 100px;
      position: absolute;
      background: red;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2) {
      width: 50px;
      height: 50px;
      position: fixed;
      background: blueviolet;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

在这里插入图片描述

当移动浏览器的滚动条的时候，发现div1这个绝对定位的盒子动了，二固定定位的盒子并没有动

6.4 z-index

在这里插入图片描述

练习：做出下面的效果

分析：观察一下，我们想要箭头所指的内容，嵌入在图片里面，这个黑色的长条，是一个显示文本的位置，它和我们显示的字在同一个位置，我们可以使用图层，将文本的层次增大，文字就可以显示了

在这里插入图片描述

文字图层增加

.Text {
    color: white;
    z-index: 99; /*第99层，所以会浮在上面*/
}

背景设置透明度

.TextBj {
    background: black;
    opacity: 0.01;
}

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图层</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
  <div id="box">
     <ul>
       <li><img src="image/hendsome.jpg" alt=""></li>
       <li class="Text">戴子儒喜欢陈俊华</li>
       <li class="TextBj"></li>
       <li>相爱时间:2021-06-15</li>
       <li>感谢相遇，爱你</li>
     </ul>
  </div>

</body>
</html>

body {
    margin: 0px;
    padding: 0px;
}

#box {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    border: 2px #ff0000 solid;
    width: 460px;
    height: 415px;
    line-height: 20px;
    position: relative;
}

ul,li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.Text, .TextBj {
    width:460px ;
    height: 19px;
    display: block;
    position: absolute;
    top: 326px
}
.TextBj {
    background: black;
    opacity: 0.01;
}
.Text {
    color: white;
    /*z-index: 99; !**第99层，所以会浮在上面*/
}

2021 - 09 - 24
下面的效果==

[外链图片转存中…(img-2UO2tLlQ-1632494990692)]

文字图层增加

.Text {
    color: white;
    z-index: 99; /*第99层，所以会浮在上面*/
}

背景设置透明度

.TextBj {
    background: black;
    opacity: 0.01;
}

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图层</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
  <div id="box">
     <ul>
       <li><img src="image/hendsome.jpg" alt=""></li>
       <li class="Text">戴子儒喜欢陈俊华</li>
       <li class="TextBj"></li>
       <li>相爱时间:2021-06-15</li>
       <li>感谢相遇，爱你</li>
     </ul>
  </div>

</body>
</html>

body {
    margin: 0px;
    padding: 0px;
}

#box {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    border: 2px #ff0000 solid;
    width: 460px;
    height: 415px;
    line-height: 20px;
    position: relative;
}

ul,li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.Text, .TextBj {
    width:460px ;
    height: 19px;
    display: block;
    position: absolute;
    top: 326px
}
.TextBj {
    background: black;
    opacity: 0.01;
}
.Text {
    color: white;
    /*z-index: 99; !**第99层，所以会浮在上面*/
}

2021 - 09 - 24