当前位置： 移动技术网 > IT编程>网页制作>HTML > 35、京东导航条

35、京东导航条

2020年07月22日  | 移动技术网IT编程  | 我要评论

文章目录

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

京东导航条

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
    引入重置样式表
    引入图标字体
</head>
<style>
body{
    font-size:12px;
}
clearfix::before,
clearfix::after{
    content:"",
    display:table;
    clear:both
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
    width:100%;
    background-color:#E3E4E5;
    height:30px;
    // 设置文字居中
    line-height:30px;
    border-bottom:1px #DDDDDD solid;
}
// 设置内部容器
.top-bar{
    width:1190px;
    margin：0 auto;
    position:relative;
}
// 设置字体样式
.top-bar a,.top-bar span ,.top-bar li{
    color:#999;
    text-decoration:none
}
.top-bar a:hover,
.top-bar a.hightlight{
    color:#f1025
}

/*设置location样式*/
.location{
    float:left
}

/* 设置current-city 边距 */
.currnt-city{
    padding:0 10px;
    border:1px solid transparent;
    border-bottom:none;
     position:relative;
     z-index:1
}
/* 设置current-city 移入的效果*/
.location:hover .current-city{
    background-color:white；
    border:1px solid rgba(20,204,204);
    border-bottom:none;
     // 让paddding 盖住下边
     padding-bottom:1px; 
}

/*设置城市列表的效果*/
.location .city-list{
    width:320px;
    height:436px;
    background-color:white;
    border:1px solid rgb(204,204,204);
    // 设置开始隐藏
    display:none;
    /* 设置绝对定位，使其不占据页面位置 */
    position:absolute;
    z-index：999
    
    top:31px;
    box-shadow:0 2px 10px rgba(0,0,0,.2)
}

/* 给location绑定hover*/
// 当鼠标一如到location 时，让city-list显示
.location:hover .city-list{
    display:block;
}

 
/*设置shortcut*/
.shortcut{
    float:right
}

/*设置分割的线*/
.shortcut.line{
    width:1px;;
    height:10px;
    margin:10px 12px;
}

.shortcut li{
    float:left
}

</style>
<biody>
// 创建外部容器
<div class="top-bar-wrapper">
    // 创建内部容器
    <div class="top-bar clearfix">
        // 左侧的菜单
        <div class="location">
          <div class="current-city">
             <a href="javascript:;">北京</a>
          </div>
          <div class="city-list">
          </div>
       </div>
        // 右侧的菜单
        <ul class="shortcut 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 class="fas fa-angle-down"></li>
            </li>
             <li class="line"></li>
             <li>
                <a href="javascript:;">京东会员</a>
             </li>
             <li class="line"></li>
             <li>
                <a class="hightlight" 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:;">网站导航</a>
              <i class="fas fa-angle-down"><i>
            </li>
           <li class="line"></li>
           <li>
              <span>手机京东</span>
            </li>
        </ul>
    </div>
</div>

</body>
</html>

本文地址：https://blog.csdn.net/MoonNight608/article/details/107468952

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网