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:20%;
    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: 50px 0;
}
/*四个控件按钮--头像*/
#control_avatar{
    display:none;
}
/*四个控件按钮--购物车*/
#control_cart{
    display:none;
}
/*四个控件按钮--菜单*/
#control_menu{
    display:none;
    background-color: rgba(153, 153, 153,.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align:right;
}
#control_menu .main{
    width: 27%;
    height: 100%;
    display: inline-block;
    background-color: #fff;
}
#control_menu .shut{
    text-align: left;
    margin: 4rem 88.5% 42px 2rem;
    font-size: 50px;
    color: #D1D5DA;
    line-height: 28px;
    font-weight: 300;
}
#control_menu .one{
    text-align: left;
    width: 90%;
    margin: auto 5%;
    height: 168px;
}
#control_menu .one table{
    width: 100%;
}
#control_menu .one th{
    width: 50%;
    padding-bottom: 35px;
    font-size: 16px;
}
#control_menu .one td{
    width: 50%;
    padding-bottom: 19px;
    font-size: 14px;
    cursor: pointer;
}
.in{
    color: #007AFF;
}

/*页脚*/
#uiLayer>footer{
    background-color: #F1F1F1;
    width:100%;
    height: 35px;
    line-height: 35px;
    color: #a5a7ae;
    text-indent: 2rem;
}
#uiLayer>footer>div{
    float: right;
    padding-right: 3rem;
    line-height: 0;
}
#uiLayer>footer>div>span{
    display:inline-block;
    width:25px;
    height:25px;
    background-position-x: 3px;
    background-repeat: no-repeat;
    margin: 8px 1.5rem 0 0;
}
#uiLayer>footer .facebook{
    background-image: url("../img/facebook_icon.svg");
}
#uiLayer>footer .facebook:hover{
    background-image: url("../img/facebook_icon_hover.svg");
}

#uiLayer>footer .twitter{
    background-image: url("../img/twitter_icon.svg");
}
#uiLayer>footer .twitter:hover{
    background-image: url("../img/twitter_icon_hover.svg");
}

#uiLayer>footer .pinterest{
    background-image: url("../img/pinternest_iocn.svg");
}
#uiLayer>footer .pinterest:hover{
    background-image: url("../img/pinternest_iocn_hover.svg");
}

#uiLayer>footer .google{
    background-image: url("../img/google_icon.svg");
}
#uiLayer>footer .google:hover{
    background-image: url("../img/google_icon_hover.svg");
}

#uiLayer>footer .instagram{
    background-image: url("../img/instagram_icon.svg");
}
#uiLayer>footer .instagram:hover{
    background-image: url("../img/instagram_icon_hover.svg");
}

#uiLayer>footer .wechat{
    background-image: url("../img/wechat_icon.svg");
}
#uiLayer>footer .wechat:hover{
    background-image: url("../img/wechat_icon_hover.svg");
}

#uiLayer>footer .youtube{
    background-image: url("../img/youtube_icon.svg");
}
#uiLayer>footer .youtube:hover{
    background-image: url("../img/youtube_icon_hover.svg");
}