CSS快速入门-CSDN博客

本文链接：https://blog.csdn.net/weixin_56121715/article/details/124392168

CSS（快速入门）

HTML + CSS + JavaScript

结构 + 表现 + 交互

如何学习：

CSS 是什么
CSS 怎么用
CSS 选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效）

1、什么是CSS

1.1 什么是CSS

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

CSS ：表现（美化网页）

1.2 发展史

CSS 1.0

CSS 2.0 DIV（块）+ CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO

CSS 2.1 浮动，定位

CSS 3.0 圆角，阴影，动画… 浏览器兼容性~

练习格式：

1.3 快速入门

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

<h1>我是标签</h1>
</body>
</html>

建议使用

css优势：

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

1.4 CSS 的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!--内部样式-->
<style>
    h1{
        color: green;
    }
</style>

<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">

<body>

<!--优先级：就近原则-->

<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

拓展：外部样式俩种写法

链接式

html

<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">

导入式

@import 是 CSS2.1 特有的

<!--导入式  CSS2.1 特有的-->
<style>
    @import url("./css/style.css");
</style>

2、选择器

2.1 三种基本选择器：

标签选择器：选择一类标签标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 标签选择器格式：  标签名{}
         特点：会将所有同属于这个标签名的标签的全部选中（一类标签）
    -->
    <style>
        h1{
            color: green;
        }
    </style>
</head>


<body>

<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    类选择器格式：  .class类名{}
        好处：可以多个标签归类，是同一个class，可以复用
-->
    <style>
        .bq{
            color: red;
        }
        .bq2{
            color: green;
        }
    </style>
</head>
<body>

<h1 class="bq">标签1</h1>
<h1 class="bq">标签2</h1>
<h1 class="bq2">标签3</h1>
<h1>标签4</h1>

</body>
</html>

id选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    id选择器：   必须保证全局唯一 ！
        格式： #id名{}
        优先级：
            不遵循就近原则，固定的
            id选择器 > class选择器 > 标签选择器
-->
    <style>
        #bq{
            color: yellow;
        }
        .style1{
            color: red;
        }
    </style>

</head>
<body>

<h1 class="style1" id="bq">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

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

2.2 层次选择器

后代选择器全部后代

/* 后代选择器 */
body p{
    background: green;
}

子选择器一代

/* 子选择器 */
body>p{
    background: #1a82c7;
}

相邻兄弟选择器：只有一个，相邻（向下）同辈的

/* 相邻兄弟选择器 只有一个，相邻（向下） */
.active + p{
    background: #77179d;
}

通用选择器：当前选中元素的向下所有兄弟同辈的

/* 通用兄弟选择器 当前选中元素的向下所有兄弟 */
.active ~ p{
    background: #00eee1;
}

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    层次选择器 -->

    <style>
        /* 后代选择器 */
        body p{
            background: green;
        }
        /* 子选择器 */
        body>p{
            background: #1a82c7;
        }
        /* 相邻兄弟选择器 只有一个，相邻（向下） */
        .active + p{
            background: #77179d;
        }
        /* 通用兄弟选择器 当前选中元素的向下所有兄弟 */
        .active ~ p{
            background: #00eee1;
        }
    </style>

</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
</body>
</html>

2.3 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    避免使用 class，id 选择器-->
    
<!--    结构伪类选择器-->
    <style>
        /* 选中li标签的第一个 */
        li:first-child{
            background: #ee0c00;
        }
        /* 选择li标签的最后一个 */
        li:last-child{
            background: #00ee17;
        }
        /* 选中p标签的第一个   选中父标签，然后定位到第一个元素，第一个元素必须是当前元素*/
        p:nth-child(1){
            background: #1d44ee;
        }
        /* 选中p标签的第二个   选中父标签，然后定位到类型为p的标签的第二个元素*/
        p:nth-of-type(2){
            background: #ee08ea;
        }
        /*a:hover{*/
        /*    background: black;*/
        /*}*/
    </style>
</head>
<body>
<!--<h1>h1</h1>-->
<!--<a href="">a</a>-->
<p>p1</p>
<p>p2</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>

</body>
</html>

运行结果：

2.4 属性选择器

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block; /*块级元素*/
            height: 50px;
            width: 50px;
            text-align: center;
            font: bold 20px/50px Arial;
            text-decoration: none;   /*下划线*/
            background: #00eee1;
            border-radius: 10px;
            margin-right: 7px;
        }

        /*存在id属性的元素  a[]{} */
        a[id]{
            background: yellow;
        }
        /*选中id为first的元素*/
        a[id=first]{
            background: #00ee17;
        }
        /*class中有links的元素*/
        a[class*="links"]{
            background: #1a82c7;
        }
        /*href以https开头的元素*/
        a[href^="https"]{
            background: #77179d;
        }
        /*href以pdf结尾的元素*/
        a[href$="pdf"]{
            background: #ee0c00;
        }

    </style>
</head>

<body>

<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://www.processon.com" class="links item active">2</a>
    <a href="" class="links item">3</a>
    <a href="" class="links item">4</a>
    <a href="/1.pdf" class="links item">5</a>
    <a href="/2.pdf" class="links item">6</a>
    <a href="" class="links item">7</a>
    <a href="" class="links item last" id="last">8</a>
</p>

</body>
</html>

属性选择器小结
	格式  标签[属性名=属性值]{}   属性值（正则）
	= 绝对等于
	*= 包含
	^= 以...开头
	$= 以...结尾

3、美化网页元素

3.1 为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        span{
            font-family: bold;
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎来到，<span>java世界</span>

</body>
</html>

3.2 字体样式

<!--
字体样式
font-family  字体样式
font-size  字体大小
font-weight  字体粗细
color  字体颜色
-->

<style>
body{
    font-family: Bahnschrift,楷体;
    color: burlywood;
}
h2{
    font-size: 20px;
}
p{
    font-weight: bolder;
}
</style>

3.3 文本样式

颜色 color rgb rgba
对齐方式 text-align
段落首行缩进 text-indent: 2em; （2个字）
行高 line-height 行高 = 高当行文字上下居中
装饰 text-decoration
文本图片水平对齐 vertical-align: middle;

<style>
        /*颜色：
             单词
             RGB  0~F
             RGBA  A：0~1
        */

        a{
            /*取消默认下划线*/
            text-decoration: none;
            background: #00ee17;
            display: block;
            height: 50px;
            width: 50px;
            /*行高 = 高 ，上下居中*/
            line-height: 50px;
            text-align: center;
        }
        .l1{
            /*下划线*/
            text-decoration: underline;
        }
        .l2{
            /*中划线*/
            text-decoration: line-through;
        }
        .l3{
            /*上划线*/
            text-decoration: overline;
        }
        p{
            /*首行缩进2em  2个字*/
            text-indent: 2em;
            color: rgba(255,0,157,0.8);
        }
        h2{
            text-align: center;
        }

        img,span:last-child{
            vertical-align: middle;
        }

3.4 阴影

水平偏移，垂直偏移是按照数轴的

/* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#author{
    text-shadow: #dc00ff 10px 0px 2px;
}

3.5 超链接伪类

正常情况下，只用到 a , a:hover

<style>
    a{
      text-decoration: none;
    }
    /*鼠标悬浮的状态*/
    a:hover{
        color: #dc00ff;
    }

    /*鼠标按住未释放的状态*/
    a:active{
        color: green;
    }
  </style>

3.6 列表

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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></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>&nbsp;&nbsp;
            <a href="">票务</a></li>
    </ul>
</div>

</body>
</html>

css代码

#nav{
    background: bisque;
    width: 300px;
}
.title{
    font-size: 18px;
    text-indent: 1em;
    line-height: 35px;
    font-weight: bold;
    display: block;
    /* 颜色，图片，图片位置，平铺方式 */
    background: red url("../images/三角形_下.png") 265px 7px no-repeat;
    background-size: 25px 25px;
}

/*
    ul li
        list-style:
            none:去掉圆点
            circle:空心圆
            decimal:数字
            square:正方形
*/
ul li{
    height: 40px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/哈密瓜.png");
    background-size: 25px,25px;
    background-repeat: no-repeat;
    background-position: 224.5px 0px;
}

a{
    font-size: 14px;
    text-decoration: none;
}
a:hover{
    color: #00ee17;
    text-decoration: underline;
}

运行结果：

3.7 背景

背景颜色

背景图片

<style>
        div{
            width: 1000px;
            height: 700px;
            border: solid red 1px;
            background-image: url("./images/OIP-C.jpg");
            /*默认是平铺的  repeat*/
        }
        .div1{
            background-repeat: no-repeat;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: repeat-x;
        }
    </style>

3.8 渐变

www.grabient.com

background-image: linear-gradient(62deg, #c200ff 0%, #00ee17 100%);

4、盒子模型

4.1 什么是盒子模型

margin：外边距

border：边框

padding：内边距

4.2 边框

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

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* border: 粗细 样式 颜色  */
        #box{
            width: 300px;
            border: 1px solid #00ff80;
        }
        input:hover{
            border:1px solid #dc00ff;
        }
        form{
            background: #1dd7dc;
        }
        #box div:nth-of-type(1) input{
            border:3px #ee0c00 dashed;
        }
        form div:nth-child(2) input{
            border: 3px yellow solid;
        }
    </style>

4.3 内外边距

margin 参数顺时针上右下左

padding

margin: 0 auto;
padding: 20px;

盒子的计算方式：

margin + border + padding + 内容宽度

4.4 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 50px auto;
            width: 50px;
            height: 50px;
            border: red solid 1px;
            background: red;
            border-radius: 50px;
        }
        .div1{
            margin: 50px auto;
            width: 100px;
            height: 50px;
            border: green solid 1px;
            background: green;
            border-radius: 50px 50px 0px 0px;
        }
        .div2{
            margin: 50px auto;
            width: 50px;
            height: 50px;
            border:yellow solid 1px;
            background: yellow;
            border-radius: 50px 0 0px 0px;
        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div class="div2"></div>
<div class="div1"></div>
<div></div>
<img src="./images/OIP-C.jpg" alt="图片">

</body>
</html>

运行结果：

4.5 盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* margin: 0 auto;
         居中要求：块元素  块元素有固定的宽度
          */
        img{
            display: block;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
        }
    </style>

</head>
<body>

<img src="./images/OIP-C.jpg" alt="">

</body>
</html>

运行结果：

推荐网站：

源码之家 - 提供最新免费网站源码下载！ (mycodes.net)

Element - 网站快速成型工具

飞冰-基于 React 的研发解决方案 | 飞冰 (ice.work)

5、浮动

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a strong em img …

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

标准文档流

文档标准流. 简单来说标准流就是浏**览器按照各种元素标签排版布局中默认的状态，**浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。. 也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。.

5.2 display

<style>
        /*
            block  块级元素
            inline  行内元素
            inline-block  拥有行内元素和块级元素的特性
			none
        */
        div{
            width: 100px;
            height: 100px;
            border: solid red 1px;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: solid green 1px;
            display: inline-block;
        }
    </style>

5.3 导航栏案例

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

<div class="warp">
    <!--头部-->
    <header class="nav-header">
        <div class="head-contain">
            <a href="" class="top-logo"><img src="./images/logo.jpg" alt="" width="145px" height="90px"></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特权</a></li>
                    <li><a href="">游戏特权</a></li>
                    <li><a href="">生活特权</a></li>
                    <li><a href="">会员活动</a></li>
                    <li><a href="">成长体系</a></li>
                    <li><a href="">年费专区</a></li>
                    <li><a href="">超级会员</a></li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登录</a>
                <a href="">开通超级会员</a>
            </div>
        </div>
    </header>
</div>

</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}
.nav-header{
    background: url("../images/navbar_bg.jpg");
    height: 90px;
    width: 100%;
}
.top-logo,.top-nav,.top-nav li, .top-right{
    height: 90px;
    vertical-align: top;
    display: inline-block;
}
.head-contain{
    width: 1180px;
    text-align: center;
    margin: 0 auto;
    height: 90px;
}
a{
    list-style: none;
    text-decoration: none;
}
.head-contain a:first-of-type img{
    margin-right: 50px;
}
.top-nav ul li a{
    line-height: 90px;
    margin-left: 20px;
    font-size: 17px;
    color: white;
}
.top-nav ul li a:hover{
    color: #1d44ee;
}
.top-right {
    line-height: 90px;
    margin-left: 50px;
    font-size: 18px;
}
.top-right a:first-of-type{
    display: inline-block;
    width: 93px;
    height: 35px;
    line-height: 35px;
    color: #f5d497;
    border: solid 1px #f1dc5b;
    border-radius: 45px;
}
.top-right a:first-of-type:hover{
    color: yellow;
}

.top-right a:last-of-type{
    display: inline-block;
    width: 150px;
    height: 40px;
    line-height: 40px;
    color: black;
    border: 1px solid #ceba01;
    background: #f6e42f;
    border-radius: 45px;
}
.top-right a:last-of-type:hover{
    background: yellow;
}

运行结果

5.4 float

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #father{
            border: 1px #000 dashed;
        }
        #father div{
            border: 1px #ee0c00 dashed;
        }
        #father div:first-child{
            width: 400px;
            float: left;
            display: inline-block;
            clear: both;
        }
        #father div:last-child{
            width: 500px;
            display: inline-block;
            float: left;
            /*由于缩放的时候会造成问题  clear: both 清除浮动 这样就会有了浮动的效果还不会造成问题*/
            clear: both;
        }
    </style>

5.5 父级边框塌陷的问题

clear

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

原样式

加上 float 之后

造成了父级边框塌陷

解决方法

增加父级元素的高度

<style>
    #father{
        border: 1px red solid;
        width: 120px;
        height: 100px;
    }
    img{
        float: left;
    }
</style>

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

<style>
    #father{
        border: 1px red solid;
        width: 120px;
    }
    img{
        float: left;
    }
    #father div{
        clear: both;
    }
</style>

overflow

在父级元素中增加一个  overflow:hidden;

父级添加一个伪类：after （推荐）

<style>
        #father{
            border: 1px red solid;
            width: 120px;
        }
        img{
            float: left;
        }
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
</style>

小结：

设置父元素的高度

简单，元素假设有了固定的高度，就会被限制
浮动元素后面加空div

简单，代码中尽量避免空div
overflow

简单，下拉的一些场景避免使用
父级添加伪类

写法稍微发杂一点，但是没有副作用，推荐使用！

5.6 对比

display

方向不可以控制
float

浮动起来的话脱离标准文档流，所以要解决父级边框塌陷问题

6、定位

6.1 相对定位

position: relative;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px red solid;
            margin: 0;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            background: pink;
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        a:nth-child(2),a:nth-child(4){
            right: -200px;
            top: -100px;
        }
        a:last-child{
            right: -100px;
            top: -300px;
        }
        a:hover{
            background: blue;
        }
    </style>
</head>
<body>

<div>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
</div>

</body>
</html>

运行结果

相对定位：position：relative；

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

top：

left：

right：

bottom：

6.2 绝对定位

定位：基于xxx的定位，上下左右 position: absolute;

如果没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素的偏移
在父级元素的范围内移动

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

6.3 固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height:1000px;
        }
        div:first-child{  /* 绝对定位，相对与浏览器 */
            width: 100px;
            height: 100px;
            position: absolute;
            background: #dc00ff;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /* 固定定位 fixed */
            width: 50px;
            height: 50px;
            background: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div></div>
<div></div>

</body>
</html>

运行结果：

6.4 z-index

图层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 0;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;
        }

        /* 父级元素相对定位*/
        div ul{
            position: relative;
        }
        ul li{
            list-style: none;
            padding: 0;
            margin: 0;
            background: #000;
            opacity: 0.5;  /* 背景透明度 */
            position: absolute;
            color: wheat;
            bottom: 10px;
            /* z-index: -1; */  /* 图层 */
        }
    </style>
</head>
<body>

<div>
    <ul>
        <img src="images/A19DD598.jpg" alt="" width="200px" height="200px">
        <li>加油加油</li>
        <li>努力学习</li>
    </ul>
</div>

</body>
</html>

运行结果：

div:nth-of-type(2){ /* 固定定位 fixed */
width: 50px;
height: 50px;
background: green;
position: fixed;
right: 0;
bottom: 0;
}

```

运行结果：

[外链图片转存中…(img-uWcYflvk-1650806230315)]

6.4 z-index

图层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 0;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;
        }

        /* 父级元素相对定位*/
        div ul{
            position: relative;
        }
        ul li{
            list-style: none;
            padding: 0;
            margin: 0;
            background: #000;
            opacity: 0.5;  /* 背景透明度 */
            position: absolute;
            color: wheat;
            bottom: 10px;
            /* z-index: -1; */  /* 图层 */
        }
    </style>
</head>
<body>

<div>
    <ul>
        <img src="images/A19DD598.jpg" alt="" width="200px" height="200px">
        <li>加油加油</li>
        <li>努力学习</li>
    </ul>
</div>

</body>
</html>