<响应式布局>3---设计案例样式文件的另一种引入方式
2016-03-29 21:31
721 查看
1.main.html:
2.style.css:
3.pc.css:
4.pad.css:
5.phone.css:
<html> <head> <title>响应式网站布局</title> <meta charset="utf-8"> <> <link rel="stylesheet" type="text/css" href="style1.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width:1580px)" href="pc.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width:1000px) and (max-width:1550px)" href="pad.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-width:1000px)" href="phone.css" /> </head> <body> <section id="container"> <header id="head"><h1>header</h1></header> <aside id="left"><h1>left</h1></aside> <section id="main"><h1>main</h1></section> <aside id="right"><h1>right</h1></aside> <footer id="foot"><h1>footer</h1></footer> </section> </body> </html></span>
2.style.css:
body { padding:0; margin:0; border:0; } h1 { font-size:50px; color:gold; text-align:center; } #container { width:1280px; margin:0 auto; background:red; } #head { width:100%; line-height:100px; float:left; margin:10px 0; background:#000; } #left { width:200px; line-height:580px; float:left; background:#000; } #main { width:860px; line-height:580px; float:left; margin:0 10px; background:#000; } #right { width:200px; line-height:580px; float:right; background:#000; } #foot { width:100%; line-height:100px; float:left; margin:10px 0; background:#000; } </span><pre name="code" class="css"><span style="font-size:14px;">/*以下针对宽度1550px以上的平台,如PC。*/ @media screen and (min-width:1550px) { <span style="white-space:pre"> </span> } </span>/*pad 1000--1550px*/@media screen and (min-width:1000px) and (max-width:1550px){}/*手机420--1000px*/@media screen and (max-width:1000px) {}
3.pc.css:
/*以下针对宽度1000px以上的平台,如PC。*/ h1 { color:teal; } </span>
4.pad.css:
h1 { font-size:40px; color:green; } #container { width:600px; } #left { width:100px; } #main { width:490px; margin-left:10px; margin-right:0; } #right { display:none; }</span>
5.phone.css:
h1 { font-size:30px; color:red; } #container { width:400px; } #head { line-height:80px; } #left { display:none; } #main { width:100%; line-height:400px; margin:10px 0; } #right { display:none; } #foot { width:100%; line-height:80px; }</span>
相关文章推荐
- css中clip:rect矩形剪裁功能
- CSS---cursor鼠标属性
- js,css 文件延迟加载
- CSS后代选择器可能的错误认识
- css3 transform IE 滤镜转换
- css 伪类冒号前空格
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
- checkBox 自定义样式背景
- PHP实现可自定义样式的分页类
- Css - 文本溢出处理
- css3制作3d翻转效果
- css中单位px和em,rem的区别
- 当transition遇上display
- CSS:IE,Chrome,Firefox兼容性和CSS Hack(转载)
- 个人常用的css属性
- 11款最轻量级的CSS框架
- div+css常用属性参数
- 记一次CSS弹出动画的Bug
- css笔记
- css中的盒子模型