web前端——京东顶部导航条的练习

最新推荐文章于 2024-01-12 09:36:39 发布

Komorebi_9999

最新推荐文章于 2024-01-12 09:36:39 发布

阅读量470

点赞数 5

文章标签： html5 css3

本文链接：https://blog.csdn.net/JLY19970726/article/details/135334903

版权

<!DOCTYPE html>
<html  lang="en">
   <head>
       <!--utf-8即为unicode编码-->
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <!--
总之这一切基本都是为了适应手机端网页的浏览。
这里的width=device-width, initial-scale=1, maximum-scale=1定义了页面宽度为设别宽度，缩放比例为1也就是没有缩放，最大缩放值也是1倍。initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
完美的写法

       以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。-->
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <!--引入图标字体-->
       <link rel="stylesheet"  href="./css/all.css">
       <!--引入重置样式表-->
       <link rel="stylesheet"  href="./css/reset.css">
       <title>
        京东顶部导航条练习
       </title>
       <style>
        a,li,span{color:#999;
            text-decoration: none;}
        /*解决高度塌陷的问题*/
        .clearfix::before,
        .clearfix::after{
            content:'';
            display:table;
            clear:both;
        }
        /*设置鼠标上移的效果*/
        .top-bar a:hover,
        .top-bar a.highlight{
             color:#f10215;
        }
        /*设置分割线*/
        .shortcut .line{
            width:1px;
            height: 10px;
            /*这里是background-color,不是color，否则看不出效果来*/
            background-color: rgb(179,179,179);
            margin: 10px 12px;
        }
        body{
     /*设置字体*/   
     /*ont:12px/1.5，前面的12px是字体大小，后面的行高是字体的1.5倍，其实就是 18px*/   
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    
    color: #999;
        }
        /*设置外部容器的样式*/
        .top-bar-wrapper{
            /*设置宽度*/
            width: 100%;
            /*设置背景颜色*/
            background-color:#E3E4E5 ;
            height:30px;
            /*设置高度可以解决高度塌陷的问题，就是写死了*/
            line-height:30px;
            border-bottom:1px solid  #ddd;
        }
        /*设置内部容器的样式*/
        .top-bar{
            width:1190px;
            /*设置居中*/
            margin:0 auto;
        }
        /*设置location*/
        /*设置子元素浮动会脱离文档流。造成父元素造成高度塌陷*/
        .location{
            float:left;
        }
        /*设置shortcut*/
        .shortcut{
            float:right;
        }
        /*设置li*/
        .shortcut li{
            /*要是设置向右浮动，菜单的位置就颠倒了*/
            float:left;
        }
        
       /*设置Location下面的小图标*/
       .location .fas{
        
        color:#f10215
       }
       /*设置城市列表的效果*/
       /*如果写成.location.city-list就展示不出来，写成.city-list才可以看出来*/
       .city-list{
             display:none;
             width: 320px;
             height: 436px;
             background-color:white;
             border:1px solid rgb(204,204,204);
             /*浮出的块设置绝对定位，使其不占据页面的位置**/
             position: absolute;
             top:31px;
             z-index:999;
             /*设置阴影*/
             /*阴影的X轴，阴影的Y轴  阴影的模糊值大小  阴影的颜色*/
             box-shadow: 0 2px 2px rgba(0,0,0,.2);
       }
       /*设置current-city的鼠标移入效果*/
       .current-city:hover{
            background-color: white;
            border:1px solid rgb(204,204,204);
            border-bottom:none;
            padding-bottom: 1px;
       }
       .current-city{
        padding: 0 10px;
        position:relative;
        z-index: 1;
       }
       /*当鼠标移入北京的div时，让它下面的兄弟div显示出来的写法
       .current-city:hover+.city-list*/
    /*   .current-city:hover+.city-list{
           display:block;  
       }
       
       经试验发现这样子不行*/
       /*当鼠标移入到location时，让city-list显示，
       鼠标的悬停一定是给父元素的。*/
      .location:hover .city-list{
        display: block;
      }
        </style>
   </head>
   <body>
        <!--引入外围的容器-->
        <div class="top-bar-wrapper">
            <!--创建内部容器,整个中间的有字的部分-->
            <!--谁塌陷了就给谁加上clearfix-->
            <div class="top-bar clearfix">
                <!--左侧的菜单-->
                <div class="location">
                    <div class="current-city">
                        <i class="fas fa-map-marker-alt"></i>
                        <a href="javascript:;">北京</a>
                    </div>
                    <!--设置城市列表-->
                    <div class="city-list"></div>
                </div>
                <!--右侧的菜单-->
                <ul class="shortcut">
                    <li>
                        <a href="javascript:;">你好，请登录</a>
                        <a href="javascript:;" class="highlight">免费注册</a>
                    </li>
                    <!--分隔线-->
                    <li class="line"></li>
                    <li><a href="javascript:;">我的订单</a></li>
                    <li class="line"></li>
                    <li><a href="javascript:;">我的京东</a>
                        <!--一个向下的箭头-->
                         <i class="fas fa-angle-down"></i>
                    </li>
                    <li class="line"></li>
                    <li><a href="javascript:;">京东会员</a>
                        <!--表示一个向下的箭头-->
                        <i class="fas fa-angle-down"></i></li>
                    <li class="line"></li>
                    <li><a href="javascript:;"class="highlight">企业采购</a>
                        <i class="fas fa-angle-down"></i></li>
                    
                    <li  class="line"></li>
                    <li>
                        <span>客户服务</span>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li  class="line"></li>
                    <li>
                        <span>网站导航</span>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li  class="line"></li>
                    <li>
                        <span>手机京东</span>
                        <i class="fas fa-angle-down"></i>
                    </li>
       
                </ul>
            </div>
        </div>
   </body>
</html>