HTML第6章简答题4(商品分类列表页面)

思卿不见

已于 2022-05-25 16:14:26 修改

阅读量6.7k

点赞数 7

分类专栏： html 文章标签： HTML

于 2019-07-22 11:50:10 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/96841872

版权

html 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作商品分类列表页面</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        div {
            border-radius: 10px;
            border: 2px orange solid;
            width: 240px;
            margin: 9px;
        }

        ul {
            margin: 7px 4px 2px 4px;
            padding: 0px;
        }

        li {
            list-style: none;
            padding-left: 54px;
            line-height: 48px;
            border-bottom: dashed 1px darkgrey;
        }

        li:nth-child(1) {
            background: url("../img/icon_01.jpg") no-repeat;
        }

        li:nth-child(2) {
            background: url("../img/icon_02.jpg") no-repeat;
        }

        li:nth-child(3) {
            background: url("../img/icon_03.jpg") no-repeat;
        }

        li:nth-child(4) {
            background: url("../img/icon_04.jpg") no-repeat;
        }

        li:nth-child(5) {
            background: url("../img/icon_05.jpg") no-repeat;
        }

        li:nth-child(6) {
            background: url("../img/icon_06.jpg") no-repeat;
        }

        li:nth-child(7) {
            background: url("../img/icon_07.jpg") no-repeat;
        }

        li:nth-child(8) {
            background: url("../img/icon_08.jpg") no-repeat;
        }

        li:nth-child(9) {
            background: url("../img/icon_09.jpg") no-repeat;
        }

        li:nth-child(10) {
            background: url("../img/icon_10.jpg") no-repeat;
            border: none;
        }
        a{
            color: black;
            font-weight: bold;
        }
        a:hover{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href=""> 酒水、饮料</a></li>
        <li><a href="">进口食品</a></li>
        <li><a href="">休闲零食</a></li>
        <li><a href="">地方特产</a></li>
        <li><a href="">保健、冲调</a></li>
        <li><a href="">粮油、生鲜</a></li>
        <li><a href="">美容洗护</a></li>
        <li><a href="">清洁洗涤</a></li>
        <li><a href="">母婴、纸品</a></li>
        <li><a href="">家居百货</a></li>
    </ul>
</div>
</body>
</html>

效果图如下：
在这里插入图片描述
鼠标移入文字后的效果图：