2021-06-03

最新推荐文章于 2021-11-21 12:10:25 发布

小白小陌离

最新推荐文章于 2021-11-21 12:10:25 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/weixin_49217619/article/details/117509830

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

创建一个html界面

<!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>Document</title>
    
</head>
<body>
        <h3 class="x">家用电器</h3>
        <div class="nav">
        <a href="#" class="w"><h3 class="w">大家电</h3></a>
        <a href="#" class="c">平板电视</a>&nbsp<a href="#" class="c">洗衣机</a>&nbsp<a href="#" class="c">冰箱</a><br>
        <a href="#" class="c">空调</a>&nbsp<a href="#" class="c">烟机/灶具</a>&nbsp<a href="#" class="c">热水器</a><br>
        <a href="#" class="c">冷柜/酒柜</a>&nbsp<a href="#" class="c">消毒柜</a>&nbsp<a href="#" class="c">家庭影院</a><br>
        <a href="#" class="w"><h3 class="w">生活电器</h3></a>
        <a href="#" class="c">电风扇</a>&nbsp<a href="#" class="c">净化器</a>&nbsp<a href="#" class="c">吸尘器</a><br>
        <a href="#" class="c">净水设备</a>&nbsp<a href="#" class="c">挂烫机</a>&nbsp<a href="#" class="c">电话机</a><br>
        <a href="#" class="w"><h3 class="w">厨房电器</h3></a>
        <a href="#" class="c">榨汁机</a>&nbsp<a href="#" class="c">电压力锅</a>&nbsp<a href="#" class="c">电饭煲</a><br>
        <a href="#" class="c">豆浆机</a>&nbsp<a href="#" class="c">微波炉</a>&nbsp<a href="#" class="c">电磁炉</a><br>
        <a href="#" class="w"><h3 class="w">五金家装</h3></a>
        <a href="#" class="c">淋浴/水槽</a>&nbsp<a href="#" class="c">电动工具</a>&nbsp<a href="#" class="c">手动工具</a><br>
        <a href="#" class="c">仪器仪表</a>&nbsp<a href="#" class="c">浴霸/排气</a>&nbsp<a href="#" class="c">灯具</a><br>
        </div>
</body>
</html>

CSS布局部分

<style type="text/css">
        .x{
        background-color:#0f7cbf;
        font-weight:bold;
        font-size:18px;
        line-height: 35px;
        text-indent:1em;
        color: whitesmoke;
        text-decoration: none;
        }
        .nav .w{
        background: #e4f1fa;
        color: #0f7cbf;
        font-weight:bold;
        font-size:18px;
        line-height: 30px;
        text-indent:2em;
        text-decoration: none;
        }
        .nav .w:hover{
            text-decoration: underline;
        }
        .nav .c{
            color:#666;
            line-height: 20px;
            text-indent:1em;
            text-decoration: none;
        }
        .nav .c:hover
        {
            text-decoration: underline;
            color:#F60;
        }
    </style>

效果图

小白小陌离

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-03

创建一个html界面<!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"> &lt
复制链接

扫一扫