十四、复杂的列表布局示例
复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目,而且不能兼容IE和FireFox。这个问题困扰了我几个晚上,今天终于搞定了。在IE和FireFox中测试几乎一模一样。
源码下载:
附件:复杂列表演示.zip
复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目,而且不能兼容IE和FireFox。这个问题困扰了我几个晚上,今天终于搞定了。在IE和FireFox中测试几乎一模一样。
源码下载:
附件:复杂列表演示.zip
1、列表形式由于展示形式整齐直观,在网站设计中占有很大的比重。早期的列表都是由表格实现的,在代码上过于繁杂,设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。
看XHTML代码很简单:
导航在网站中起着举足轻重的作用,常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局,不仅代码量大,后期维护起来也不方便,而且也没有实现表现与内容的分离,显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码:
要实现两列固定宽度居中的布局,其实很简单,在第四节及第六节教程中已经提到,我们只要把两个固定列丢在一个div对象中去,实现嵌套就可以了,修改后的码如下:
XML/HTML代码
在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说:
一、两列右列宽度自适应
我们只需要设定左列为固定宽度,右列不设值,并且不浮动即可。代码如下:
上一节教程讲的是单列固定宽度及自适应宽度,这一节我们讲的是两列的固定宽度与其中一列自适应宽度,这也是最常用的布局结构。
一、两列固定宽度:
两列固定宽度自然要用到两个div.如下XHTML代码:
Recent Comments