一段自适应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; } }

一段自适应的CSS代码的更多相关文章

  1. 将这段美化的css代码

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  2. 自适应的CSS代码片段（常用）

    /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 32 ...

  3. 不容错过的20段CSS代码

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3 ...

  4. 高效的CSS代码(2)

    ——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...

  5. 20 个让你效率更高的 CSS 代码技巧

    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...

  6. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  7. 拥有的50个CSS代码片段(上)

    1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...

  8. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  9. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

随机推荐

  1. Nodejs 中将html转换成pdf文件

    Nodejs 中将html转换成pdf文件,Nodejs Convert html into pdf 1. 下载phantomjs.exe,将该文件放在根目录 2. 编写pdf.js文件(在githu ...

  2. [转][SerialPort]测试用例

    private void Form1_Load(object sender, EventArgs e) { var s = SerialPort.GetPortNames().OrderBy(r =& ...

  3. php正则讲解 及与 js的正则比较

    正则:用于检索字符串的规则: js正则: var reg=/规则/ reg是一个对象,在浏览器下: 所以研究他的属性和方法 属性: global是修饰符,代表全局检索 g ignorecase 忽略大 ...

  4. 为什么我说IPFS社区从卖矿机开始，就是错的

    要回答这个问题,首先要了解去中心化存储项目和传统的区块链项目有什么区别.其中去中心化存储项目包括IPFS,基于IPFS的FileCoin.PPIO.Storj等. 传统区块链项目没有供需问题 首先以比 ...

  5. Java读取Excel并与SqlServer库中的数据比较

    先说说需求.在SQL server数据库中的表里存在一些数据,现在整理的Excel文档中也存在一些数据,现在需要通过根据比较某个字段值(唯一)来判断出,在库中有但excel中没有的数据. 大概的思路就 ...

  6. 2、Redis 底层原理：Cluster 集群部署与详解

    Redis 简介 Redis 提供数据缓存服务,内部数据都存在内存中,所以访问速度非常快. 早期,Redis 单应用服务亦能满足企业的需求.之后,业务量的上升,单机的读写能力满足不了业务的需求,技术上 ...

  7. 【吴恩达课后编程作业】第二周作业 - Logistic回归-识别猫的图片

    1.问题描述 有209张图片作为训练集,50张图片作为测试集,图片中有的是猫的图片,有的不是.每张图片的像素大小为64*64 吴恩达并没有把原始的图片提供给我们 而是把这两个图片集转换成两个.h5文件 ...

  8. tomcat7启动闪退

    今天电脑重装了系统,下载解压tomcat发现startup.bat打开就闪退.不知道咋回事,打开windows命令输入cmd->cd 进入到tomcat的bin目录,输入startup.exe回 ...

  9. Oracle层级询语句connect by 用法详解

    如果表中包含层级数据,那么你就可以使用层级查询从句选择行层级顺序. 1.层级查询从句语法 层级查询从句语法: { CONNECT BY [ NOCYCLE ] condition [AND condi ...

  10. ngnix和负载均衡

    1 准备环境 =====>part1: iptables -F #systemctl disable firewalld #开机默认关闭 #systemctl stop firewalld #立 ...