html综合案例-品优购导航栏

最新推荐文章于 2025-04-07 21:41:41 发布

吉米的编程日记

最新推荐文章于 2025-04-07 21:41:41 发布

阅读量381

点赞数 7

文章标签： css html

本文链接：https://blog.youkuaiyun.com/m0_62211222/article/details/136636782

版权

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>快报模块</title>
    <style>
        body{
            padding:0px;
            margin:0px;
        }

        .box {
            height: 163px;
            width: 248px;
            margin: 100px auto;/*这句代码就是为了盒子水平居中*/
            border: 1px solid #808080;
        }
            .box h3 {
                height: 32px;
                font-size: 14px;
                font-weight: 400; /*取消加粗*/
                line-height: 32px; /*垂直居中*/
                padding-left: 15px; /*距离左侧有一定距离*/
                border-bottom: 1px dotted #808080;
            }
           .box  ul li a{
               font-size:14px;
                color:gray;
                text-decoration:none;

            }
            li {
                list-style: none; /*去掉li之前的小圆点，就是那个项目符号*/

            }

           .box ul li{
               height:23px;
               line-height:23px;
               padding-left:1px;
            }


        .box ul li a:hover{
            text-decoration:underline;
        }

           .box ul{
               padding-top:5px;
           }
    </style>


</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">特惠爆款耳机五折起1</a> </li>
            <li><a href="#">特惠爆款耳机五折起2</a></li>
            <li><a href="#">特惠爆款耳机五折起1</a> </li>
            <li><a href="#">特惠爆款耳机五折起2</a></li>


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