前端联系-京东顶部导航条-05
<!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>Document</title> <!-- 引入重置样式表 --> <link rel="stylesheet" href="./css/reset.css" /> <!-- 引入图标字体库 --> <link rel="stylesheet" href="./fa/css/all.css" /> <link rel="stylesheet" href="./iconfont/iconfont.css" /> <style> .clearfix::before, .clearfix::after { content: ''; display: table; } body { font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, '\5B8B\4F53', sans-serif; color: #999; } .top-bar-wraaper { width: 100%; background-color: #e3e4e5; height: 30px; line-height: 30px; border: 1px #ddd solid; } .top-bar-wraaper a:hover { color: #e33333; } .top-bar { width: 1190px; height: 30px; /* background-color: aquamarine; */ margin: 0 auto; position: relative; } .top-bar a, .top-bar span, .top-bar i { color: #999; text-decoration: none; } .current-city { border-bottom: none; padding: 0px 5px; padding-bottom: 1px; border: 1px solid transparent; text-align: center; position: relative; z-index: 999; } .location:hover .current-city { background-color: white; text-align: center; border: 1px solid rgb(204, 204, 204); border-bottom: none; } /* 当鼠标移入到location时让city-list显示并且可以移入到city-list内 */ .location:hover .city-list { display: block; } /* 左城市位置图标 */ .location .fas { /* font-size: 14px; */ color: #e33333; } .location { width: 57px; height: 30px; /* background-color: red; */ float: left; } /* 设置城市列表 */ .location .city-list { display: none; width: 320px; height: 436px; background-color: white; border: 1px solid rgb(204, 204, 204); /* border-top: none; */ /* 设置绝对定位,使其不占据页面位置 */ position: absolute; /* 设置阴影 */ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); top: 30px; z-index: 99; } .city-list .choose-city { width: 100%; height: 220px; /* margin: 10px 18px; */ /* background-color: #bfa; */ } .choose-city li { float: left; margin: 10px 8px; } .choose-city a { display: block; padding: 0 10px; } .city:hover { background-color: rgb(245, 245, 245); } .special-region { position: absolute; height: 120px; margin: 20px 18px; /* background-color: aqua; */ } /* 用display使span变成块元素独占一行避免下面li浮动后跑到span同一行 */ .special-region span { display: block; } .special-region li { float: left; padding-right: 70px; padding-top: 10px; } .shortcut { position: relative; margin-right: 150px; float: right; } /* .shortcut li { margin: 0 17px; } */ .shortcut .line { width: 1px; height: 10px; border-right: 1px solid #999; margin: 10px 5px 0; } .shortcut .highlight { color: #e33333; } .shortcut .highlight1 { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shortcut li { margin: 0 8px; float: left; } .dd { width: 56px; height: 30px; /* position: relative; */ text-align: center; z-index: 999; } .dropdown { position: absolute; z-index: 90; border: 1px solid rgb(204, 204, 204); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); } .myjd { display: none; width: 222px; height: 200px; /* background-color: aqua; */ position: absolute; top:29px; z-index: 90; } .dd:hover .myjd, .dd:hover .dropdown { display: block; } .jingdong{ border-bottom: none; padding-bottom: 1px; border: 1px solid transparent; text-align: center; position: relative; z-index: 999; } .jingdong:hover { background-color: white; border: 1px solid #ccc; border-bottom: none; } </style> </head> <body> <!-- 创建外围容器 --> <div class="top-bar-wraaper clearfix"> <!-- 创建内部容器 --> <div class="top-bar clearfix"> <!-- 创建左侧菜单 --> <div class="location"> <div class="current-city"> <i class="fas fa-map-marked-alt"></i> <a href="javascript:;">北京 </a> </div> <!-- 放置城市列表div --> <div class="city-list"> <ul class="choose-city clearfix"> <li><a class="city" href="javascript:;">北京</a></li> <li><a class="city" href="javascript:;">天津</a></li> <li><a class="city" href="javascript:;">上海</a></li> <li><a class="city" href="javascript:;">成都</a></li> <li><a class="city" href="javascript:;">广州</a></li> </ul> <ul class="special-region clearfix"> <span>地区专属版本</span> <li class="region"><a href="javascript:;">中国港澳</a></li> <li class="region"><a href="javascript:;">中国台湾</a></li> <li class="region"><a href="javascript:;">京东全球</a></li> </ul> </div> </div> <!-- 创建右侧菜单 --> <ul class="shortcut clearfix"> <li class="highlight1"> <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 class="jingdong"> <div class="dd"> <a href="javascript:;">我的京东</a> <div class="myjd dropdown"></div> </div> </li> <li class="line"></li> <li><a href="javascript:;">京东会员</a></li> <li class="line"></li> <li> <a class="highlight" href="javascript:;">企业采购</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> </li> </ul> </div> </div> </body> </html>
posted on 2022-03-02 10:28 mercykillerannimal 阅读(24) 评论(0) 编辑 收藏 举报
