*{
padding:0;
margin:0;
}
.wrap{
width:100%;
overflow: hidden;/*有父子关系的margin 防止外边距合并*/background-color: rgba(245,245,245,0.98); /*设置透明度*/}
a{text-decoration: none;}
ul>li{ list-style: none;} /*儿子选择器*/.topheader{
height: 40px;
line-height:40px;/*行高*/font-size:12px;
background-color: #333;
}
.topheader a{
color:#b0b0b0;/*字体颜色*/}
.topheader a:hover{/*伪类选择器 hover鼠标悬停时超链接状态*/color: white;
}
.topheader .sep{
color: #424242;
margin:0 2px; /*外边距*/}
.container{
width: 1225px; overflow: hidden;margin:0auto;
}
.topheader-navi{float: left;
}
.topheader-cart,.topheader-info{float: right
}
.topheader-cart .icon{ /*给购物车添加背景图片*/background: url("../images/shop1.png") 3px 24px;
width: 35px;
height: 22px;
display: inline-block;/*行内块元素 同时具有行内和和块级元素,和其他元素在一行,距离都可以设置*/position: relative;
top:6px;
}
.topheader-cart a{/*display: block; !*块级元素,每个块级元素都从新的一行开始,距离都可设置*!*/margin-left: 15px;
padding:015px;
}
.topheader-cart a:hover{
background-color: white;
color: rgba(255,103,0,0.98);
}
.header{
height: 100px;
line-height: 100px;
overflow: hidden;
}
.header-logo,.header-navi{float: left;
height: 100px;
}
.header-logo .logo{
margin-right: 10px;
margin-top: 20px;}
.header-search{float: right;
position: relative;
}
.header-navi ul li{float: left;
margin:0auto;
padding:010px;
color: black
}
.header-navi ul li a{
color: #333;
font-size: 16px;
}
.header-navi ul li a:hover{
color: rgba(255,103,0,0.98);
}
.header-search input[type="text"]{
height: 44px;
width: 243px;
border: 1px solid #e0e0e0;
margin-right: -1px;
}
.header-search input[type="text"]:hover{
border: 1px solid #b0b0b0;
}
.header-search input[type="text"]:focus{ /*获取焦点时的样式*/outline:none;/*轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用*/}
.hot-words{
font-size: 12px;
position: absolute;
right: 40px;}
.hot-words a{
background-color: #eee;
color: #757575;
padding: 3px 6px;
position: relative;
top: 2px;
right: 16px;
}
.hot-words a:hover{
background-color: rgba(255,103,0,0.98);
color: white;
}
.header-search input[type="submit"]{
height: 45px; width: 45px;
background: url("../images/search1.png") no-repeat 3px 6px;
border: 1px solid #e0e0e0;
position: relative;
top: 17px;
cursor: pointer;/*设置鼠标形状, 变成小手了*/left:-5px;
}
.header-search input[type="submit"]:hover{
background: url("../images/search2.png") no-repeat 8px 8px;
background-color: rgba(255,107,0,0.98);
}
.content .con-up .up-l{
background-color: rgba(89,89,89,0.9);
width: 240px;
position: absolute;
}
.con-up ul:before,.con-up ul:after{ /*用子盒子来填充父盒子 解决浮动产生的问题*/content:"";
height: 26px;
display: block;
}
.con-up ul li{
padding: 10px 25px;
}
.con-up ul li:hover{
background-color: rgba(255,103,0,0.98);
}
.con-up ul li a{
color: white;}
.con-up ul li span{ /*设置空格*/
float: right;
color: white;}
.con-down{
overflow: hidden;
padding-top: 10px;
}
.con-down .down-l{
width: 240px;
overflow: hidden;
background-color: rgba(95,87,80,1);float: left;
}
.con-down ul{
overflow: hidden;
}
.con-down .down-l ul li{float: left;
width: 78px;
height: 83px;
border: 1px solid #665e57;
text-align: center; /*两端居中*/}
.down-l ul li p{
color: #b0b0b0;
position: relative;
font-size: 15px;
}
.down-l ul li p:hover{
color: white;
}
.down-l .p-1{
background: url("../images/手机.png") no-repeat center;
background-size: 50px; height: 60px;}
.down-l .p-2{
background: url("../images/企业团购.png") no-repeat center;
background-size: 50px; height: 60px;}
.down-l .p-3{
background: url("../images/F码通道.png") no-repeat center;
background-size: 50px; height: 60px;}
.down-l .p-4{
background: url("../images/米粉卡.png") no-repeat center;
background-size: 50px; height: 60px;}
.down-l .p-5{
background: url("../images/以旧换新.png") no-repeat center;
background-size: 50px; height: 60px;}
.down-l .p-6{
background: url("../images/话费充值.png") no-repeat center;
background-size: 50px; height: 60px;}
.con-down .down-2{float: left;}
.con-down .down-2ul li{float: left;
}
.down-2img{
width: 315px;
height: 170px;
margin-left: 13px;
}
.down-2img:hover{
box-shadow: 0 5px 1px #b0b0b0; /*box-shadow 向框添加一个或多个阴影*/}
.bar-right{
position:fixed;/*z-index: 3;*/right:0;
top: 250px;
background-color: white; }
.bar-right ul li{
font-size: 14px;
padding: 10px;
border: 1px solid #e0e0e0;
}
.bar-right ul li:hover{
color: rgba(255,103,0,0.98);
cursor: pointer;
}
.bar-right ul li p{
text-align: center;
padding-top: 5px;
}
.bar-right .fixed-1{
background: url("../images/扫一扫.png") no-repeat center;
background-size: 30px; height: 30px;
}
.bar-right .fixed-2{
background: url("../images/个人中心.png") no-repeat center;
background-size: 30px;
height: 30px;}
.bar-right .fixed-3{
background: url("../images/联系客服.png") no-repeat center;
background-size: 30px;
height:30px ;
}
.bar-right .fixed-4{
background: url("../images/购物车.png") no-repeat center;
background-size: 30px;
height:30px ;
}
.footer p{
text-align: center;
color: #b0b0b0;
font-size: 16px;}