HTML网页设计：导航栏

一、下拉导航栏<body><div class="nav"><ul class="ul_one"><li class="li_one"><a href="#">首页</a><ul class="ul_two"><li><a href="#"

少可爱

6324人浏览 · 2021-07-22 20:08:16

少可爱 · 2021-07-22 20:08:16 发布

一、下拉导航栏

<body>
    <div class="nav">
        <ul class="ul_one">
            <li class="li_one">
                <a href="#">首页</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li class="li_one">
                <a href="#">我的订单</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li class="li_one">
                <a href="#">购物车</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li class="li_one">
                <a href="#">账单</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li class="li_one">
                <a href="#">商品详情</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li class="li_one li_one_right">
                <a href="#">浏览记录</a>
                <ul class="ul_two">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

       *{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            width: 100%;
            height: 60px;
            background-color: black;
        }
        .ul_one{
            background-color: crimson;
            /* width: 80%; */
            width: 1200px;
            height: 60px;
            margin: 0 auto;
        }
        .ul_two{
            display: none;
        }
        .li_one:hover .ul_two{
            display: block;
            background-color: cadetblue;
        }
        .li_one{
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            float: left;
            background-color: cadetblue;
            /* border-right: 1px solid white; */
        }
        .li_one:hover{
            background-color: bisque;
        }
        .li_one_right{
            border-right: none;
        }
        .ul_two li:hover{
            background-color: bisque;
        }
        li{
            list-style: none;
        }
        a{
            display: block;
            text-decoration: none;
        }

二、侧拉导航栏

<body>
    <div class="nav">
        <div class="one_div">
            <span class="one_span">手机类型</span>
            <div class="two_div">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
            </div>
        </div>
        <div class="one_div">
            <span class="one_span">手机类型</span>
            <div class="two_div">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
            </div>
        </div>
        <div class="one_div">
            <span class="one_span">手机类型</span>
            <div class="two_div">
                <span>12</span>
                <span>23</span>
                <span>33</span>
                <span>45</span>
                <span>53</span>
                <span>65</span>
            </div>
        </div>
        <div class="one_div">
            <span class="one_span">手机类型</span>
            <div class="two_div">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>67</span>
            </div>
        </div>
        <div class="one_div">
            <span class="one_span">手机类型</span>
            <div class="two_div">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>61</span>
            </div>

        </div>
    </div>
</body>

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            width: 300px;
            height: 500px;
            /* background-color: blanchedalmond; */
        }
        .one_div{

        }
        .one_span{
            width: 200px;
            /* 设置float:left后span才可以设置宽高，宽度与nav宽度相同，才可以独占一行 */
            height: 100px;
            line-height: 100px;
            text-align: center;
            float: left;
            background-color: aquamarine;
        }
        .two_div{
            width: 500px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 0px;
            display: none;
            background-color: yellowgreen;
        }
        .two_div span{
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: yellow;
        }
        .one_div:hover .two_div{
            display: block;
        }
    </style>