前端入门:CSS（全）

最新推荐文章于 2024-06-01 13:11:53 发布

小白皮卡丘

最新推荐文章于 2024-06-01 13:11:53 发布

阅读量1.2k

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_48449322/article/details/132411876

版权

CSS

1.基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范，<style>可以编写css的代码
    语法：
        选择器{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: blue;
        }
    </style>
    
</head>
<body>
<h1>我是标题</h1>
</body>

</html>

在这里插入图片描述

2.css的三种导入方式

优先级：就近原则：
- 行内样式
- 内部样式
- 外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<!--优先级：就近原则-->

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

<!--外部样式-->
h1{
    color: blue;
}

3.选择器

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

3.1 基本选择器

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上的所有的这个标签的元素*/
      h1{
        color: #3d9933;
        background: #1b4bc4;
        border-radius: 15px;
      }
      p{
          font-size: 50;
      }
    </style>
</head>
<body>
<h1>JAVA</h1>
<h1>JAVA</h1>
<p>标签选择器</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WZ45i00-1692607431397)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731152239757.png)]$

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式  .class的名称{}*/
        .a{color: #1b4bc4}
        .b{color: #3d9933}
    </style>
</head>
<body>
<h1 class="a">标签1</h1>
<h1 class="b">标签2</h1>
<h1 class="a">标签3</h1>
<p class="b">标签4</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uksHTUZq-1692607431398)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731153535120.png)]$

3.ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器  #id名称{}   不可重复使用，要保证全局唯一*/
        #a{color: #3d9933}
        #c{color: aqua}
        #b{color: rebeccapurple}
    </style>
</head>
<body>
<h1 id="a">标签1</h1>
<h1 id="b">标签2</h1>
<h1 id="c">标签3</h1>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nfm4U7sY-1692607431399)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731153756527.png)]$

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

3.2 层次选择器

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>
</html>

1.后代选择器

在某个元素的后面祖爷爷- -爷爷- -爸爸- -你

/*后代选择器*/
body p{					/*body后面的6个标签*/
    background: #1b4bc4;
}
ul p{					/*ul后面的3个标签*/
    background: #3d9933;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wpfzWxxF-1692607431400)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731160304699.png)]$

2.子选择器

一代，儿子

/*子选择器*/
body>p{ 			/*body后面的第一层的p，*/
    background: aqua;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5vUadqCk-1692607431401)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731161101115.png)]$

3.相邻兄弟选择器

相邻的同辈，下边的同类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*兄弟选择器*/
       .active + p{
           background: #1b4bc4;
       }
    </style>
</head>
<body>
    <p>p0</p>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9TeGzyQ-1692607431402)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731162000567.png)]$

4.通用选择器

对于下面所有的同辈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*通用选择器*/
       .active~p{
           background: #1b4bc4;
       }
    </style>
</head>
<body>
    <p>p0</p>
    <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>p3</p>
    <p>p3</p>
    <p>p3</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-scto9Z2h-1692607431403)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230731163000018.png)]$

3.3 结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: #3d9933;
    }
    /*ul的最后个子元素*/
    ul li:last-child{
      background: #1b4bc4;
    }
    /*选中p1，定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/
    p:nth-child(2){
      background: aqua;
    }
    /*选择父类第二个p元素进行修饰*/
    p:nth-of-type(2){
      background: antiquewhite;
    }
  </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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2yFOogGu-1692607431404)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230803185348267.png)]$

3.4属性选择器（常用）

<style>
    /*属性名，属性名 = 属性值（）
    方法：  a[属性/属性=值]{修饰}
    =是绝对等于
    *=是包含
    ^=是以什么为开头
    $=是以什么为结尾
    */
    a[id]{
        background: #3d9933;
    }
    a[id=a]{
        background:red;
    }
    a[class]{
        background:red;
    }
</style>

4.美化网页元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vef0pljI-1692607431405)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230803192222971.png)]$

4.1 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷体;
            font-size: 50px;
            font-weight: bolder;/*字体粗细*/
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>题目</h1>
    <p>字体样式</p>
    <p>字体大小</p>
    <p>文章格式</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOtRiDku-1692607431406)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230803193447166.png)]$

4.2 文本样式

颜色
文本对齐的方式
首行缩进
行高
装饰
文本图片水平对齐：vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       h1{
           color: #1b4bc4;
           text-align: center;/*排版居中*/
       }
       .p1{
           text-indent: 2em;/*首行缩进2格*/
       }
       .p3{
           background: aqua;
           height: 100px;
           line-height: 100px;/*行高*/
       }
       .l1{
           text-decoration: underline;/*下划线*/
       }
       .l2{
           text-decoration: line-through;/*中划线*/
       }
       .l3{
           text-decoration: overline;/*上划线*/
       }
       img,span{
           vertical-align: middle;/*文本图片水平对齐*/
       }
    </style>
</head>
<body>
    <h1>题目</h1>
    <p class="p1">字体样式</p>
    <p>字体大小</p>
    <p class="p3">文章格式</p>
    <p class="l1">1234563432</p>
    <p class="l2">1234563432</p>
    <p class="l3">1234563432</p>
    <p>
        <img src="pkq1.jpg" alt="">
        <span>皮卡丘</span>
    </p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xKLLp6qa-1692607431407)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230803200401099.png)]$

4.3 超链接伪类与阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*鼠标按住是的颜色*/
        a:active{
            color: green;
        }
        #years{
            /*阴影：颜色 X轴位置 Y轴位置 模糊的距离*/
            text-shadow: blue 10px 10px 1px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="pkq1.jpg" alt="">
</a>
<p>
    <a href="#">皮卡丘</a>
</p>
<p>
    <a href="">精灵</a>
</p>
<p id="years">1000岁</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AxVWliKP-1692607431408)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230803203737048.png)]$

4.4 列表样式练习

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11KUNpVP-1692607431409)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230807142541221.png)]$

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css",type="text/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></li>
    </ul>
</div>

</body>
</html>

CSS部分

#nav{
    width: 260px;
    background: darkgray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
ul{
    background: darkgray;
}
ul li{
    height: 30px;
    /*list-style: circle：去心圆*/
    /*list-style: none：无状态*/
    /*list-style: decimal：有序数字*/
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttAzwQUq-1692607431410)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230807144854414.png)]$

4.5 背景

在背景中添加图片

/*颜色 图片 图片位置 平铺*/
background: red url("../../背景/pkq1.jpg") 270px 10px no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 2px solid red;
            background-image: url("pkq1.jpg");
         /*默认全是平铺*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }


    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOgDvuIb-1692607431411)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230807145921650.png)]$

4.6 渐变

资源网站：Grabient

5. 盒子模型

5.1 盒子基本参数概念

margin：外边距（分为上下、左右）
border：边框
padding：内边距

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6T2YuMf4-1692607431412)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230807151741728.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box{
            width: 300px;
            /*border:粗细，样式，颜色*/
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            color: white;
        }
        form{
            background: #3d9933;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed yellow;
        }
        div:nth-of-type(3) input{
            border: 2px solid orange;
        }
        )
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4n0X75XR-1692607431413)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230807154202716.png)]$

5.2 盒子的边框

 /*border:粗细，样式，颜色*/
            border: 1px solid red;

5.3 外边距

margin：含4个参数（上左下右）

5.4 内边距

padding：同上

5.5 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*左上 右上 右下 左下 */
        div{
            width: 100px;
            height: 50px;
            margin: 30px;
            /*border: 10px solid red;*/
            background: red;
            border-radius: 50px 50px 0px 0px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eW6zh5zH-1692607431414)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230809211327472.png)]$

5.6 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 5px solid red;
            box-shadow: 10px 10px 20px yellow;
        }

    </style>
</head>
<body>

<div></div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-21BaMG6e-1692607431415)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230809214141257.png)]$

6. 浮动

6.1 标准文档流

块级元素：独占一行

h1~h6    p   div    列表。。。

行内元素：不独占一行

span a img strong

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

6.2 display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    block 块元素
    inline 行内元素
    inline-block 块元素里面包含行内元素，在一行！
    none 消失
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display:block;
        }
    </style>
</head>
<body>
<div>块元素</div>
<span>文字元素</span>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MZOOxRuV-1692607431416)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230809215909315.png)]$

6.3 float

float ：left
float：right
clear：right（右侧不允许有浮动）
clear：left（左侧不允许有浮动）
clear：both（两侧不允许有浮动）

6.4 父级边框塌陷问题

解决方案：

增加父级元素的高度

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

增加一个空的div标签

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

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

overflow

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

父类添加一个伪类：afert

#father:afert{
	content:'';
	display:block;
	clear:both;
}

6.5 对比

display

方向不可控制，排成一行，但不会边框塌陷

float

方向可控制，但会边框塌陷

7. 定位

7.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            border: 1px dashed #cb1c1c;
            background-color: aqua;
            position: relative;/*相对定位：上下左右*/
            top: -10px;
            left: 20px;
        }
        #second{
            border: 1px solid #6677a8;
            background-color: #3d9933;
        }
        #third{
            border: 1px solid #ccb312;
            background-color: blue;
            position: relative;
            bottom: -15px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>

</body>
</html>

相对于原来的额位置进行指定的偏移
position: relative;/相对定位：上下左右/
top: -10px;向上偏移
left: 20px;向左偏移
bottom: -15px;向下偏移
right: 20px;向右偏移

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XoiEFBaY-1692607431417)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230816110339204.png)]$

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ccb312;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: blue;
        }
        .a2,.a4{
            position:relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-15WtVake-1692607431418)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230817214131765.png)]$

7.2 绝对定位

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

position: absolute;

父级元素没有定位的前提下，该定位相对于浏览器定位
父级元素有定位，通常会相对于父级进行偏移，与相对偏移相似

7.3 固定定位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;
            background: red;
            position: absolute;/*绝对定位*?
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;/*固定不变*/
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2UpKNGD-1692607431419)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230817215948682.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XR6h3z70-1692607431420)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230817220003049.png)]$

7.4 Z-index及透明度

层级的概念：z-index随数字增大，图层等级增大
透明度：opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="pkq1.jpg" alt=""></li>
        <li class="tipText">皮卡丘</li>
        <li class="tipBG"></li>
        <li>时间</li>
        <li>地点</li>
    </ul>
</div>
</body>
</html>

body{
    padding: 0px;
    margin: 0px;
}
#content{
    width: 400px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBG{
    position: absolute;
    width: 410px;
    height: 25px;
    top: 257px;
}
.tipText{
    color: white;
    z-index: 100;
}
.tipBG{
    background: #000;
    opacity: 0.5;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zTtb5ZyG-1692607431421)(C:\Users\shinelon\AppData\Roaming\Typora\typora-user-images\image-20230821121557747.png)]$

小白皮卡丘

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端入门:CSS（全）

CSS1.基本入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!--规范，<style>可以编写css的代码语法：选择器{ 声明1; 声明2; 声明3;
复制链接

扫一扫