练习：京东顶部导航图

最新推荐文章于 2024-12-25 19:19:50 发布

m0_51396253

最新推荐文章于 2024-12-25 19:19:50 发布

阅读量158

点赞数 1

文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/m0_51396253/article/details/120386628

版权

1 大概估算导航图分哪几个部分用div ul 框架分割开来，外面一个大容器 top-bar-wrappper

里面再放一个容器 top-bar放置需要布局的各种元素

2 top-bar分为左右两部分，左侧 location，放置 current-city 北京右侧使用ul，放置各种超链接选项，使用html写出网页的具体结构

3 使用css进行初步修饰，引入重置样式表，取消游览器默认样式，使用 line-height文字居中浮动进行布局（浮动时需要解决高度塌陷的问题），取消下划线，设置超链接点击颜色，大小，小图标和\的样式

4 使用display来隐藏和显示设置的下拉框，设置下拉框location city-list的样式，将点击的hover与location进行绑定（hover尽量与父元素进行绑定）.location:hover .current-city（在location中进行点击时，current-city会出现的样式），固定height的高度，如果任由line-height设置的内容撑开，current-city的大小会在鼠标的点击中反复变化

5 取消current-city与下拉框之间的边界，应用current-city向下进行覆盖，要求current-city脱离文档流后等级比下拉框高

具体代码如下所示

<!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>下拉框</title>
    <link rel="stylesheet" href="../fa/css/all.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
        body{
            font: 12px/1.5  Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
           
           
 }      
        
        .top-bar-wrapper{
            width: 100%;
            height: 30px;
            background-color: #e3e4e5;
            line-height: 30px;
            border-bottom: 1px #ddd solid;
        }
        .top-bar{
            width: 1190px;
            margin: 0 auto;
            position: relative;
            
        }
        a,span,i{
             text-decoration: none;
             color: #999;

        }
       
        
        a:hover,
        a.highlight{
            color: #f10215;
        }

        .location{
            float: left;
        }
        .location .fas{
            font-size: 14px;
            color: #f10215;
        }
        .location .city-list{
            display: none;
            width: 320px;
            height: 436px;
            border: 1px solid rgb(204, 204, 204);
            background-color:  white;
            position: absolute;
            top: 31px;
            box-shadow: 0 2px 2px rgba(0, 0,0, .2) ;
            z-index: 999;
        }
        .location:hover  .city-list{
            display: block;
        }
         .current-city{
            padding: 0 10px;
            border: 1px transparent solid;
            border-bottom: none;
           
            position: relative;
            z-index: 1000;
        }
        .location:hover  .current-city{
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
            padding-top: 2px;
        }
        
       
        .shortcut{
            float: right;
        }
        .shortcut li{
            float: left;
            list-style: none;
        }
        .shortcut .line{
            width: 1px;
            height: 10px;
            background-color: rgb(179, 179, 179);
            margin: 10px 12px;
        }
    </style>
</head>
<body>
    <div class="top-bar-wrapper">
        <div class="top-bar clearfix">

            <div class="location">
                <div class="current-city">
                    <i class="fas fa-map-marker-alt"></i>
                    
                    <a href="#">北京</a>
                </div>

                <div class="city-list">

                </div>
            </div>
            <ul class="shortcut clearfix">
                <li>
                    <a href="#">你好，请登录</a>
                    <a class="highlight" href="#">免费注册</a>
                </li>
                   
                <li class="line"></li>
                <li><a href="#">我的订单</a></li>
                <li class="line"></li>
                <li>
                    <a href="#">我的京东</a>
                <i class="fas fa-angle-down"></i>
                </li>
                <li class="line"></li>
                <li><a href="#">京东会员</a></li>
                 <li class="line"></li>

                 <li><a class="highlight" href="#">企业采购</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>