Java教程

2021-06-03

本文主要是介绍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">
    <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>

效果图

这篇关于2021-06-03的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航