hpre class="brush:css;toolbar:false;">.site-head {
height: 150px;
min-width: 1152px;
}
.site-head .topbar {
height: 32px;
background-color: #2A2A2A;
line-height: 32px;
}
.site-head .topbar a {
color: white;
}
.site-head .topbar .center-wrap .shortcut-links {
float: left;
}
/* .site-head .topbar .center-wrap .shortcut-links ul {
} */
.site-head .topbar .center-wrap .shortcut-links>ul>li {
float: left;
margin-right: 18px;
font-size: 12px;
}
.site-head .topbar .center-wrap .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .center-wrap .topbar-r a,
.site-head .topbar .center-wrap .topbar-r span {
margin-right: 14px;
font-size: 12px;
}
.site-head .topbar .center-wrap .topbar-r a:last-child {
margin-right: 0;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow {
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
transition: transform .2s ease 0s;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .menu {
position: absolute;
top: 30px;
left: 0;
width: 300px;
padding: 10px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .sqmenu {
width: 120px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .scmenu{
width: 76px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .jdmsmenu{
width: 64px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .menu .menu-list a {
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .menu .menu-list a:hover {
color: orange;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .menu .menu-list li {
height: 20px;
line-height: 20px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow b {
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow i {
position: absolute;
top: 1px;
left: 3px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.site-head .main-nav {
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav ul li {
float: left;
margin-right: 18px;
}
.site-head .main-nav ul li.have-menu {
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li:hover .menu {
display: block;
}
.site-head .main-nav ul li .menu {
position: absolute;
top: 35px;
left: 0;
background-color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
display: none;
}
.site-head .main-nav ul li .jjzyxmenu {
width: 160px;
}
.site-head .main-nav ul li .gtymenu {
width: 106px;
}
.site-head .main-nav ul li .ddwlmenu {
width: 190px;
}
.site-head .main-nav ul li .sdllmenu {
width: 118px;
}
.site-head .main-nav ul li .menu dl dt {
font-size: 16px;
}
.site-head .main-nav ul li .menu dl dd a {
color: #1C1F21;
font-size: 12px;
}
.site-head .main-nav ul li .menu dl dd a:hover {
color: orange;
}
.site-head .main-nav ul li.have-menu::before {
content: '';
width: 0;
height: 0;
top: 18px;
right: 0;
position: absolute;
border: 5px solid transparent;
border-top-color: white;
border-bottom: none;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .main-nav ul li a {
line-height: 40px;
color: white;
font-size: 16px;
}
.site-head .header-con {
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
float: left;
color: #20BD9A;
font-size: 24px;
font-weight: bold;
line-height: 36px;
}
.site-head .header-con .search-box {
float: left;
margin-left: 20px;
width: 405px;
padding-top: 2px;
}
.site-head .header-con .search-box input {
float: left;
width: 361px;
height: 28px;
border: 1px solid #20BD9A;
/* 分别设置四个角 */
border-radius: 4px 0 0 4px;
/* 取消默认的外线（外线是文本框特有的东西） */
outline: none;
padding-left: 10px;
}
.site-head .header-con .search-box .btn {
float: left;
width: 32px;
height: 30px;
background-color: #20BD9A;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px;
border-radius: 0 4px 4px 0;
}
.banner {
position: relative;
}
.banner img {
width: 100%;
/* 最小宽度 */
min-width: 1152px;
/* 图片可能和盒子的底部产生一些缝隙，此时可以使用一个小技巧 */
/* 这是一个小技巧，添加上之后，图片就不会产生缝隙了 */
vertical-align: middle;
}
.banner .center-wrap {
position: absolute;
top: 0;
left: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
/* 这里的100%高度绝对不能省略，如果省略了，它的高度就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .leftbtn {
position: absolute;
width: 32px;
height: 44px;
top: 0;
left: -42px;
top: 50%;
margin-top: -22px;
background: url(../images/leftbtn.png) no-repeat;
}
.banner .center-wrap .leftbtn:hover,.banner .center-wrap .rightbtn:hover {
opacity: 0.8;
}
.banner .center-wrap .rightbtn {
position: absolute;
width: 32px;
height: 44px;
top: 0;
right: -42px;
top: 50%;
margin-top: -22px;
background: url(../images/rightbtn.png) no-repeat;
}
.banner .center-wrap .banner-nav {
height: 100%;
}
.banner .center-wrap .banner-nav ul {
/* 这里的100%高度绝对不能省略，如果省略了，它的高度就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .banner-nav ul li {
height: 16.66%;
width: 296px;
background-image: linear-gradient(to bottom,red,blue);
}
