HTML 家用电器分类

Java捡子

已于 2022-12-01 22:07:15 修改

阅读量1.6k

点赞数 5

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

于 2021-08-04 20:26:20 首次发布

本文链接：https://blog.csdn.net/weixin_46685039/article/details/119392362

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#box {
    width: 300px;
}
li {
    list-style: none;
}
#title {
    text-indent: 1em;
    color: #FFF;
    background: linear-gradient(to bottom, #0467ac, #63a7d6, #b6dbf5);
}
.a {
    text-indent: 2em;
    background: linear-gradient(to bottom, #e4f1fa, #bddff7, #e4f1fa);
}
p {
    text-indent: 1em;
}
p a {
    color: #666666;
    text-decoration: none;
}
p a:hover {
    color: #F60;
    text-decoration: underline;
}

.a a {
    color: #0565c6;
    text-decoration: none;
}
.a a:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器分类</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="box">
    <h2 id="title">家用电器</h2>
    <ul>
        <li>
            <h3 class="a"><a href="#">大家电</a></h3>

            <p><a href="#">平板电视</a>&nbsp;&nbsp;<a href="#">洗衣机</a>&nbsp;&nbsp;<a href="#">冰箱</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">空调</a>&nbsp;&nbsp;<a href="#">烟机/灶具</a>&nbsp;&nbsp;<a
                        href="#">热水器</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">冷柜/酒柜</a>&nbsp;&nbsp;<a href="#">消毒柜</a>&nbsp;&nbsp;<a href="#">家庭影院</a>
            </p>
        </li>
        <li>
            <h3 class="a"><a href="#">生活电器</a></h3>

            <p><a href="#">电风扇</a>&nbsp;&nbsp;<a href="#">净化器</a>&nbsp;&nbsp;<a href="#">吸尘器</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">净水设备</a>&nbsp;&nbsp;<a href="#">挂烫机</a>&nbsp;&nbsp;<a
                        href="#">电话机</a>
            </p>

        </li>
        <li>
            <h3 class="a"><a href="#">厨房电器</a></h3>

            <p><a href="#">榨汁机</a>&nbsp;&nbsp;<a href="#">电压力锅</a>&nbsp;&nbsp;<a href="#">电饭煲</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">豆浆机</a>&nbsp;&nbsp;<a href="#">微波炉</a>&nbsp;&nbsp;<a
                        href="#">电磁炉</a>
            </p>

        </li>
        <li><h3 class="a"><a href="#">五金家装</a></h3>

            <p><a href="#">淋浴/水槽</a>&nbsp;&nbsp;<a href="#">电动工具</a>&nbsp;&nbsp;<a href="#">手动工具</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">仪器仪表</a>&nbsp;&nbsp;<a href="#">浴霸/排气</a>&nbsp;&nbsp;<a
                        href="#">灯具</a>
            </p>
        </li>
    </ul>
</div>
</body>
</html>