web端学习day02

一个胖小白

已于 2022-02-09 20:52:35 修改

阅读量150

点赞数

分类专栏：笔记文章标签：前端 css html

于 2022-02-09 15:41:43 首次发布

本文链接：https://blog.csdn.net/weixin_46002359/article/details/122836922

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

注意点：

在父类为 id选择器时，子类为class选择器，子类不能是id选择器，要不然在调试器颜色或者字体等时候就没有作用到子类
子类和父类的选择器不能同时为id选器或者是class选择器，父类只能是id选择器，子类可以为其他的，但是不能是id选择器。
标签：span标签是不换行的接着上一行接着展示
案例：
要求：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            display: inline-block;
        }
        
        p {
            color: brown;
        }
        
        a {
            font-size: 12px;
            /* 去掉下划线 */
            text-decoration: none;
            color: blue;
        }
    </style>
</head>

<body>
    <h3>热播</h3>
    <ul>
        <li>
            <img src="../img/img1.png" alt="图片加载失败">
            <h5>武神赵子龙</h5>
            <p>怒，林更新不抱网红抱女神</p>
            <a href="#">点击次数：242445次</a>
        </li>
        <li>
            <img src="../img/img2.png" alt="图片加载失败">
            <h4>旋风十一人</h4>
            <p>胡歌变教练在撩前女友</p>
            <a href="#">点击次数：242445次</a>
        </li>
        <li>
            <img src="../img/img3.png" alt="图片加载失败">
            <h5>太阳的后裔</h5>
            <p>宋慧乔吃嫩草</p>
            <a href="#">点击次数：242445次</a>
        </li>
        <li>
            <img src="../img/img4.png" alt="图片加载失败">
            <h5>山海经之赤影传说</h5>
            <p>娜扎张翰再度联手</p>
            <a href="#">点击次数：242445次</a>
        </li>
    </ul>
</body>

</html>

总结：
1.无序列表在没有变成块元素的时候，会有一个小标识符，在变成块元素后会消失使用：display: inline-block;变成块元素
2.超链接一般会有下划线，可以使用：text-decoration: none;去掉下划线，这种去法不好，一般使用 **list-style: none; **这样不会影响原来的模样
3.两个元素想要并排显示可以把两个元素变成块元素，这样就可以把两个元素并排显示

一个胖小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web端学习day02

注意点：在父类为 id选择器时，子类为class选择器，子类不能是id选择器，要不然在调试器颜色或者字体等时候就没有作用到子类子类和父类的选择器不能同时为id选器或者是class选择器，父类只能是id选择器，子类可以为其他的，但是不能是id选择器...
复制链接

扫一扫