网页美化之列表样式练习（商品分类栏，半成）

列表样式练习

.css代码

#nav{
    width : 300px;
}

.title{
    font : bold 18px "楷体";
    text-indent : 1em;
    line-height : 35px;
    background : yellow;
}
/*ul li*/
/*
list-style:
none    无样式
circle  空心圆
decimal 数字有序列表
square  实心正方形

*/
ul{
    background : pink;
}

ul li{
    height : 30px;
    list-style : none;          /*列表样式为空*/
}

a{
    text-decoration : none;
    font : lighter 14px "";
    color : black;
}

a:hover{
    color : orange;
    text-decoration : underline;
}

.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式练习</title>

    <link rel="stylesheet" href="css/background.css" type="text/css">

</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字产品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

生成页面效果

posted @ 2022-04-24 11:25  无关风月7707  阅读(194)  评论(0)  编辑  收藏  举报