继续添加代码--建一个DIV容器来装所有的图层.
<body> <div id="page"> <!--Insert the layout here--> </div> <!--End of "page"--></body> |
头部代码:
<div id="header"> <div id="headerimg"> Page title </div> <div id="top_nav"> <ul> <li>Home</li> <li>About</li> </ul> </div> </div> <!--End of "header"--> |
主内容层代码:
<div id="content"> <div class="blogcontent"> <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small> </div> <!--End of "post title"--> </div> <div class="entry"> <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0" </a> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. <a href="#" class="more-link">Read more »</a> </div> <!--End of "post"--> <ul> <li><a href="#">Category 2</a> (1)</li> </li> <li class="archives"> </li> |
footer代码:
<br style="clear: both;" /> <div id="footer"> <div class="column2"> <li><a href="#" title="About">About</a></li> |
Step6--测试
当我们把代码编好了,下一步要做是测试在浏览器中的效果,在这里我用的是firefox的最高版本.效果如图: