存档

文章标签 ‘css教程’

十四、复杂的列表布局示例

2007年11月21日 网站建设 419 views

复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目,而且不能兼容IE和FireFox。这个问题困扰了我几个晚上,今天终于搞定了。在IE和FireFox中测试几乎一模一样。

源码下载:

附件:复杂列表演示.zip

阅读全文——共3498字

, ,

十三、css网站元素设计-列表元素的使用

2007年11月21日 网站建设 452 views

1、列表形式由于展示形式整齐直观,在网站设计中占有很大的比重。早期的列表都是由表格实现的,在代码上过于繁杂,设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。

看XHTML代码很简单:

阅读全文——共2263字

, ,

十二、下拉及多级弹出菜单(超简捷代码)

2007年11月21日 网站建设 480 views

 以下为下拉式多级菜单样式实现:

已测试好,欢迎下载使用,超简捷的代码!

阅读全文——共1495字

, ,

步步为营,实战div+css系列教程

2007年11月14日 网站建设 1,677 views

刚转完超级宝贝的十一篇div+css系列教程,里头的图片大部分自己做了处理,

同时收藏这些文章的目的是为了收集后自己学习。所有权属超级宝贝所有……

本站的目录如下:

阅读全文——共1567字

, ,

十一、css网站元素设计——纵向导航制作

2007年11月14日 网站建设 373 views

纵向导航多常见于电子商务网站的一侧,便于用户查找各个分类的商品。

先来看一段XHTML代码:

阅读全文——共3674字

, ,

十、css网站元素设计——横向导航制作

2007年11月14日 网站建设 345 views

导航在网站中起着举足轻重的作用,常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。

传统的导航是表格式布局,不仅代码量大,后期维护起来也不方便,而且也没有实现表现与内容的分离,显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。

先看代码:

阅读全文——共3277字

, ,

九、利用div的定位制作复杂的页面布局

2007年11月14日 网站建设 338 views

既然是复杂的布局自然用到较多的div以及并列与嵌套。这就要我们在为它们命名的时候遵从一定的规定,以便于可读性。

下面先来看一张布局图:

阅读全文——共3002字

, ,

八、两列固定宽度居中与高度自适应

2007年11月14日 网站建设 440 views

要实现两列固定宽度居中的布局,其实很简单,在第四节及第六节教程中已经提到,我们只要把两个固定列丢在一个div对象中去,实现嵌套就可以了,修改后的码如下:

XML/HTML代码

阅读全文——共1179字

, ,

七、两列右列宽度自适应与三列中间列宽自适应

2007年11月14日 网站建设 411 views

在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说:

一、两列右列宽度自适应

我们只需要设定左列为固定宽度,右列不设值,并且不浮动即可。代码如下:

阅读全文——共2020字

, ,

六、div的分栏布局——两列固定及自适应列宽

2007年11月14日 网站建设 410 views

上一节教程讲的是单列固定宽度及自适应宽度,这一节我们讲的是两列的固定宽度与其中一列自适应宽度,这也是最常用的布局结构。

一、两列固定宽度:

两列固定宽度自然要用到两个div.如下XHTML代码:

阅读全文——共1615字

, ,