4.快报模块

最新推荐文章于 2024-07-25 14:15:14 发布

这一片月

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量233

点赞数 1

分类专栏： css样式文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_62865634/article/details/127608493

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：文章写完后，去掉无须列表的前面的小圆点。

1、语法：

div ul li{

list-style:"none";

去掉无序列表前面的圆点

}

.box ul li a:hover{

text-decortion:underline;

当我们鼠标经过的时候去掉a超链接的下划线

}

解释：

1、可以去掉无须列表前面的小圆点，

2、我们可以让鼠标经过，然后在设置去掉a超链接的下划线

注意: :hover鼠标经过有两种用法,例如：

.box ul li:hover a{

}

这个解释为当我们鼠标经过.boxl里面的ul经过ul让a超链接去掉下划线。

自己代码展示：

<!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>综合案例快报模块</title>
    <style>
        * {
            /* *这个是表示全选、这个是为什么嘞？
            因为：我们没有清除所以标签内边距和外边距的值话到时候设置出来时值不值得执行哪一个
            所以我们必须清除内边距和外边距为0 */
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 248px;
            /* 宽 */
            height: 163px;
            /* 高 */
            margin: 100px auto;
            /* 内边距、100表示上下内边距为100、auto表示左右不变（其实还有居中效果让） */
            border: 1px solid #ccc;
            /* 这个表示边距、1表示边框粗细、solid表示实体线、后面就是实体线颜色 */
        }
        
        .box h4 {
            height: 32px;
            /* 高 */
            font-size: 14px;
            /* 文字大小 */
            border-bottom: 1px dotted #ccc;
            /* 这个表示：边框、1表示边框粗细、dotted表示虚线、后面就是边框颜色 */
            font-weight: 400;
            /* 这个必须要单独设置文字的粗细、因为我们可以理解为他是一个独立的标签必须要单独设置它的属性 */
            line-height: 32px;
            /* 这个表示文字居中、注意：必须跟上面设置高一样，这样的文字才居中、相当于文字只占16像素其他分别为上边距和下边距 */
            padding: 0 10px;
            /* 表示内边距、左右为10像素 */
            /* text-indent: 1em; */
        }
        /* hr {
            color: red;
        }
         */
        
        .box ul li a {
            font-size: 12px;
            /* 字体大小 */
            color: #666;
            /* 字体颜色 */
            text-decoration: none;
            /* 这个表示去除a标签下划线 */
            padding: 0 20px;
            /* 表示内a标签左右内边距为20像素、这里一般上下像素不设置一般就为0 */
        }
        
        .box ul {
            padding-top: 10px;
            /* 这个表示内边距向下10像素、我们一般给父类就可以了 */
        }
        
        li {
            list-style: none;
            /* 这个是表示“list-style”去除样式圆点、对应值“nomo”默认没有圆点、主要用于列表 */
        }
    </style>
</head>

<body>
    <div class="box">
        <h4>品优购快报</h4>
        <!-- <hr> -->
        <ul>
            <li>
                <a href="#">[特惠] 爆款耳机5折秒！ </a>
            </li>
            <li>
                <a href="#">[特惠] 母亲节，健康好礼低至5折</a>
            </li>
            <li>
                <a href="#"> [特惠] 爆款耳机5折秒！</a>
            </li>
            <li>
                <a href="#">[特惠] 9.9元洗100张照片</a>
            </li>
            <li>
                <a href="#"> [特惠] 长虹智能空调立省1000</a>
            </li>
        </ul>
    </div>

</body>

</html>