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

十四、复杂的列表布局示例
复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目,而且不能兼容IE和FireFox。这个问题困扰了我几个晚上,今天终于搞定了。在IE和FireFox中测试几乎一模一样。 源码下载: 附件:复杂列表演示.zip 先看效果图:这是模仿闪客帝国的作品爬行榜。 实现代码: XML/HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...

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

十三、css网站元素设计-列表元素的使用
1、列表形式由于展示形式整齐直观,在网站设计中占有很大的比重。早期的列表都是由表格实现的,在代码上过于繁杂,设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。 看XHTML代码很简单: XML/HTML代码 <ul> <li>布局概述</li> <li>页面元素入门</li> <li>高级技巧</li> <li>高级技巧</li> </ul> <ol&...

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

十二、下拉及多级弹出菜单(超简捷代码)
 以下为下拉式多级菜单样式实现: 已测试好,欢迎下载使用,超简捷的代码! XML/HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>&n...

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

步步为营,实战div+css系列教程
刚转完超级宝贝的十一篇div+css系列教程,里头的图片大部分自己做了处理, 同时收藏这些文章的目的是为了收集后自己学习。所有权属超级宝贝所有…… 本站的目录如下: 一、了解XHTML中的常用选择符 二、如何将CSS应用到网页? 三、认识CSS布局的重要标签——div 四、div的常见布局结构——并列与嵌套 五、div的分栏布局——单列居中显示 六、div的分栏布局&mdas...

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

十一、css网站元素设计——纵向导航制作
纵向导航多常见于电子商务网站的一侧,便于用户查找各个分类的商品。 先来看一段XHTML代码: XML/HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <...

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

十、css网站元素设计——横向导航制作
导航在网站中起着举足轻重的作用,常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。 传统的导航是表格式布局,不仅代码量大,后期维护起来也不方便,而且也没有实现表现与内容的分离,显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。 先看代码: CSS代码 <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#"&...

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

九、利用div的定位制作复杂的页面布局
既然是复杂的布局自然用到较多的div以及并列与嵌套。这就要我们在为它们命名的时候遵从一定的规定,以便于可读性。 下面先来看一张布局图: 这是三九健康网一个频道的页面,原本是很长的页面,但为了说明问题,取了个完整布局样式,而省去了中间的内容。 我们可以把它看做是一个居中的页面布局,这样要实现整体居中,就需要一个div作为主要容器,我们把这个div命名为container. CSS样式为: CSS代码 #co...

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

八、两列固定宽度居中与高度自适应
要实现两列固定宽度居中的布局,其实很简单,在第四节及第六节教程中已经提到,我们只要把两个固定列丢在一个div对象中去,实现嵌套就可以了,修改后的码如下: XML/HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi...

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

七、两列右列宽度自适应与三列中间列宽自适应
在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说: 一、两列右列宽度自适应 我们只需要设定左列为固定宽度,右列不设值,并且不浮动即可。代码如下: CSS代码 #left,rightright{ background-color:#eeeeee; border:1px solid #33ccff; height:400px; } #left{width:180px; float:left; } 注:上面的写法一定要掌握住,利用群组标签把相同属性...

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

六、div的分栏布局——两列固定及自适应列宽
上一节教程讲的是单列固定宽度及自适应宽度,这一节我们讲的是两列的固定宽度与其中一列自适应宽度,这也是最常用的布局结构。 一、两列固定宽度: 两列固定宽度自然要用到两个div.如下XHTML代码: XML/HTML代码 <div id="left">我的ID是left</div> <div id="right">我的ID是right</div> 下面我们来为它设定统一的大小及其它样式: CSS代码 #left,#right {width:240px, ...
Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录