网易考拉布局和css样式
HTML
网易考拉
- 所有分类
- 美容彩妆
- 母婴儿童
- 营养保健
- 家居个护
- 数码家电
- 轻奢
- 服饰鞋靴
- 运动户外
- 手表配饰
- 环球美食
CSS样式
.arr{
position: absolute;
right: -3px;
top: 50%;
margin-top: -2px;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-color: #999 transparent transparent;
border-style: solid dashed dashed;
border-width: 4px 4px 0;
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
}
.box2{
width: 1440px;
height: 91px;
background-color: white;}
.box2a{
width: 210px;
height: 70px;
background-color: black;
left: 175px;
margin: 25px 1053px 55px 175px;
floata:left;}
.box2b{
width: 510px;
height: 40px;
background-color: #ea3f41;
margin: -70px 410px 0px 365px;
float:left;
border-radius: 20px;
}
.sousuo{
display:block;
float:left;
width:510px;
height:31px;
border:2px solid #ea3f41;
padding:5px 9px 5px 45px;
font-size:12px;
border-radius: 40px;
float:left;
}
.hongtubiao{
width: 60px;
height: 41px;
background-color: #ea3f41;
margin:-43px 0px 0px 505px;
float:left;
border-radius:20px;}
.xiaohongxian{
width:3px;
height:18px;
background-color:#ed435c;
margin:-32px 0px 0px 563px;
float:left;
}
.fangdajing{
width:18px;
height:18px;
background-color:#ed435c;
margin:-32px 0px 0px 28px;
float:left;
}
.gouwuche{
width:120px;
height:50px;
background-color:#ed435c;
margin:-49px 0px 0px 600px;
float:left;
}
.box2 .sousuozi{
width:410px;
height:18px;
color:#999;
margin:2px 0px 0px 30px;
float:left;
}
.box2 .sousuozi a{
color:#999;
margin-right: 24px;
}
.box3{
width: 1440px;
height: 38px;
background-color: white;}
.box3a{
width: 820px;
height: 25px;
margin:5px 0px 0px 230px;
float:left;
background-color: white;
font-size:15px;
}
.box3 .box3a a{
color:black;
}
.jianju{
float: left;
padding: 0 17px;
font-weight:bold ;
}
.boxtiao{
width: 80px;
height: 500px;
background-color: red;
z-index: 100;
position: absolute;
left: 175px;
}
.box4{
width: 1440px;
height: 505px;
background-color: mediumvioletred;
position:relative;}
.boxbai{
width: 64px;
height: 245px;
background-color: white;
z-index: 100;
left: 1285px;
bottom: 530px;
position: fixed;
}
.hong1{
list-style: none;
display: block;
position: relative;
}
.hong2{
float: left;
height: 49.4px;
width: 100px;
background: red;
/*background: -webkit-linear-gradient(90deg,red,#ff3264);*/
/*background: linear-gradient(90deg,red,#ff3264);*/
color: #fff;
font-size: 15px;
margin:0 auto;
padding-left: 0;
overflow: visible;
}
.hong2:hover .hong4{
display: block;
}
.hong3{
padding-left: 10px;
width: 87px;
cursor: pointer;
text-align: left;
padding-right: 3px;
}
.hong3:hover {
color:red;
}
.hong4{
position: absolute;
top:50px;
left: 100px;
background-color: white;
width: 630px;
height: 415px;
display: none;}
.boxtiao ul li:hover{
background-color: white;
}
.boxtiao ul li{
text-align；line-height:5px；
}
.aaa{
height: 300px;
line-height: 34px;
font-size: 14px;
font-weight: 700;
}
.bbb{
display: inline;
color: #333;
text-align: left;
}
.ccc{
margin-left: -8px;
font-size: 0;
}
.ddd{
display: inline-block;
height: 14px;
line-height: 14px;
padding: 0 10px;
margin-top: 20px;
font-size: 13px;
color: red;
}
.box3 .box3a a:hover{
color: red;
}
.boxbai{
width: 64px;
height: 245px;
background-color: white;
z-index: 100;
left: 1285px;
bottom: 530px;
position: fixed;
}
.boxbbai{
width: 98px;
height: 703px;
background-color: white;
z-index: 100;
left: 55px;
bottom: 50px;
position: fixed;
}
.box5{
width: 1440px;
height: 45px;
background-color: silver;
opacity: 0.8;
z-index: 50;
position: absolute;
bottom:0px;
}
.box5a{
color:white;
padding: 0 10px;
margin-top: 20px;
margin: -2px 0px 0px 300px;
}
.box5 .box5a a{
color:white;
padding: 20px;
font-size: 13px;
}
.box7{
width: 1440px;
height: 20px;
background-color: white;}
.box8{
width: 1100px;
height: 330px;
background-color: mediumvioletred;
margin: 0 auto;}
.box17{
width: 1100px;
height: 380px;
background-color: white;
margin: 0 auto;}
.box16{
width: 1100px;
height: 1px;
background-color: silver;
margin: 0 auto;}
.box15{
width: 1100px;
height: 75px;
background-color: white;
margin: 0 auto;}
.box18{
width: 1100px;
height: 380px;
background-color: rosybrown;
margin: 0 auto;}
.box19{
width: 1100px;
height: 75px;
background-color: white;
margin: 0 auto;}
.box20{
width: 1100px;
height: 380px;
background-color: rosybrown;
margin: 0 auto;}
.box21{
width: 1100px;
height: 75px;
background-color: white;
margin: 0 auto;}
.box22{
width: 1100px;
height: 355px;
background-color: rosybrown;
margin: 0 auto;}
.box23{
width: 1100px;
height: 75px;
background-color: white;
margin: 0 auto;}
.box24{
width: 1100px;
height: 355px;
background-color: rosybrown;
margin: 0 auto;}
.box25{
width: 1100px;
height: 75px;
background-color: silver;
margin: 0 auto;}
.box26{
width: 1100px;
height: 260px;
background-color: grey;
margin: 0 auto;}
.box27{
width: 1100px;
height: 125px;
background-color: black;
margin: 0 auto;}
.box28{
width: 1100px;
height: 260px;
background-color: grey;
margin: 0 auto;}
.box29{
width: 1100px;
height: 125px;
background-color: black;
margin: 0 auto;}
.box30{
width: 1100px;
height: 67px;
background-color: burlywood;
margin: 0 auto;}
.box31{
width: 1100px;
height: 540px;
background-color: rebeccapurple;
margin: 0 auto;}
.box32{
width: 1100px;
height: 20px;
background-color: white;
margin: 0 auto;}
.box33{
width: 1100px;
height: 218px;
background-color: rebeccapurple;
margin: 0 auto;}
.box901{
width: 1100px;
height: 67px;
background-color: burlywood;
margin: 0 auto;}
.box902{
width: 1100px;
height: 540px;
background-color: rebeccapurple;
margin: 0 auto;}
.box903{
width: 1100px;
height: 20px;
background-color: white;
margin: 0 auto;}
.box904{
width: 1100px;
height: 218px;
background-color: rebeccapurple;
margin: 0 auto;}
.box34{
width: 1125px;
height: 41px;
background-color: white;
margin: 0 auto;}
.box35{
width: 1100px;
height: 75px;
background-color: darkgrey;
margin: 0 auto;}
.box36{
width: 1100px;
height: 540px;
background-color: rebeccapurple;
margin: 0 auto;}
.box37{
width: 1100px;
height: 20px;
background-color: white;
margin: 0 auto;}
.box38{
width: 1100px;
height: 218px;
background-color: rebeccapurple;
margin: 0 auto;}
.box95{
width: 1125px;
height: 41px;
background-color: white;
margin: 0 auto;}
.box96{
width: 1100px;
height: 75px;
background-color: darkgrey;
margin: 0 auto;}
.box97{
width: 1100px;
height: 540px;
background-color: rebeccapurple;
margin: 0 auto;}
.box98{
width: 1100px;
height: 20px;
background-color: white;
margin: 0 auto;}
.box99{
width: 1100px;
height: 218px;
background-color: rebeccapurple;
margin: 0 auto;}
.box39{
width: 1100px;
height: 41px;
background-color:white;
margin: 0 auto;}
.box40{
width: 1439px;
height: 563px;
background-color: dimgrey;
margin: 0 auto;}
