SpringSide开发实战（三）：漫谈CSS和页面布局 - 编程入门网

作者佚名技术来源 NET编程浏览发布时间 2012-06-17

有div嵌套。尽量减少div嵌套的有力武器是理解div的意义，div代表division，是部分的意思，也就是说只有在确实没有标签能够作为一个部分的根元素的时候才需要div。在上面的例子中，菜单条就没有使用 div。菜单条是使用列表实现的，因为列表的都包含在ul标签中，因此没有必要使用div。下面是上图的html代码：

<body> <div id="header"> 　 <div id="logo">此处显示 id "logo" 的内容</div> 　 <div id="appendix">此处显示 id "appendix" 的内容</div> 　 <div id="advertisment">此处显示 id "advertisment" 的内容</div> </div> <ul id="menu"> 　 <li>菜单项一</li> 　 <li>菜单项二</li> 　 <li>菜单项三</li> 　 <li class="lastMenuItem">最后一个菜单项</li> </ul> <div id="loginView">此处显示 id "loginView" 的内容</div> <div id="catalog">此处显示 id "catalog" 的内容</div> <div id="search">此处显示 id "search" 的内容</div> <div id="newTopics">此处显示 id "newTopics" 的内容</div> <div id="newReply">此处显示 id "newReply" 的内容</div> <div id="hotTopics">此处显示 id "hotTopics" 的内容</div> <div id="statistics">此处显示 id "statistics" 的内容</div> <div id="hotGroups">此处显示 id "hotGroups" 的内容</div> <div id="hotUsers">此处显示 id "hotUsers" 的内容</div> <div id="footer">此处显示 id "footer" 的内容</div> </body>

是不是很简洁？

而关于页面美化和布局的内容，全部转移到了CSS中。先来说说菜单项，菜单项是使用列表实现的，而列表常规的显示样式是下面这样的：

SpringSide开发实战（三）：漫谈CSS和页面布局 - 编程入门网

SpringSide开发实战（三）：漫谈CSS和页面布局(7)

时间:2011-05-07 blogjava 海边沫沫

怎么样才能让它们显示到一行呢？那就是我前面讲到的float属性。我们给id为menu的ul 定义如下样式，来显示边框：

#menu {}{ 　　 border: 1px solid #0F54C3; 　　 padding:5px; 　　 margin:0px; 　　 width:804px; 　　 margin:1px 0px; 　　 height: 12px; }

为了避免前面讲到的float元素跑到边框之外，我这里没有使用clear，而是将menu的 height属性定义为12px，和页面上的字体等高，而菜单只有一行，因此不会跑到边框之外。 menu中的每一个菜单项都是一个li，我们可以通过#menu li { }来定义它的样式，这种方式叫做后代选择器，充分使用这种选择器，是避免使用过多的类的有力武器，从前面的html代码中可以看出，我只对最后一个菜单项定义了类，因为我不想最后一个菜单后面还跟一个小竖线，菜单项之间的小竖线是通过定义li的右边框样式做到的，其css代码如下： #menu li {}{

　　float:left; 　　 padding-left:10px; 　　 padding-right:10px; 　　 border-right-width: 1px; 　　 border-right-style: solid; 　　 border-right-color: #0F54C3; } #menu .lastMenuItem {}{ 　　 border-right-style:none; }

对于下面那么多的框框，除了#netTopics我使用绝对定位把它摆到了右边作为主要内容区之外，其它的都是顺着文档流

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 使用Eclipse和Java SE 6创建独立Web Services应用程序，第2部分 - 编程入门网下一篇: Java开发2.0: 针对Google App Engine的Gaelyk - 编程入门网

关于SpringSide开发实战（三）：漫谈CSS和页面布局 - 编程入门网的所有评论

随机推荐