HTML5 初级布局

HTML5与CSS3布局实战

最新推荐文章于 2025-11-24 09:30:00 发布

原创最新推荐文章于 2025-11-24 09:30:00 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

html5 专栏收录该内容

1 篇文章

订阅专栏

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>