京东
/* 解决高度塌陷的问题 */
.clearfix::before,
.clearfix::after{
content: table;
clear:both;
}
body{
/* 设置字体以及字体的大小和行高 */
font: 12px/5.5 微软雅黑;
}
.top-bar-wrapper{
/* 设置盒子宽度 */
width: 100%;
/* 设置盒子高度 */
height: 30px;
/* 设置行高 */
line-height: 30px;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* 设置边框样式 */
border-bottom: 1px #dddddd solid;
}
/* 设置字体的样式及颜色 */
.top-bar a,
.top-bar span,
.top-bar i{
color: #999;
text-decoration: none;
}
/* 设置导航栏的鼠标移入改变颜色的功能 */
.top-bar a:hover,
.top-bar a.color-a{
color: #f36162;
}
/* 设置内部容器的样式 */
.top-bar{
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
/* 设置一个相对定位 */
position: relative;
}
/* 定义向左浮动 */
.location{
float: left;
}
/* 设置小图标的颜色 */
.location .fas{
color: #f10215;
}
/* 设置城市弹窗列表 */
.location .city-list{
/* 设置一个自动隐藏功能 */
display: none;
width: 320px;
height: 460px;
background-color: #fff8f8;
/* 表示边框线宽度 1像素，实心线，定义颜色 */
border: 1px solid #cccccc ;
/* 设置绝对定位，使其显示使不占用页面位置 */
position: absolute;
/* 这里设置作用是向上移动一个像素 */
top: 31px;
/* 为避免弹窗被其他元素盖住，设置一个较高的层级 */
z-index: 999;
/* 给边框添加阴影 x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色*/
box-shadow: 0 2px 2px rgb(0, 0 ,0, .2);
}
/* 当鼠标移入到location时，让city-list 元素显示出来 */
/* 注意，只有将 */
.location:hover .city-list{
display: block;
}
/* 增加一个鼠标移入后背景颜色改变的效果 */
.current-city{
/* 增加一个内边距效果 */
padding: 0 10px;
/* 设置一个相对定位 */
position: relative;
/* 新增一个层级 */
z-index: 99999;
}
/* 设置current-city 鼠标移入后的效果 */
.location:hover .current-city{
/* 设置背景颜色 */
background-color: #ffffff;
/* 设置边框颜色 */
border: 1px solid rgb(204, 204 ,204);
/* 描述下边框的样式及定义样式 */
border-bottom: none;
/*
padding-bottom 是指一个元素在内边距区域
(padding area)中下方的高度。内边距(padding)
是指一个元素的内容和边框之间的区域
*/
padding-bottom: 1px;
}
/* 定义向右浮动 */
.shortcut{
float: right;
}
/* 设置分割线的样式及颜色 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: #cccccc;
/* 位置调整 */
margin: 10px 12px;
}
/* 定义li 向左浮动 */
.shortcut li{
float: left;
}
/* 调整图标图标的上下位置 */
.shortcut .fas{
margin: 10px 0 0 5px;
}
北京
你好，请登录
免费注册
我的订单
我的京东
京东会员
企业采购
客户服务
网站导航
手机京东
