仿写小米页面的css样式

body{

font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

}

.banner{

height:120px;

background-image:url(../images/banner.jpg);

/*background-repeat:no-repeat;*/

/*水平居中 垂直零*/

background-position:center 0;

/*设置背景图片大小*/

background-size:auto 120px;

}

.nav{

color:#b0b0b0;

background-color:#333;

height:40px;

}

.nav-1{

height:40px;

width:1226px;

/*第一个是上下 第二个是左右自动适应*/

/*块级元素水平居中*/

margin:0 auto;

}

 

/*左边的样式*/

#ulleft{

float:left;

}

 

#ulleft li{

float:left;

}

#ulleft li a{

color:#b0b0b0;

line-height:40px;

padding:0 5px;

border-right:1px solid #424242;

}

/*右边的样式*/

#ulright{

/*float:right;*/

}

.cart span{

color:#b0b0b0;

float:right;

line-height:40px;

}

#ulright li{

float:right;

}

 

#ulright li a{

color:#b0b0b0;

line-height:40px;

padding:0 5px;

border-right:1px solid #424242;

}

 

.header-box{

height:100px;

margin:0 auto;

}

/*文本 行元素 行级块元素 水平居中->父元素设置 text-align

块级元素 水平居中 ->块级元素自己设置margin:0 auto*/

.logo-box{

float:left;

background:#ff6700;

width: 55px;

height: 55px;

text-align:center;

margin-top:23px;

margin-right:190px;

}

.menu-box{

float:left;

}

.menu-box li{

float:left;

height:100px;

line-height:100px;

}

.menu-box li a{

color:#333;

font-size:16px;

/*padding 上下 左右*/

padding:0 10px;

}

.menu-box li:hover a{

color:#ff6700;

}

.search-box{

float:right;

width:296px;

height:50px;

/*border:1px solid #e0e0e0; */

margin-top:24px;

}

.search-box input{

width:245px;

border:none;

height:50px;

/*消除选中时的蓝边*/

outline:none;

float:left;

color:#616161;

color:#333;

padding:0 10px;

/*因为后期设置了padding所以元素被撑大

所以运用 box-sizing：border-box来进行调整*/

box-sizing:border-box;

border-top:1px solid #e0e0e0;

border-left:1px solid #e0e0e0;

border-bottom:1px solid #e0e0e0;

}

.search-btn{

width:49px;

/*a标签为行元素，所以应使用display：inline*/

display:inline-block;

/*若里面没有文字的话，默认高度为零，所以设置高度*/

height:48px;

/*掐算的距离正好但是跳出，回车加空格占据字节，

解决方法

1.设置字体大小为0

使用浮动，即跳出的内容不占空间即可*/

border:1px solid #e0e0e0;

text-align:center;

line-height:50px;

 

}

.search-btn:hover {

background:#ff6700;

border:1px solid #ff6700;

color:#fff

}

.slide-box{

height:460px;

background:url(images/lunbo.webp);

position:relative;

}

.img-box img{

height:460px;

}

.cate-box{

height:460px;

width:234px;

/*三元色 加透明度*/

background:rgba(105,101,101,0.6);

position:absolute;

left:0;

top:0;

}

.cate-list{

padding-top:20px;

padding-bottom:20px;

}

/*子代选择器*/

.cate-list >li{

width:190px;;

height:42px;

padding-left:30px;

line-height:42px;

color:#fff;

padding-right: 14px;

font-size: 14px

 

}

.cate-list >li:hover{

background:#ff6700

}

.cate-list >li>span{

float:right;

}

.sub-menu-box{

height:460px;

width:992px;

background: #FFF;

/*绝对定位相对于最近已定位的祖先元素*/

position:absolute;

top:0;

left:234px;

/*先隐藏*/

display:none;

}

.main-menu:hover .sub-menu-box{

display:block;

box-shadow:0 8px 16px rgba(0,0,0,0.18)

}

.sub-menu-box .sub-img{

height:40px;

width:40px;

/*图片和span竖直居中时以下边为标准来对齐

应使用语句vertical-align:middle*/

/*两个兄弟元素居中对齐*/

vertical-align:middle;

 

}

.sub-menu-box .sub-text{

color:#333;

}

.sub-menu{

padding:18px 20px;

height:40px;

line-height:40px;

width:225px;

}

.sub-menu-box ul{

float:left;

width:248px

}

.channel-left{

background:#5f5750;

font-size: 12px;

width:234px;

overflow:hidden;

display:inline-block;

}

.channel-left li{

width:76px;

height:84px;

float:left;

/*由于以上进行了浮动的操作

所以channel-left进行塌陷

1.解决办法将进行塌陷的版块进行设置高度

2.父类元素进行overflow:hidden;

3.浮动元素下面添加块级元素clear：both

*/

text-align:center;

padding:0 3;

 

}

.channel-left .img-top{

height:82px;

width:70px;

padding-top:18px;

/*margin:0 auto;

令块元素居中*/

margin:0 auto;

}

 

.channel-left .img-bottom{

height:70px;

width:48px;

padding-bottom:18px;

margin:0 auto;

}

.channel-left li a{

color:#ffffff;

font-size:12px;

text-align:center;

}

.channel-left li img{

height:24px;

width:24px;

display:block;

margin:0 auto;

}

/*1.小米页面中channel-box的线条不连贯其中可以用span改变像素的大小200*1

2.*/

 

/*下面代码可能出现的问题

当使用a标签时，我们运用浮动的手法时，会使a标签为0*0，释放空间，所以要浮动a标签

 

*/

.channel-right {

width:992px;

height:170px;

float:right;

padding-left:1px;

box-sizing:border-box;

/*设置怪异盒模型，内容往后串可以使用*/

}

.channel-box{

height:173px;

}

.channel-right .right-img{

float:left;

width:316px;

height:170px;

margin-left:14px;

}

.channel-right img{

width:100%;

}

/*闪购部分*/

.main-content{

background:#f5f5f5;

/*height:1000px;*/

width:auto;

height:auto;

}

.flashsale-header{

height:58px;

display: inline-block;

line-height:58px;

color:#333;

font-size:22px;

/*fongt-weight为字体粗细，默认粗细为400*/

font-weight:200;

}

/*在css格式中如果想要让图标居中的话

如果水平居中 则margi：0 auto

如果垂直居中的话则用 line-height设置*/

.btn-box{

position:absolute;

right:0;

top:20px;

}

.sale-header-box{

position:relative;

}

.btn-box span{

width:36px;

height:24px;

text-align:center;

font-size:12px;

/*如上设置宽高无效，因为行级元素设置宽高无效

解决方法要加上display：inline-block*/

border:1px solid/*实心*/#e0e0e0;

display:inline-block;

}

.sale-time{

width:234px;

height:340px;

background:#f2eded;

float:left;

}

.sale-list-box{

width:978px;

float:right;

}

/*当上面的两个子元素进行浮动的时候，上一层的父元素则会没有高度*/

/*解决父元素因子元素浮动导致的高度塌陷

1.overflow：hidden

2.设置高度

3.clear：both

在闪购下有clear：both的讲解*/

.sale-content{

overflow:hidden;

}

.sale-time {

text-align: center;

padding-top:39px;

}

.start-time{

font-size:21px;

color:#ef3a3b;

padding-top:25px;

}

.light{

padding:25px 0;

}

.end-text{

color: rgba(0,0,0,.54);

font-size:15px;

}

.time-num{

display:inline-block;

/*span块元素不能设置宽高，设置inline也不可以设置宽高*/

width:46px;

height:46px;

background:#605751;

font-size:24px;

color:#fff;

line-height:46px;

}

.end-time{

margin-top:28px;

}

.time-syb{

color:#605751;

font-size:28px;

}

/*开始设置列表样式*/

/*块元素的宽度默认充满父元素的宽度，所以为978px即设置留个li时掉下来*/

.sale-list{

width:234px;

height:340px;

background:rgba(0,0,0,.02);

float:left;

margin-right:14px;

text-align:center;

}

.sale-list-wapper{

width:1488px;

height:340px;

}

.sale-list-box{

overflow:hidden;

}

.sale-list-photo{

height:160px;

width:160px;

padding-top:39px;

padding-bottom:22px;

padding-left:37px;

padding-right:37px;

}

.sale-list-header{

color:#212121;

font-weight:400;

font-size:14px;

/*以下内容单行文本溢出。。。。。*/

text-overflow:ellipsis;

/*文本溢出不换行*/

white-space:nowrap;

 

}

.sale-list-text{

padding-bottom:12px;

padding-right:20px;

padding-left:20px;

color:#b0b0b0;

font-size:12px;

height:18px;

}

.sale-list-price{

color:#ff6709;

font:14px;

}

.sale-list-price-after{

color:#b0b0b0;

text-decoration: line-through;

}

/*广告部分*/

.banner{

display:block;

 

.

}