2021-06-03

2021-06-03 09:31:58 阅读：218 来源： 互联网

标签：03 06 color text decoration nav 2021 font nbsp

创建一个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>

效果图

标签：03,06,color,text,decoration,nav,2021,font,nbsp
来源： https://blog.csdn.net/weixin_49217619/article/details/117509830

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-06-03

创建一个html界面

CSS布局部分

效果图