8.15学习成果

jiangchubiu

已于 2023-08-15 23:57:47 修改

阅读量87

点赞数

文章标签：学习

于 2023-08-15 20:38:57 首次发布

本文链接：https://blog.csdn.net/jiangchubiu/article/details/132305171

版权

1. 学习内容

1.1 结构伪类选择器

选择器	作用	注意点
E:first-child{css}	匹配父元素E的第一个子元素
E:last-child{css}	匹配父元素E的最后一个子元素
E:nth-child(n / 2n){css}	匹配父元素E的第n个子元素	①n可以组成常见公式 ②n：0、1、2……
E:nth-last-child(n){css}	匹配父元素E的倒数第n个子元素	同上

1.2 伪元素

区别：
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
种类

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

作用：在创建网页中装饰性的小图时使用
注意点
- 必须设置content属性才能生效
- 伪元素默认是行内元素

1.3 浮动

作用：网页布局，使块级元素能在一行显示
- 行内块问题：当块转行内块时，标签换行书写会产生空格
清除浮动：
- 原因：子元素浮动后脱离标准流，不占位置
- 方法：
  - 额外标签——①在父元素内容给最后添加一个块级元素 ②给添加的块级元素设置clear：both
  - 单伪元素清除——①E::after{css}
  - 双伪元素清除——①E::before{css} ②E::after{css}
  - overflow——①overflow：hidden

2. 学习目标

2.1 目标

熟悉结构伪类选择器，掌握其基本用法
熟悉伪元素的种类及作用，掌握伪元素的构建方式
认识浮动的作用，掌握浮动的书写方式

2.2 demo

2.2.1 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        li:first-child{
            background-color: red;
        }
        li:last-child{
            background-color: orange;
        }
        li:nth-child(5){
            background-color: blue;
        }
        li:nth-last-child(5){
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <li>这是第1项</li>
        <li>这是第2项</li>
        <li>这是第3项</li>
        <li>这是第4项</li>
        <li>这是第5项</li>
        <li>这是第6项</li>
        <li>这是第7项</li>
        <li>这是第8项</li>
    </div>
</body>
</html>

结构伪类

2.2.2 伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        div::before{
            content: '这是一段';
            background-color: orange;
        }
        div::after{
            content: '伪元素';
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>文字内容</div>
</body>
</html>

伪元素

2.2.3 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .one{
            width: 300px;
            height: 300px;
            background-color: orange;
            float: left;
        }
        .two{
            width: 300px;
            height: 300px;
            background-color: silver;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">第一段文字</div>
    <div class="two">第二段文字</div>
</body>
</html>

3. 学习成果

3.1 源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0815</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid orange;
            border-radius: 15px;
        }
        div:first-child{
            float: left;
            padding: 20px;
        }
        div:last-child{
            float: left;
            padding: 20px;
            margin-left: 10px;
        }
        .newslist{
            list-style-type: none;
        }
        .newslist::after{
            content: '今日头条出品';
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div>
        <ol class="newslist">
            <h3>2023.08.14</h3>
            <li>第一条新闻</li>
            <li>第二条新闻</li>
            <li>第三条新闻</li>
        </ol>
    </div>
    <div>
        <ol class="newslist">
            <h3>2023.08.15</h3>
            <li>新闻一</li>
            <li>新闻二</li>
            <li>新闻三</li>
        </ol>
    </div>
</body>
</html>