HTML5 初级布局
<style type="text/css">
body{max-width:1000px; border:4px solid #999; margin:10px auto; text-align:center; font-family:"微软雅黑"; min-height:864px;}
ul{list-style:none; overflow:hidden}
#mainHeard{background:#CCC;color:#09F; padding:20px 0;}
#mainHeard nav{background:#E1E1E1;color:#09F}
#mainHeard nav ul{width:600px; margin:auto; list-style:none; overflow:hidden}
#mainHeard nav ul li{width:150px; float:left;}
#pieceConter{width:690px; padding-bottom:20px; background:pink; color:#666; float:left;}
#pieceConter .pieceConterChildren{width:600px; margin:10px 45px; background:#FFF; color:#C63}
#pieceConter .pieceConterChildren header{background:#F60;color:#FFF}
#pieceConter .pieceConterChildren aside{width:390px; float:left; border:2px solid #060;}
#pieceConter .pieceConterChildren p{width:190px; float:left; margin-left:12px; border:2px solid #060;}
#pieceConter .pieceConterChildren footer{clear:left;background:#09F;color:#FFF; margin-top:100px;}
#sidebar{width:300px; margin-left:10px; float:left; background:#09F;}
#sidebar nav{background:#0CF}
#sidebar a{color:#FFF;}
</style>
<body>
<h2>body</h2>
<header id="mainHeard">
<h2>Header</h2>
<nav>
<h3>Nav</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>Jquery</li>
</ul>
</nav>
</header>
<section id="pieceConter">
<h2>Section</h2>
<article class="pieceConterChildren">
<h2>Article</h2>
<header><h2>Article Header</h2></header>
<aside><h2>Article Aside</h2></aside>
<p>P 元素content........</p>
<footer><h2>Article Footer</h2></footer>
</article>
<article class="pieceConterChildren">
<h2>Article</h2>
<header><h2>Article Header</h2></header>
<aside><h2>Article Aside</h2></aside>
<p>P 元素content........</p>
<footer><h2>Article Footer</h2></footer>
</article>
</section>
<section id="sidebar">
<h2>Section</h2>
<nav>
<h2>Section Nav</h2>
<ul>
<li><a href="2012/04">April 2012</a></li>
<li><a href="2012/03">March 2012</a></li>
<li><a href="2012/02">February 2012</a></li>
<li><a href="2012/01">January 2012</a></li>
</ul>
</nav>
</section>
<footer style="width:1000px;height:60px; background:#666; line-height:60px;color:#FFF; float:left">footer</footer>
8738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
