<响应式布局>2---设计案例

来源：互联网发布：网络博客公司评级编辑：程序博客网时间：2024/06/09 13:55

1.main.html:

<span style="font-size:14px;"><html><head><title>响应式网站布局</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style1.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:

<span style="font-size:14px;">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;}/*以下针对宽度1000px以上的平台，如PC。*/@media screen and (min-width:1580px) {h1 {color:teal;}}/*pad 640--1000px*/@media screen and (min-width:1000px) and (max-width:1550px){h1 {font-size:40px;color:green;}#container {width:600px;}#left {width:100px;}#main {width:490px;margin-left:10px;margin-right:0;}#right {display:none;}}/*手机420--640px*/@media screen and (max-width:1000px) {h1 {font-size:30px;color:red;}#container {width:400px;}#head {line-height:80px;}#left {width:100%;line-height:150px;}#main {width:100%;line-height:400px;margin:10px 0;}#right {width:100%;line-height:150px;}#foot {width:100%;line-height:80px;}}</span>

0 0