一段自适应HTML5的CSS代码，该代码在陕西特产使用过，手机端效果还好，就是PC端看起来没那么大气，比较窄屏
* { transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; } html, body { font-size:14px; background:#fff; width:100%; margin:0px; padding:0px; font-family: "Microsoft YaHei", Helvetica Neue, Tahoma, Arial, "微软雅黑", "宋体", "黑体"; } img { border:0px; } ul, li, p { margin:0px; padding:0px; } a { text-decoration: none; } ul, li { list-style-type:none; } input, button, select, textarea, select, option { outline:none; } select, option, textarea { resize:none; -webkit-appearance: none; padding:0; margin:0; font-weight:normal; } input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] { -webkit-appearance: none; padding:0; margin:0; font-weight:normal; } .container { position:relative; width:1200px; margin:0px auto; } .container:after { content: "020"; display: block; height: 0; clear: both; visibility:hidden; } .mainTitle { width:295px; margin:0 auto; line-height:70px; color:#666; font-size:40px; text-align:center; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; } .seach { position:relative; margin-top:40px; width:300px; height:30px; background:#fff; } .seach .seachText { width:260px; color:#999999; font-size:12px; padding:0 0 0 6px; line-height:1; margin:0; border:0; height:30px; } .seach .btn { cursor:pointer; position:absolute; top:0; right:0; width:30px; height:30px; text-align:center; line-height:30px; background:#474747; } .seach .btn { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .seach .btn:hover { background:#000; } .seach .btn img { vertical-align:middle; } .vedioHide { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background:url(../images/blackbg.png); z-index:4; } .vedioContent { display:none; position:fixed; top:50%; left:50%; width:650px; height:450px; margin:-260px 0 0 -335px; z-index:5; background:#fff; padding:20px 20px 50px 20px; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -o-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { position:absolute; bottom:18px; right:24px; cursor:pointer; } .header { position:fixed; width:100%; height:120px; background:#fff; z-index:5; border-bottom:1px solid #e0e0e0; } .header .container { height:100%; } .header .headerLogo { position:absolute; top:32px; left:60px; width:283px; } .header .nav .navTop { position:absolute; top:0px; display:none; height:4px; background:#7e308e; } .header .nav .navTop { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav { position:absolute; top:0px; right:0px; width:63%; height:120px; } .header .nav .child { position:relative; float:left; width:10%; height:120px; line-height:120px; text-align:center; color:#666; } .header .nav .child.navChildSearch { line-height:20px !important; } .header .nav .child:hover .title { color:#7D2F8D; } .header .nav .child .title { font-size:16px; color:#666; } .header .nav .child .title { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav .child.on .title { color:#7D2F8D; } .header .nav .child .childContent { display:none; position:absolute; top:120px; width:100%; } .header .nav .child .childContent .childContentLi { background:url(../images/navchildbg.png); color:#666; font-size:14px; height:38px; line-height:38px; border-bottom:1px solid #c6c5c4; -webkit-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -ms-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); -o-box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); box-shadow: 0px 2px 2px 0px rgba(125,125,125,0.2); } .header .nav .child .childContent .childContentLi:hover { background:#81418a; color:#fff; } .header .nav .child .language { display:inline-block; *display:inline; *zoom:1; height:16px; line-height:16px; padding:0 8px; font-size:16px; color:#666; } .header .nav .child .language:hover { color:#7D2F8D; } .header .nav .child .language.cn { border-right:1px solid #ccc; } .header .nav .child .language.on { color:#7D2F8D; } .header .nav .child .seachIcon { cursor:pointer; } .header .list { position:relative; background:#363839; z-index:6; } .header .list .container { padding:50px 0; display:none; } .header .list .content { width:492px; } .header .list .listMTitle { color:#fff; font-size:18px; line-height:24px; padding-bottom:24px; } .header .list .listTitle { position:relative; width:100%; } .header .list .listTitle:after { content: "020"; display: block; height: 0; clear: both; visibility:hidden; } .header .list .listTitle .title { border-bottom:1px solid #999999; line-height:36px; color:#B9B9B9; font-size:14px; font-family:Arial, Helvetica, sans-serif; } .header .list .listTitle .title a { color:#B9B9B9; font-size:14px; } .header .list .listTitle .title img { margin-right:12px; } .header .list .listTitle .title .pointer { cursor:pointer; position:absolute; right:0px; top:16px; width:11px; height:11px; } .header .list .listTitle .title .pointer .sub { position:absolute; left:0px; top:5px; width:11px; height:1px; background:#999; } .header .list .listTitle .title .pointer .sub.sub2 { transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg); } .header .list .listTitle .title .pointer .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .listTitle .title .pointer.on .sub.sub2 { transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .header .list .listTitle .listContent { display:none; width:94%; float:right; } .header .list .addBtn { z-index:5; cursor:pointer; position:absolute; bottom:-35px; right:0; width:35px; height:35px; background:url(../images/addicon.png) no-repeat; } .header .list .addBtn .sub { position:absolute; width:10px; height:2px; background:#fff; } .header .list .addBtn .sub.sub1 { top:12px; left:22px; } .header .list .addBtn .sub.sub2 { top:12px; left:22px; transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg); } .header .list .addBtn .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .addBtn.on .sub.sub2 { transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .header .searchContent { display:none; position:absolute; bottom:-80px; right:0px; padding:25px; background-color: #f2efef; border-bottom:1px solid #dcdadb; border-left:1px solid #dcdadb; } .header .searchContent .seach { margin:0; } .wapNavBtn { display:none; position:absolute; top:38px; right:32px; cursor:pointer; } .wapLanguage { display:none; position:absolute; top:35px; right:120px; } .wapLanguage .language { padding:0 14px; color:#999999; font-size:28px; line-height:28px; display:inline-block; *display:inline; *zoom:1; } .wapLanguage .language.on { color:#7D2F8D; } .wapLanguage .language.cn { border-right:3px solid #bababa; } .wapNavPointer { display:none; position:absolute; top:3px; right:3px; cursor:pointer; } .crumbs { padding-top:120px; position:relative; height:55px; line-height:55px; background:url(../images/banner.jpg) repeat-x; background-position:center bottom; border-bottom:1px solid #e0e0e0; } .crumbs .title { float:left; color:#333333; font-size:20px; font-family:""微软雅黑""; } .crumbs .childs { float:right; color:#666; font-size:14px; font-family:"Hiragino Sans GB"; } .crumbs .childs a { color:#666; } .crumbs .childs span { margin:0 6px; } .main { padding:40px 0 90px 0; } .main .maxTitle { position:relative; line-height:34px; } .main .maxTitle span { position:relative; z-index:1; padding-right:18px; background:#fff; color:#7D2F8D; font-size:30px; } .main .maxTitle .sub { position:absolute; top:18px; width:100%; height:1px; width:100%; background:#d6d6d6; } .main .top { display:none; position:fixed; right:50px; bottom:300px; z-index:1; width:60px; height:60px; background:#d4d4d4; line-height:60px; text-align:center; cursor:pointer; } .main .top { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .main .top:hover { background:#717373; } .main .top img { vertical-align:middle; } .footer { height:262px; } .footer .title { color:#dadada; font-size:16px; padding-top:40px; } .footer .head { height:222px; background:#717373; } .footer .head .left { position:absolute; top:0px; left:100px; width:300px; } .footer .head .right { position:absolute; top:0px; right:0px; width:344px; } .footer .head .right .content { margin-top:40px; } .footer .head .right .content img { margin-right:6px; } .footer .head .right .content img { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .footer .head .right .content img:hover { transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); -webkit-transform:scale(1.1); } .footer .foot { height:40px; background:#474747; line-height:40px; text-align:center; color:#b7b7b7; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-family:""微软雅黑""; } .footer .foot a { color:#b7b7b7; } @media (max-width: 639px) { .container { width:93.75%; } .mainTitle { width:150px; line-height:35px; font-size:20px; } .seach { margin-top:19px; width:150px; height:21px; } .seach .seachText { width:125px; font-size:12px; padding:0 0 0 5px; line-height:21px; height: 20px; } .seach .btn { width:22px; height:22px; line-height:22px; } .vedioContent { width:300px; height:210px; margin:-130px 0 0 -160px; padding:10px 10px 20px 10px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { bottom:5px; right:10px; } .header { height:50px !important; } .header .headerLogo { top:13px !important; left:16px; width:56px; } .header .nav .navTop { display:none !important; } .header .nav { display:none; top:50px; right:0px; width:100%; height:auto !important; background:#fff; padding-bottom:10px; } .header .nav .child { float:none; width:90%; text-align:left; margin:0 auto; color:#333333; background-color: #f9f9f9; border-left:1px solid #dadada; border-right:1px solid #dadada; border-bottom:1px solid #dadada; height:auto !important; line-height: 35px !important; } .header .nav .child:nth-child(2) { border-top:1px solid #dadada; } .header .nav .child .title { font-size:12px; color:#666; padding:0 2%; display: inherit; } .header .nav .child .childContent { display:none; position:relative; top:0px !important; width:100%; } .header .nav .child .childContent .childContentLi { padding:0 4%; color:#666; font-size:12px; height:35px; line-height:35px; border-top:1px solid #dadada; border-bottom:0px; } .header .nav .navChildLanguage { display:none; } .header .nav .navChildSearch { display:none; } .header .list { display:none !important; } .header .searchContent { display:none !important; } .wapNavPointer { display:block; top:3px; right:3px; } .wapNavBtn { display:block; top:19px; right:16px; width:24px; } .wapLanguage { display:block; top:17px; right:50px; } .wapLanguage .language { padding:0 2px; font-size:14px; line-height:14px; } .wapLanguage .language.cn { border-right:1px solid #bababa; } .crumbs { padding-top:50px !important; height:30px; line-height:30px; } .crumbs .title { font-size:12px; } .crumbs .childs { display:none; } .main { padding:20px 0 45px 0; } .main .maxTitle { line-height:20px; } .main .maxTitle span { padding-right:8px; font-size:18px; } .main .maxTitle .sub { top:10px; } .footer { height:auto; } .footer .title { font-size:12px; padding-top:10px; line-height:17px; } .footer .head { height:95px; } .footer .head .left { position:absolute; top:0px; left:0px; width:150px; } .footer .head .right { width:130px; } .footer .head .right .content { margin-top:16px; } .footer .head .right .content img { margin-right:3px; height:14px; } .footer .foot { height:auto; line-height:14px; font-size:12px; padding:8px 0; } .footer .foot p { width:80%; margin:0 auto; } } @media (min-width: 640px) and (max-width:1023px ) { .container { width:600px; } .mainTitle { width:248px; line-height:50px; font-size:25px; } .seach { margin-top:17px; width:245px; height:33px; } .seach .seachText { width:235px; font-size:16px; padding:0 0 0 10px; line-height:33px; } .seach .btn { width:33px; height:33px; line-height:33px; } .vedioContent { width:600px; height:420px; margin:-260px 0 0 -320px; padding:20px 20px 50px 20px; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -o-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; } .vedioContent iframe { width:100% !important; height:100% !important; } .vedioContent .vedioClose { position:absolute; bottom:10px; right:20px; cursor:pointer; } .header { height:73px !important; } .header .headerLogo { top:23px !important; left:31px; width:94px; } .header .nav .navTop { display:none !important; } .header .nav { display:none; top:73px; right:0px; width:100%; height:auto !important; background:#fff; padding-bottom:20px; } .header .nav .child { float:none; width:90%; text-align:left; margin:0 auto; color:#333333; background-color: #f9f9f9; border-left:1px solid #dadada; border-right:1px solid #dadada; border-bottom:1px solid #dadada; height:auto !important; line-height: 35px !important; } .header .nav .child:nth-child(2) { border-top:1px solid #dadada; } .header .nav .child .title { font-size:12px; color:#666; padding:0 2%; display: inherit; } .header .nav .child .childContent { display:none; position:relative; top:0px !important; width:100%; } .header .nav .child .childContent .childContentLi { padding:0 4%; color:#666; font-size:12px; height:35px; line-height:35px; border-top:1px solid #dadada; border-bottom:0px; } .header .nav .navChildLanguage { display:none; } .header .nav .navChildSearch { display:none; } .header .list { display:none !important; } .header .searchContent { display:none !important; } .wapNavPointer { display:block; top:3px; right:3px; } .wapNavBtn { display:block; top:29px; right:33px; width:32px; } .wapLanguage { display:block; top:29px; right:120px; } .wapLanguage .language { padding:0 14px; font-size:18px; line-height:18px; } .wapLanguage .language.cn { border-right:3px solid #bababa; } .crumbs { padding-top:73px !important; height:55px; line-height:55px; } .crumbs .title { font-size:20px; } .crumbs .childs { font-size:14px; } .crumbs .childs span { margin:0 6px; } .main { padding:40px 0 90px 0; } .main .maxTitle { line-height:34px; } .main .maxTitle span { padding-right:18px; font-size:28px; } .main .maxTitle .sub { top:18px; } .footer { height:auto; } .footer .title { font-size:16px; padding-top:18px; line-height:28px; } .footer .head { height:140px; } .footer .head .left { position:absolute; top:0px; left:0px; width:300px; } .footer .head .right { width:130px; } .footer .head .right .content { margin-top:17px; } .footer .head .right .content img { margin-right:6px; } .footer .foot { height:auto; line-height:16px; font-size:14px; padding:11px 0; } .footer .foot p { width:70%; margin:0 auto; } } @media (min-width: 1024px) and (max-width:1199px ) { .container { width:980px; } .mainTitle { width:295px; line-height:56px; font-size:36px; } .header { height:80px !important; } .header .headerLogo { top:16px !important; left:60px; width:133px; } .header .nav .navTop { height:2px; } .header .nav { height:80px !important; } .header .nav .child { height:80px !important; line-height:80px !important; } .header .nav .child .title { font-size:12px; } .header .nav .child .childContent { top:80px !important; } .header .nav .child .childContent .childContentLi { font-size:12px; height:30px; line-height:30px; } .header .nav .child .language { height:12px; line-height:12px; padding:0 4px; font-size:12px; } .header .nav .child .seachIcon { width:14px; margin-top: 33px !important; } .header .list .container { padding:40px 0; } .header .list .content { width:492px; } .header .list .listMTitle { font-size:16px; line-height:20px; padding-bottom:10px; } .header .list .listTitle .title { line-height:24px; font-size:12px; } .header .list .listTitle .title a { font-size:12px; } .header .list .listTitle .title img { margin-right:12px; } .header .list .listTitle .title .pointer { top:6px; } .crumbs { padding-top:80px !important; } } @media (min-width: 1200px) and (max-width:1439px ) { } @media (min-width: 1440px) and (max-width:1920px ) { } /*animate*/ @keyframes rightOpacityShow { 0% { transform: translateX(-80px); opacity:0; } 80% { transform: translateX(20px); } 100% { transform:translateX(0); opacity:1; } } @-moz-keyframes rotateYOpacityAn { 0% { -moz-transform: translateX(-80px); opacity:0; } 80% { -moz-transform: translateX(20px); } 100% { -moz-transform:translateX(0); opacity:1; } } @-webkit-keyframes rotateYOpacityAn { 0% { -webkit-transform: translateX(-80px); opacity:0; } 80% { -webkit-transform: translateX(20px); } 100% { -webkit-transform:translateX(0); opacity:1; } } @-o-keyframes rotateYOpacityAn { 0% { -o-transform: translateX(-80px); opacity:0; } 80% { -o-transform: translateX(20px); } 100% { -o-transform:translateX(0); opacity:1; } }
原文地址：https://www.cnblogs.com/blogst/p/10740399.html
时间： 2024-08-30 06:54:54