DIV CSS网页布局实例：十步学会用CSS建站

(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：

<div id="main-nav"> 
<dl class="hidden"> 
<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt> 
<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt> 
<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt> 
<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt> 
</dl> 
</div>
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>
<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>
<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>
<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>
</dl>
</div>

我们跳一步，先到页脚：

页脚包括两部分：左边的版权,认证和右边的副导航条。
我们先要让副导航条向右浮动，就像之前处理Sidebar和Content关系的一样，需要加入一个新的层(div):

<div id="footer"> 
<div id="altnav"> 
<a href="http://css.jorux.com/wp-admin/post.php#" >About</a> -   
<a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> -   
<a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> -   
<a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -   
<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a> 
</div> 
</div>
<div id="footer">
<div id="altnav">
<a href="http://css.jorux.com/wp-admin/post.php#" >About</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a>

上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] 下一页

复制本页网址和标题，发送给你QQ/Msn的好友一起分享

上一篇:DIV CSS标准制作网页学习之学习DTD的元素

下一篇:用CSS如何控制网页中图片自适应大小？