*{
margin:0;
padding:0;
}
body,button,input,select,textarea {
font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,PingFang TC,PingFang HK,Microsoft Yahei,Microsoft JhengHei
}
.header{
width:100%;
height:35px;
background-color: #f5f5f5;
}
.header-top{
width: 1200px;
height:35px;
margin: 0 auto; /*居中*/
color:#6d6b70;
}
.header-top ul{
padding-top:15px;
}
.header-top-l{
float: left;
width:420px;
height:35px;
line-height: 6px;
}
.header-top-l .active{
color:#000000;
}
.header-top-r{
float: left;
padding-left: 80px;
width:670px;
height:35px;
line-height: 6px;
}
.header-top-l ul li{
list-style: none;
float: left;
font-size: 13px;
margin-right: 20px;
}
.header-top-r ul li{
list-style: none;
float: left;
font-size: 13px;
margin-right: 20px;
}
.header-gg{
width: 100%;
height: 60px;
background-color: #19814e;
}
.header-gg-cc{
width: 1200px;
height: 60px;
margin: auto;
position: relative;
overflow: hidden;
}
.header-gg img{
width:3840px;
height:60px;
position: absolute;
left: -112%;
}
.header-sr{
width:1530px;
height: 100px;
height: auto;
margin: 0 auto;
margin-top:14px;
}
.logo{
width:120px;
height: 75px;
background: url(../images/logo.png) no-repeat 50% / cover;
float: left;
}
.search-cc{
width:1070px;
height:83px;
float: left;
margin-left:85px;
}
.search-ii{
width: 950px;
height:45px;
border:2px solid #df5a1f;
border-radius: 12px;
float: left;
}
.search-select select{
border: none;
font-size: 15px;
margin:15px 0 15px 18px;
color:#313138;
float: left;
}
.fg{
float: left;
margin:8px;
color:#d7d7da;
}
.search-input{
float: left;
}
.search-input input{
border:none;
margin:5px;
width:760px;
height: 35px;
}
.search-input input:focus{
outline: none;
}
.search-button{
width:74px;
height: 38px;
background-color: #ff5000;
float: left;
color:white;
border-radius: 10px;
margin-top:3px;
text-align: center;
line-height: 35px;
cursor: pointer;
}
.search-tk{
width: 100px;
height: 45px;
background-color: #fff2ec;
border-radius: 10px;
float: left;
margin-left:10px;
}
.camera{
width:25px;
height: 25px;
background: url("../images/camera.png") no-repeat 50% / cover;
margin:10px 0 0 10px;
float: left;
}
.search-tk-t{
width: 55px;
height:20px;
line-height: 43px;
float: left;
color: #ef550f;
}
.search-keyword{
clear: both;
margin-left:5px;
}
.search-keyword ul li{
list-style: none;
float: left;
margin-left: 10px;
font-size: 12px;
color:#96979c;
padding-top:6px;
}
.hot{
color:#f1334d;
}
.red-packet{
width:240px;
height:72px;
background: url(../images/red-packet.gif) no-repeat 50% / cover;
float: left;
margin-left:15px;
}
.nav{
clear: both;
width:990px;
height:35px;
margin: 0 auto;
padding-top:20px;
}
.nav ul li{
list-style: none;
float: left;
margin-left:15px;
font-size:16px;
font-weight: 600;
}
.nav ul li:nth-child(-n+4){
color:#f60c3d;
}
.green{
color:#50d44f;
}
.nav-icon, nav-title{
float: left;
}
.nav-title{
width: 120px;
}
.first-title{
width: 80px;
}
.nav-icon{
width: 20px;
height:20px;
background: url(../images/icon1.gif) no-repeat 50% /cover;
margin: 1px 5px -2px 0
}
.nav-icon2{
width: 20px;
height:20px;
background: url(../images/icon2.png) no-repeat 50% /cover;
margin: 1px 5px -2px 0
}
.nav-icon2{
width: 20px;
height:20px;
background: url(../images/icon3.gif) no-repeat 50% /cover;
margin: 1px 5px -2px 0
}
浏览器效果： 后面的内容区域有兴趣可以下载下来接着完成啦，如果有问题的地方欢迎留言！
