35、京东导航条
文章目录
- 介绍
- 京东导航条
介绍
本文是在学习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：999top: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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！