导航栏练习

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习html有一段时间了，找了京东购物导航页面进行练习，将之前学的内容复习一次

完成效果图

• 从一个整体布局开始

导航栏分为三个部分，一个是外围区域，中间区域还有就是中间内容区域

        以下是body方面的代码，整体的布局：

body>
    <!--外围的容器 -->
    <div class="top-bar-wrapper">
        <!--内部容器-->
        <div class="top-middle clearfix">
            <!--左侧导航栏-->
            <div class="location">
                <div class="city ">
                    <i class="fas fa-map-marker-alt"></i>
                    <a href="javascript:;">北京</a>
                </div>
                <!--设置城市的下拉框-->
                <div class="city-list">

                </div>
            </div>

            <!--右侧导航栏-->
            <ul class="rightmunue clearfix">
                <li>
                    <a href="javascript:;">你好，请登录</a>
                    <a class="highlight" href="javascript:;">免费注册</a>
                </li>
                <!--分割线，共有七条-->
                <li class="line"></li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li class="line"></li>
                <li><a href="javascript:;">我的京东</a>

                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">京东会员</a>
                </li>
                <li class="line"></li>
                <li>
                    <a class="highlight" href="javascript:;">企业采购</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">客户服务</a>

                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">网站导航</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">手机京东</a>
                </li>
            </ul>

        </div>

    </div>
</body>

• 接下来是样式的实现

 <style>
        .clearfix::before .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        body {
            font-size: 14px;
            /*设置字体颜色，但是不建议对body设置，因为会对整个页面生效*/
            color: rgb(169, 3, 3)
        }

        /*外部边框的样式*/
        .top-bar-wrapper {
            width: 100%;
            background-color: #ddd;
            /*height: 30px;此处可以省略高度，因为设置了line-height，再设置li'横向排列后完成效果*/
            /*设置行高*/
            height: 30px;
            line-height: 31px;
            /*设置底部边框*/
            border-bottom: 1px #999 solid;
        }

        /*设置内部容器的样式*/
        .top-middle {
            /*开一个相对定位*/
            display: absolute;
            width: 1190px;
            /*内部容器居中*/
            margin: 0 auto;
        }

        /*设置top-middle的位置*/
        .location {
            float: left;
        }

        .city {
            padding: 0 10px;
            /*颜色变为透明使得边框消失*/
            border: 1px solid transparent;
            border-bottom: none;
            position: relative;
            /*层级第一覆盖city-list和city的连接处*/
            z-index: 1;
        }

        .location .city-list {
            display: none;
            width: 320px;
            height: 436px;
            background-color: #ffffff;
            border: 1px solid #e9e7e7;
            /*设置绝对定位，使不占父元素的空间*/
            position: absolute;
            box-shadow: 0 0 5px #999;
            top: 31px;
        }

        .rightmunue {
            float: right;
        }

        .rightmunue li {
            float: left;
        }

        /*设置字体颜色样式*/
        .top-middle a,
        .top-middle span,
        .top-middle i {
            color: #999;
            text-decoration: none;
        }

        .top-middle a:hover,
        .top-middle a.highlight {
            color: #f10125;
        }

        /*设置分割线,margin下边距为0不会撑高整个高度*/
        .rightmunue .line {
            width: 1px;
            height: 10px;
            background-color: #999;
            margin: 12px 12px 0;
        }

        /*将hover绑定给city和city-list是行不通的，因为当鼠标移开“北京”后，city-list的内容不会再显示出来
   .location .city:hover + .city-list{
            display: block;
        }*/
        /*当鼠标移入location时，让city-list显示*/
        .location:hover .city-list {
            display: block;
        }

        /*hover应该给的是location，因为鼠标一旦移出“北京”，“北京”就会恢复成原来的样子*/
        .location:hover .city {
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-bottom: none;
            padding-bottom: 1px;

        }
    </style>

• 实现了下拉效果

 

• 问题方面

很可惜的是，在引入图标文字方面还不是很熟练，知道怎么写代码却不知道怎么用，下载的fontawesome到文件里面也不是很会用，就连vsc默认的图标文字也导不进去，后面会熟悉如何把它插进去。最后就是，希望自己加油加油学习！！！