test/userWeb/UI/css/control.css

/*导航*/
#control header{
    min-width:1024px;
    height:123px;
    padding-top: 1px;
}
#control header nav{
	float:left;
	width:50%;
	padding-left:80px;
	height: inherit;
}
#control header nav a:nth-child(1){
	color: #2d3037;
	background: url(../img/Logo.svg) 47% 49% no-repeat;
	margin-right:8%;
	width:61px;
}
#control header nav a:nth-child(1):hover{color: #2d3037;}
#control header nav a{
	display: inline-block;
    height: 123px;
    width:25%;
    text-align: center;
    line-height: 123px;
    font-weight: 500;
    color: #A8AAB1;
    font-size: 16px;
    font-family: HelveticaNeue-Medium;
}
#control header nav a:hover{
	color:#161A21;
    font-weight: 600;
	text-decoration:none;
}
#control header .controlBtn{
    float: right;
    width: 50%;
    text-align: right;
    height: inherit;
    padding-top: 45px;
    padding-right: 94px;
}
#control header .controlBtn span{
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 46px;
}
/*四个控件按钮*/
#control .search{
    background:url("../img/search_icon.svg") no-repeat;
}
#control .search:hover{
    background:url("../img/search_icon_hover.svg") no-repeat;
}
#control .avatar{
    background:url("../img/avatar_default.svg") no-repeat;
}
#control .avatar:hover{
    background:url("../img/avatar_default_hover.svg") no-repeat;
}
#control .cart{
    background:url("../img/cart_icon.svg") no-repeat;
}
#control .cart:hover{
    background:url("../img/cart_icon_hover.svg") no-repeat;
}
#control .menu{
    background:url("../img/menu_icon.svg") no-repeat;
}
#control .menu:hover{
    background:url("../img/menu_icon_hover.svg") no-repeat;
}
#control header .hr{
	float: left;
    width: 88%;
    height: 1.5px;
    background: #F8F8F8;
    margin: 0 6%;
}
/*四个控件按钮--搜索*/
#control_search{
    display:none;
    width: 88%;
    margin: 0 auto;
}
#control_search .title{
    text-align: center;
    padding-top: 198px;
    padding-bottom: 60px;
    font-family: HelveticaNeue;
    font-size: 32px;
    color: #262c38;

    animation:control_searchTitle 1.5s;
    -moz-animation:control_searchTitle 1.5s; /* Firefox */
    -webkit-animation:control_searchTitle 1.5s; /* Safari and Chrome */
    -o-animation:control_searchTitle 1.5s; /* Opera */
}
@keyframes control_searchTitle{
    0%   {padding-top:248px;opacity:0;}
    100% {padding-top:198px;opacity:1;}
}
@-moz-keyframes control_searchTitle{
    0%   {padding-top:248px;opacity:0;}
    100% {padding-top:198px;opacity:1;}
}
@-webkit-keyframes control_searchTitle{
    0%   {padding-top:248px;opacity:0;}
    100% {padding-top:198px;opacity:1;}
}
@-o-keyframes control_searchTitle{
    0%   {padding-top:248px;opacity:0;}
    100% {padding-top:198px;opacity:1;}
}
#control_search .input{
    text-align: center;
}
#control_search .input>div{
    display: inline-block;
}
#control_search .input>div>p{
    height:50px;
    animation:control_searchInput 1.5s;
    -moz-animation:control_searchInput 1.5s; /* Firefox */
    -webkit-animation:control_searchInput 1.5s; /* Safari and Chrome */
    -o-animation:control_searchInput 1.5s; /* Opera */
}
@keyframes control_searchInput{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-moz-keyframes control_searchInput{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-webkit-keyframes control_searchInput{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-o-keyframes control_searchInput{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
#control_search .input>div>p>input{
    float:left;
    height: 50px;
    width: 660px;
    text-indent: 1em;
}
#control_search .input>div>p>span{
    background: url(../img/search_icon_white.svg) no-repeat;
    float: left;
    display: inline-block;
    width: 71px;
    height: 50px;
    border-radius: 1px;
    line-height: 50px;
    border-left: 0;
    background-color: #00c400;
    background-position: 50% 50%;
}
#control_search .input>div>span{
    color: #767a82;
    display: inline-block;
    font-size: 40px;
    line-height: 25px;
    margin-top:298px;
    animation:control_searchClose 1.5s;
    -moz-animation:control_searchClose 1.5s; /* Firefox */
    -webkit-animation:control_searchClose 1.5s; /* Safari and Chrome */
    -o-animation:control_searchClose 1.5s; /* Opera */
}
@keyframes control_searchClose{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-moz-keyframes control_searchClose{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-webkit-keyframes control_searchClose{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-o-keyframes control_searchClose{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
#control_search .hot{
    text-align: left;
    animation:control_searchHot 1.5s;
    -moz-animation:control_searchHot 1.5s; /* Firefox */
    -webkit-animation:control_searchHot 1.5s; /* Safari and Chrome */
    -o-animation:control_searchHot 1.5s; /* Opera */
}
@keyframes control_searchHot{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-moz-keyframes control_searchHot{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-webkit-keyframes control_searchHot{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
@-o-keyframes control_searchHot{
    0%   {padding-top:50px;opacity:0;}
    100% {padding-top:0px;opacity:1;}
}
#control_search .hot .tit{
    font-weight:600;
}
#control_search .hot p{
    margin-bottom: 0px;
}
#control_search .hr{
    background-color: #f1f1f1;
    height: 2px;
    margin-top: 50px;
}
/*四个控件按钮--头像*/
#control_avatar{
    display:none;
}
/*四个控件按钮--购物车*/
#control_cart{
    display:none;
}
/*四个控件按钮--菜单*/
#control_menu{
    display:none;
}
/*页脚*/
#control footer{
    background-color: #F1F1F1;
    width:100%;
    height: 35px;
}