html5 css3 新元素简单页面布局
【html 代码】
<!Doctype html>
<html>
<head>
<meta charset="gb2312" >
<title>HMTL5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>脆梨网</h1>
<h4>邪恶漫画专家!</h4>
<h2>邪恶小漫画</h2>
</header>
<div id="container">
<nav>
<h3>导航链接</h3>
<a href="http://cui.li">邪恶漫画</a>
<a href="http://cui.li/comic/asia">亚洲有码</a>
<a href="http://cui.li/comic/hot">店长推荐</a>
<a href="http://cui.li/about"> 关于</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>脆梨网之“脆梨”文化来源：水浒传潘金莲西门庆一折戏中，卖梨小孩郓哥和武大郎在集市上一块吆喝：炊饼，脆梨~，炊饼，脆梨~。</p>
<p>诚然，这颗小小的脆梨承袭了潘金莲西门庆的放荡淫邪，容纳了武大郎郓哥的蛋疼和青涩。成为此文学文化亮点的象征。这也正是脆梨网的文化之源，网站之魂。</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>脆梨网专注于邪恶小漫画，邪恶漫画，妖妖小精色系军团漫画，并为此奋斗终生。脆梨网让您在繁忙的一天你鸡冻一下！</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>右边栏</h3>
<p>脆梨网之“脆梨”文化来源：水浒传潘金莲西门庆一折戏中，卖梨小孩郓哥和武大郎在集市上一块吆喝：炊饼，脆梨~，炊饼，脆梨~。</p>
<p>脆梨网专注于邪恶小漫画，并为此奋斗终生。繁忙的一天你需要鸡冻一下。</p>
</aside>
<footer>
<h2>Copyright @ 2012 脆梨网</h2>
</footer>
</div>
</body>
</html>
【css 代码】
body {
background-color:#CCCCCC;
font-family:微软雅黑;
margin:0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header{
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2{
margin:0px;
}
h1{
font-size:72px;
margin:0px;
}
h2{
font-size:24px;
margin:0px;
text-align:center;
color:#fff;
}
h3{
font-size:18px;
margin:0px;
text-align:center;
color:#F47D31;
}
h4{
color:#F47D31;
background-color:#fff;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-box-shadow:2px 2px 20px #888;
-moz-transform:rotate(-45deg);
position:absolute;
padding:0px 150px;
top:40px;
left:150px;
text-align:center;
}
nav{
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited{
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
}
nav a:hover{
color:white;
background-color:#F47D31;
}
nav h3{
margin:15px;
color:white;
}
#container{
background-color:#888;
}
section{
display:block;
width:50%;
float:left;
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
article header{
-webkit-border-radius:10px;
-moz-border-radius:10;
border-radius:10px;
padding:5px;
}
article footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article h1{
font-size:18px;
}
aside{
display:block;
width:25%;
float:left;
}
aside h3{
margin:15px;
color:white;
}
aside p{
margin:15px;
color:white;
font-weight:bold;
}
footer{
clear:both;
display:block;
background-color:#F47D31;
color:#FFFFFF;
text-align:center;
padding:15px;
}
footer h2{
font-size:14px;
color:white;
}
a{
color:#F47D31;
}
a:hover{
text-decoration:underline;
}
【效果显示】
