[HTML] 纯文本查看 复制代码 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="author" content="" />
<meta name="keyword" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="mmx.ico?nv=1&v=2" type="image/x-icon" />
<link rel="bookmark" href="mmx.ico"/>
<style type="text/css">
/*
这里设定的高度只是为了本页面的显示效果，
设宽不设高
设高不设宽
可利用JS缓冲效果进行进一步操作。
css样式可分离到css文件，
利用link标签配合media进行加载
详情请参考w3c.school手册....
*/
body,h2{
margin: 0px;
padding: 0px;
}
#main div,header,aside,footer{
background: #333;
}
#left,#right2{
margin: 5px 0px;
}
h2{
text-align: center;
}
section#container{
margin: 0 auto;
width: 80%;
}
footer,header{
width: 100%;
float: left;
line-height: 60px;
}
#left{
float: left;
width: 20%;
}
#main{
float: left;
width: 60%;
}
#right2{
float: left;
width: 20%;
}
@media screen and (min-width:1000px){
h2{
color: #ffc000;
font-size: 50px;
text-shadow: 0px 0px 50px #ffd000;
}
#right1{
display: none;
}
#main div{
margin: 0px 5px;
}
#left,#main,#right2{
line-height: 500px;
margin: 5px 0px;
}
}
@media screen and (min-width:640px) and (max-width:999px){
h2{
color: #f0f;
font-size: 30px;
}
#main div,header,aside,footer{
background: #ffc000;
}
#left{
float: left;
width: 49%;
line-height: 250px;
}
#right1{
float: right;
width: 49%;
line-height: 250px;
margin: 5px 0px;
}
#main{
float: right;
width: 100%;
line-height: 300px;
margin-bottom: 5px;
}
#right2{
display: none
}
}
@media screen and (max-width:639px){
h2{
color: #333;
font-size: 20px;
text-shadow: 0px 0px 10px #353;
}
#main div,header,aside,footer{
background: #f0f;
}
#left{
width: 100%;
line-height: 150px;
}
#right1{
display: none;
}
#main{
width: 100%;
line-height: 250px;
}
#right2{
width: 100%;
line-height: 150px;
}
}
</style>
</head>
<body>
<section id="container">
<header>
<h2>
Header
</h2>
</header>
<aside id="left">
<h2>
Left
</h2>
</aside>
<aside id="right1">
<h2>
Right
</h2>
</aside>
<section id="main">
<div>
<h2>
Main
</h2>
</div>
</section>
<aside id="right2">
<h2>
Right
</h2>
</aside>
<footer>
<h2>
Footer
</h2>
</footer>
</section>
</body>
</html>
| 
收藏
淘帖
踩
