前端笔记-day05

文章目录

- 01-结构伪类选择器
- 02-结构伪类选择器-公式用法
- 03-伪元素选择器
- 04-盒子模型-组成
- 05-盒子模型-边框线
- 06-盒子模型-单方向边框线
- 07-盒子模型-内边距
- 08-盒子模型-padding多值写法
- 09-盒子模型-尺寸计算
- 10-盒子模型-版心居中
- 11-清除默认样式
- 12-元素溢出overflow
- 13-外边距合并现象
- 14-外边距塌陷问题
- 15-行内元素的垂直内外边距
- 16-圆角的基本使用
- 17-圆角-特殊场景
- 18-扩展-盒子阴影
- 19-综合案例-产品卡片
- 20-综合案例-新浪新闻1

01-结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* li:first-child{
            background-color: blue;
        } */

        /* li:last-child{
            background-color: red;
        }
         */
         
         /* li:nth-child(3){
            background-color: purple;
         } */
    </style>
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
    </ul>
</body>
</html>

02-结构伪类选择器-公式用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* n从0开始 */
        li:nth-child(2n){
            background-color:  rebeccapurple;
        }
        li:nth-child(2n+1){
            background-color: blue;
        }
        li:nth-child(5n){
            background-color:  palegoldenrod;
        }
        /* 第五个往后的 */
        li:nth-child(n+5){
            background-color: aqua;
        }
        li:nth-child(-n+5){
            background-color: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

03-伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        /* 必须包含content 否则伪元素选择器不生效 */
        div::before{
            content: "老鼠";
            width: 100px;
            height: 100px;
            background-color: red;
            display: block;
        }
        div::after{
            content: "大米";
            width: 100px;
            height: 100px;
            background-color: purple;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>ai</div>
</body>
</html>

04-盒子模型-组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 盒子模型：内容区域+内边距+外框线+内边距 */
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            border: 1px solid #000;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

05-盒子模型-边框线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* border: 2px dashed red; */
            /* border: 3px dotted purple; */
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

06-盒子模型-单方向边框线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-top: 3px solid #000;
            border-right: 1px solid red;
            border-left: 3px solid purple;
            border-bottom: 1px solid orange;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

07-盒子模型-内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            
            background-color: pink;
            /* padding: 20px; */
            padding-top: 10px;
            padding-bottom: 40px;
            padding-right: 30px;
            padding-left: 15px;

            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

08-盒子模型-padding多值写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
            /* 四个值：上 右 下 左 */
            /* padding: 10px 20px 30px 40px; */

            /* 三个值：上  左右  下 */
            padding: 10px 20px 80px;

            /* 两个值：上下 左右 */
            padding: 10px 30px;



            /* 记忆方法：从上开始顺时针转 ，如果没有值看对面 */
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

09-盒子模型-尺寸计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 盒子尺寸=height*width+2*padding+2*border -->
    <style>
        div{
            width: 200px;
            height: 200px;

            /* 手动减法 */
            /* width: 160px; */
            /* height: 160px; */

            background-color: purple;
            padding: 20px;
            /* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

10-盒子模型-版心居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1000px;
            height: 200px;
            
            background-color: pink;
            /* margin不会撑大盒子 */
            /* margin: 50px; */
            /* margin-left: 50px; */
            /* margin: 50px 100px; */

            margin: 0 auto;
            /* 做版心居中的前提是盒子一定要有宽 */
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

11-清除默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            /* 去掉列表前面的小点点 */
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>ppp</p>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

12-元素溢出overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            overflow: hidden;

            /* overflow: scroll; */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div>
        dkfkmckckdcmd  kdkmckfmcccccccccccccccccccccccccccckffffffffffffla;jgittttttttttttttttttttttttttttttvmiajgittcnddddddacnnnnnnnnnnn
    </div>
</body>
</html>

13-外边距合并现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            height: 200px;
            width: 200px;
            background-color: pink;
            margin-bottom: 50px;
        }

        .two{
            height: 200px;
            width: 200px;
            background-color: red;
            margin-top: 50px;
        }
        /* 上下盒子的边距自动合并成最大值 */
    </style>
</head>
<body>
    <div class="one">number one</div>
    <div class="two">number two</div>
</body>
</html>

14-外边距塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 规避问题 */
            /* padding-top: 50px; */
            /* box-sizing: border-box; */

            /* 溢出隐藏 */
            /* overflow: hidden; */

            
            border-top: 1px solid #000;
            
        }

        .son{
            height: 100px;
            width: 100px;
            background-color: red;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

15-行内元素的垂直内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            margin: 20px;
            padding: 30px;
            line-height: 50px;
            /* 内外边距对垂直方向不起作用 */
        }
    </style>
</head>
<body>
    <span>jdjjc</span>
    <span>dkmkmks</span>
</body>
</html>

16-圆角的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            margin: 20px auto;
            background-color: pink;
            /* border-radius: 20px; */
            /* 圆角赋值的时候 从左上角顺时针取值，没有取值的角与对焦取值相同 */

            /* 四值：左上 右上  右下 左下 */
            /* border-radius: 10px 20px 30px 40px; */

            /* 三值：左上  右上=左下 右下 */
            /* border-radius: 10px 30px 80px; */

            /* 两值：左上+右下   右上+左下 */
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div>dk</div>
</body>
</html>

17-圆角-特殊场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            height: 200px;
            width: 200px;
            /* border-radius: 100px; */
            border-radius: 50%;
        }
        div{
            height: 100px;
            width: 200px;
            border-radius: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <img src="./20.jpg" alt="">
    <div></div>
</body>
</html>

18-扩展-盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 50px auto;
            width: 200px;
            height: 80px;
            background-color: red;
            /* X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 */
            box-shadow: 2px 5px 10px 1px rgba(0,0, 0, 0.5) inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

19-综合案例-产品卡片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{

            margin: 50px auto;
            padding-top: 40px;
            border-radius: 10px;

            
            width: 270px;
            height: 253px;
            text-align: center;
            background-color: #fff;
        }
        .product img{
            height: 100px;
            width: 100px;
        }
        .product h4{
            /* 盒子模型 */
            margin-top: 20px;
            margin-bottom: 12px;

            /* 文字样式 */
            font-size: 18px;
            color: #333;
            /* 圆角阴影 */
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./20.jpg" alt="">
        <h4>c d恨不得菲律宾sj c</h4>
        <p>dsk发你觉得你dncd</p>
    </div>
</body>
</html>

在这里插入图片描述

20-综合案例-新浪新闻1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这个案例是把内容上的小图标当成背景图片，然后在设置相应盒子的左内边框 -->
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            /* text-decoration: none; */
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .news{
            width: 360px;
            height: 200px;
            /* background-color: pink; */
            margin: 50px auto;
        }
        .news .hd{
            height: 34px;
            background-color: #eee;
            border:1px solid #dbdee1;
            border-left: none;
        }
        .news .hd a{
            margin-top: -1px;
            display: block;
            border-top: 3px solid #ff8400;
            border-right: 1px solid #dbdee1;
            width: 48px;
            height: 34px;
            background-color: #fff;
            
            text-align: center;
            line-height: 32px;
            color: #333;
            font-size: 14px;
        }
        .news .bd {
            padding: 5px;
        }
        .news .bd li{
            background-image: url(./min.png);
            background-repeat: no-repeat;
            background-position: 0 center;

            padding-left: 30px;
        }
        .news .bd li a{
            background: url(./1715311197067.png) no-repeat 0 center;
            padding-left: 60px;
            color: #666;
            font-size: 12px;
            line-height: 24px;
        }
        .news .bd li a:hover{
            color: #ff8400;
        }
    </style>
</head>
<body>
    <!-- 新闻区域：标题+内容 -->
    <div class="news">
        <div class="hd"><a href="#">新闻</a></div>
        <div class="bd">
            <ul>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>
                <li><a href="#">shj jb 上次从大家觉得从基督教的基督教的</a></li>


            </ul>
        </div>
    </div>
</body>
</html>