www.gusucode.com > 阿里云官网全屏导航菜单源码程序 > 阿里云官网全屏导航菜单/css/common-header.css
.common-header-clearfix:before,.common-header-clearfix:after { content:"."; display:block; height:0; overflow:hidden } .common-header-clearfix:after { clear:both } .common-header-clearfix { zoom:1 } .pull-left { float:left } .pull-right { float:right } .ali-common-header { width:100%; height:62px; background:#00a2ca; position:relative; z-index:101 } .ali-common-header-inner { min-width:1000px; max-width:1200px; margin:0 auto; position:relative } .ali-common-header-inner .flash-wrap { width:230px; height:62px; position:absolute; top:0; left:0; z-index:1; background-image:url(./images/TB13z5nIVXXXXXhaFXXWKwaHXXX-460-124.jpg); background-size:cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/TB13z5nIVXXXXXhaFXXWKwaHXXX-460-124.jpg',sizingMethod='scale') } .ali-common-header-inner .link a { position:absolute; top:0; width:160px; height:48px; padding-top:14px; display:inline-block; z-index:2 } .ali-common-header-inner .logo a { left:0 } .ali-common-header-inner .activity-url a { right:0 } .ali-common-header-inner .item { height:62px } .ali-common-header-inner .pr { position:relative } .ali-common-header-inner .activity { width:268px; position:relative } .ali-common-header-inner .menu { width:730px; font-size:16px; line-height:62px; color:#fff } .ali-common-header-inner .menu li.top-menu-item { cursor:default; float:left; position:relative; z-index:9999; -webkit-transition:all .6s ease-in; -moz-transition:all .6s ease-in; -o-transition:all .6s ease-in; transition:all .6s ease-in } .ali-common-header-inner .menu li.top-menu-item .menu-hd { display:inline-block; padding:0 25px; color:#fff; text-decoration:none } .ali-common-header-inner .menu li.top-menu-item:hover { background:#0196bd } .ali-common-header-inner .menu li.top-menu-item a.top-menu-item-link:link,.ali-common-header-inner .menu li.top-menu-item a.top-menu-item-link:visited { color:#fff; text-decoration:none } .ali-common-header-inner .search { width:192px; height:32px; margin-top:15px; background:#008ab0; position:relative } .ali-common-header-inner .search-key { width:155px; height:32px; line-height:32px; padding-left:5px; background:0 0; border:none; color:#7ed1e8; outline:none; font-size:14px } .ali-common-header-inner .search-submit { color:#fff; width:32px; height:32px; position:absolute; top:0; right:0; cursor:pointer; text-align:center; line-height:32px } .ali-common-header-inner .menu-dropdown { position:absolute; width:920px; top:62px; left:0; line-height:18px; background-color:#f1f1f1; color:#333; -webkit-box-shadow:0 1px 5px #dddbdb; -moz-box-shadow:0 1px 5px #dddbdb; box-shadow:0 1px 5px #dddbdb; overflow:hidden; height:0 } .ali-common-header-inner .menu-dropdown .module-wrap.last { margin-right:0 } .ali-common-header-inner .product-bg-common { background-position:right bottom!important; background-repeat:no-repeat!important } .ali-common-header-inner .dev-bg { background-image:url("./images/yundun-bg-x1.jpg"); background-image:-webkit-image-set(url(./images/dev-bg-x1.jpg) 1x,url(./images/dev-bg-x2.jpg) 2x); background-image:-moz-image-set(url(./images/dev-bg-x1.jpg) 1x,url(./images/dev-bg-x2.jpg) 2x); background-image:-ms-image-set(url(./images/dev-bg-x1.jpg) 1x,url(./images/dev-bg-x2.jpg) 2x); background-image:-o-image-set(url(./images/dev-bg-x1.jpg) 1x,url(./images/dev-bg-x2.jpg) 2x) } .ali-common-header-inner .dev-bg,.ali-common-header-inner .training-bg { background-position:right bottom; background-repeat:no-repeat; background-color:#fff!important } .ali-common-header-inner .training-bg { background-image:url("./images/training-bg-x1.jpg"); background-image:-webkit-image-set(url(./images/training-bg-x1.jpg) 1x,url(./images/training-bg-x2.jpg) 2x); background-image:-moz-image-set(url(./images/training-bg-x1.jpg) 1x,url(./images/training-bg-x2.jpg) 2x); background-image:-ms-image-set(url(./images/training-bg-x1.jpg) 1x,url(./images/training-bg-x2.jpg) 2x); background-image:-o-image-set(url(./images/training-bg-x1.jpg) 1x,url(./images/training-bg-x2.jpg) 2x) } .ali-common-header-inner .training-inner .module-wrap { width:28% } .ali-common-header-inner .aliplus-bg { background-image:url("./images/aliplus-bg-x1.jpg"); background-image:-webkit-image-set(url(./images/aliplus-bg-x1.jpg) 1x,url(./images/aliplus-bg-x2.jpg) 2x); background-image:-moz-image-set(url(./images/aliplus-bg-x1.jpg) 1x,url(./images/aliplus-bg-x2.jpg) 2x); background-image:-ms-image-set(url(./images/aliplus-bg-x1.jpg) 1x,url(./images/aliplus-bg-x2.jpg) 2x); background-image:-o-image-set(url(./images/aliplus-bg-x1.jpg) 1x,url(./images/aliplus-bg-x2.jpg) 2x); background-position:right bottom; background-repeat:no-repeat; background-color:#fff } .ali-common-header-inner .solution-bg { background-image:url("./images/solution-bg-x1.jpg"); background-image:-webkit-image-set(url(./images/solution-bg-x1.jpg) 1x,url(./images/solution-bg-x2.jpg) 2x); background-image:-moz-image-set(url(./images/solution-bg-x1.jpg) 1x,url(./images/solution-bg-x2.jpg) 2x); background-image:-ms-image-set(url(./images/solution-bg-x1.jpg) 1x,url(./images/solution-bg-x2.jpg) 2x); background-image:-o-image-set(url(./images/solution-bg-x1.jpg) 1x,url(./images/solution-bg-x2.jpg) 2x) } .ali-common-header-inner .solution-bg,.ali-common-header-inner .manage-bg { background-position:right bottom; background-repeat:no-repeat; background-color:#fff } .ali-common-header-inner .manage-bg { background-image:url("./images/manage-bg-x1.jpg"); background-image:-webkit-image-set(url(./images/manage-bg-x1.jpg) 1x,url(./images/manage-bg-x2.jpg) 2x); background-image:-moz-image-set(url(./images/manage-bg-x1.jpg) 1x,url(./images/manage-bg-x2.jpg) 2x); background-image:-ms-image-set(url(./images/manage-bg-x1.jpg) 1x,url(./images/manage-bg-x2.jpg) 2x); background-image:-o-image-set(url(./images/manage-bg-x1.jpg) 1x,url(./images/manage-bg-x2.jpg) 2x) } .ali-common-header-inner .animate { border:1px solid #e6e6e6; border-top:0; -webkit-transition:height .1s cubic-bezier(.17,.5,.44,.36); -moz-transition:height .1s cubic-bezier(.17,.5,.44,.36); -o-transition:height .1s cubic-bezier(.17,.5,.44,.36); transition:height .1s cubic-bezier(.17,.5,.44,.36) } .ali-common-header-inner .menu-dropdown .menu-dropdown-sidebar { width:162px; height:auto; padding:19px 10px 15px 21px } .ali-common-header-inner .menu-dropdown-sidebar a { cursor:default } .ali-common-header-inner .menu-dropdown-sidebar a:link,.ali-common-header-inner .menu-dropdown-sidebar a:visited { text-decoration:none; color:#333; display:block; font-size:14px; position:relative; height:32px; line-height:32px } .ali-common-header-inner .menu-dropdown-sidebar a.active,.ali-common-header-inner .menu-dropdown-sidebar a:hover { text-decoration:none; color:#008eb7 } .ali-common-header-inner .menu-dropdown .menu-dropdown-content { background-color:#fff; margin-left:193px; padding:25px 0 0 20px } .ali-common-header-inner .menu-dropdown h3 { font-size:14px } .ali-common-header-inner .menu-dropdown-sidebar .icon { width:5px; height:8px; margin-top:3px; position:absolute; right:0; top:9px; display:inline-block; background:url("./images/sidebar-trangle.png") no-repeat 0 -8px } .ali-common-header-inner .menu-dropdown-sidebar a:hover .icon,.ali-common-header-inner .menu-dropdown-sidebar a.active .icon { background-position:0 0 } .ali-common-header-inner .menu-dropdown-content h5.topic-hd { font-size:14px; color:#999; margin-bottom:6px } .ali-common-header-inner .menu-dropdown-content .desc { color:#999; font-size:12px; width:90% } .ali-common-header-inner .menu-dropdown-content .desc a:link,.ali-common-header-inner .menu-dropdown-content .desc a:visited { color:#666; font-size:12px } .ali-common-header-inner .menu-dropdown-content .desc a:hover { color:#008eb7; text-decoration:underline } .ali-common-header-inner .menu-dropdown-content .desc li { padding-left:14px; position:relative } .ali-common-header-inner .menu-dropdown-content .desc .list-style { width:4px; height:4px; color:#0092c9; margin:0 10px 0 -13px; display:inline-block; *zoom:1; *display:inline; position:absolute; top:1px; -webkit-transform:scale(.75); font-size:9px } .ali-common-header-inner .menu-dropdown-content .desc-li-txt { width:250px; overflow:hidden; display:inline-block } .ali-common-header-inner .menu-dropdown-bd { width:300px; display:inline-block; *zoom:1; *display:inline; display:inline-block; vertical-align:top } .ali-common-header-inner .menu-dropdown-down-item { padding-bottom:16px } .ali-common-header-inner .menu-dropdown-down-item a h4 { color:#333 } .ali-common-header-inner .menu-dropdown-down-item a:hover { text-decoration:none } .ali-common-header-inner .menu-dropdown-down-item a:hover h4 { color:#008eb7; text-decoration:underline } .ali-common-header-inner .menu-dropdown-split-line { border-right:1px solid #f8f8f8; margin-right:22px } .ali-common-header-inner .tpl2 .item-sub-hd { font-size:14px; color:#999; padding-bottom:7px; margin-bottom:18px; border-bottom:1px solid #f2f2f2 } .ali-common-header-inner .tpl2 .menu-dropdown-bd-wrap { overflow:hidden } .ali-common-header-inner .tpl2 .menu-dropdown-bd { width:300px; display:inline-block; *zoom:1; *display:inline; padding-right:40px; overflow:hidden; vertical-align:top } .ali-common-header-inner .tpl2 .product-list { overflow:hidden } .ali-common-header-inner .tpl2 .tpl2-content-ft { margin-bottom:10px; color:#999 } .ali-common-header-inner .tpl2 .desc li { width:340px; display:inline-block; *zoom:1; *display:inline; font-size:12px; margin-bottom:4px; color:#666 } .ali-common-header-inner .tpl2 .menu-dropdown-down-item { display:inline-block; *zoom:1; *display:inline; width:100% } .ali-common-header-inner .tpl2 .item-sub-ft { margin-top:15px } .ali-common-header-inner .tpl2 .item-sub-ft .menu-dropdown-down-item { width:100% } .ali-common-header-inner .tpl2 .item-sub-ft .desc li { width:300px } .ali-common-header-inner .tpl3 .is-new { width:20px; height:10px; display:inline-block; position:absolute; margin-left:2px } .ali-common-header-inner .tpl3 .menu-dropdown-down-item { width:200px; display:inline-block; *zoom:1; *display:inline; margin-right:44px; font-size:12px; vertical-align:top } .ali-common-header-inner .tpl3 .menu-dropdown-down-item.last { margin-right:0 } .ali-common-header-inner .tpl3 .item-sub-hd h4 { border-bottom:1px solid #f2f2f2; padding-bottom:12px; margin-bottom:18px; color:#999 } .ali-common-header-inner .tpl3 .menu-dropdown-down-item a { color:#333; display:inline-block; margin-bottom:15px } .ali-common-header-inner .tpl3 .item-sub-hd .menu-dropdown-down-item h4 a { margin-bottom:0; color:#999 } .ali-common-header-inner .tpl3 .item-sub-hd .menu-dropdown-down-item h4 a:hover { text-decoration:underline; color:#09c } .ali-common-header-inner .tpl3 .domain-regist-item a { width:70px } .ali-common-header-inner .tpl3 .domain-regist-item a:hover { text-decoration:underline; color:#09c } .ali-common-header-inner .tpl3 .domain-exchange-item a,.ali-common-header-inner .tpl3 .other-item a { display:block } .ali-common-header-inner .tpl3 .domain-exchange-item a:hover,.ali-common-header-inner .tpl3 .other-item a:hover { text-decoration:underline; color:#09c } .ali-common-header-inner .tpl3 .item-sub-hd { overflow:hidden } .ali-common-header-inner .tpl3-split-line { border-bottom:1px solid #f2f2f2; margin-bottom:37px; width:470px } .ali-common-header-inner .item-sub-hd .domain-more a:link,.ali-common-header-inner .item-sub-hd .domain-more a:visited { color:#09c; margin-top:5px } .ali-common-header-inner .tpl3 .item-sub-ft { padding-bottom:10px; width:500px } .ali-common-header-inner .tpl3 .item-sub-ft a { margin-bottom:0 } .ali-common-header-inner .tpl3 .item-sub-ft a:hover { text-decoration:none } .ali-common-header-inner .tpl3 .item-sub-ft a:hover h4 { text-decoration:underline; color:#09c } .ali-common-header-inner .tpl3 .item-sub-ft .menu-dropdown-down-item .desc { width:100% } .ali-common-header-inner .module-padding { padding:22px 24px 20px } .ali-common-header-inner .module-wrap { width:360px; margin-right:50px; display:inline-block; *zoom:1; *display:inline; vertical-align:top } .ali-common-header-inner .dev-inner .module-wrap { width:130px; margin-right:15px } .ali-common-header-inner .aliplus-inner .module-wrap { width:160px; margin-right:34px } .ali-common-header-inner .module-hd { font-size:14px; padding-bottom:12px; border-bottom:1px solid #f2f2f2; margin:0 19px 16px 0; color:#999 } .ali-common-header-inner .module-hd a { color:#333 } .ali-common-header-inner .module-hd a:hover { color:#00a2ca; text-decoration:none } .ali-common-header-inner .module-bd a { width:168px; padding:0 0 19px; display:inline-block; font-size:14px; color:#333 } .ali-common-header-inner .module-bd a:hover { color:#09c } .en-module-wrap { vertical-align:top; width:218px; display:inline-block; *zoom:1; *display:inline; border-bottom:1px dashed #d3d3d4; margin:0 38px 20px 0; padding-bottom:14px; height:148px } .en-module-wrap a { display:block; color:#333 } .en-module-wrap a:hover { color:#008eb7; text-decoration:underline } .en-module-wrap.last { margin-right:0 } .en-module-wrap .en-module-hd { color:#999; font-size:14px } .en-module-wrap .en-module-bd { line-height:30px; margin-top:10px; font-size:12px } @media screen and (max-width:1200px) { .ali-common-header-inner .tpl2 .menu-dropdown-bd,.ali-common-header-inner .tpl1 .menu-dropdown-bd { width:212px!important } .en-module-wrap { margin:0 28px 20px 0 } .ali-common-header-inner .en-module-wrap { width:200px!important } .ali-common-header-inner .module-wrap,.ali-common-header-inner .aliplus-inner .module-wrap { margin-right:7px } .ali-common-header-inner .dev-inner .module-wrap { margin-right:15px } .tpl3 .menu-dropdown-down-item.last { margin-right:44px } }