存档

文章标签 ‘css教程’

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

2007年11月21日 网站建设 604 views
没有评论

复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目，而且不能兼容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-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
<title>步步为营，实战div+css系列教程–</title>
</head>
<style tpye=“text/css”>
<!–
a{color:#349DEF;text-decoration:none;}
a:hover{color:#F1B246;text-decoration: underline}
h2 a {color:#ff0000;}
.t1 h1{color:#ff0000;}

#paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
[xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术：对象前加[xmlns]只被非IE浏览器识别*/
.tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
.tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
.more{float:right;padding:1px;}

#top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象，一定要设定宽度*/
#top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常，涉及到列表与div的关系*/
#top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
#top10 h2{font-size:12px;}
#top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
#top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
#top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
#top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
#top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
#top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
–>
</style>
<body>
<div id=“paihang”>

<div class=“title”>
<span class=“tit_bg”><img src=“tit_bg.gif” /></span>
<span class=“tit_txt”>中国娱乐排行榜</span>
<span class=“more”><img src=“tit_more.gif” [...]

, ,

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

2007年11月21日 网站建设 671 views
没有评论

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

XML/HTML代码

<ul>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>

以上对比效果见图左：

2、针对ul的项目列表符号有以下几种：

CSS代码

ul{list-style-type:none} /*不显示项目符号*/
ul{list-style-type:disc} /*实心圆点，默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/

针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）；

CSS代码

ol{list-style-type:none} /*不显示项目符号*/
ol{list-style-type:decimal} /*阿拉伯数字*/
ol{list-style-type:lower-roman} /*小写罗马数字*/
ol{list-style-type:upper-roman} /*大写罗马数字*/
ol{list-style-type:lower-alpha} /*小写英文字母*/
ol{list-style-type:upper-alpha} /*大写英文字母*/

3、使用图片自定义项目符号

CSS代码

ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}

其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：

CSS代码

ul{list-style-type:none;}/*去掉项目符号*/
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}

4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：

CSS代码

display:block;//将对象显示为块状或叫做盒状，后一个对象换行显示。
display:none;//隐藏，不显示对象；
display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；
display:inline-block;//对象显示为块状，但能呈现内联样式。
display:list-item;//将对象作为列表项显示； [...]

, ,

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

2007年11月21日 网站建设 761 views
没有评论

 以下为下拉式多级菜单样式实现：
已测试好，欢迎下载使用，超简捷的代码！

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" />  
<title>下拉多级菜单-css系列教程</title>  
<script type="text/Javascript"><!–//–><![CDATA[//><!--  
startList = function() {  
        if (document.all&&document.getElementById){  
            navRoot = document.getElementById("nav");  
            for (i=0; i<navRoot.childNodes.length;i++){  
                node =navRoot.childNodes[i];  
                if(node.nodeName=="LI"){  
                  node.onmouseover=function() {  
                        this.className+="over";  
                        }  
                    node.onmouseout=function() {  
                        this.className=this.className.replace("over","");  
                        }  
                    }  
                }  
            }  
        }  
        window.onload=startList;      
    //–><!]]></script>  
<style>  
ul { padding:0; margin:0; list-style:none;}   
li { float:left; width:100px;}   
ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}   
ul li a:hover { background-color:#ddd;}   
li ul { display:none; top:20px;}   
li:hover ul,li.over ul { display:block;}   
</style>  
  
</head>  
<body>  
  
<ul id ="nav">  
    <li><a href="#">设计</a>  
        <ul>  
            <li><a href="#">平面设计</a></li>  
            <li><a href="#">网页设计</a></li>  
            <li><a href="#">动画设计</a></li>  
        </ul>  
    </li>  
    <li><a href="#">程序</a>  
        <ul>  
            <li><a href="#">asp程序</a></li>  
            <li><a href="#">php程序</a></li>  
            <li><a href="#">jsp程序</a></li>  
        </ul>  
    </li>  
    <li><a href="#">维护</a>  
        <ul>  
            <li><a href="#">网站编辑</a></li>  
            <li><a href="#">网站推广</a></li>  
            <li><a href="#">网站优化</a></li>  
        </ul>  
    </li>  
</ul>  
</body>  
</html>  

 
原文地址：http://www.chaojibaby.com/blog/article.asp?id=119  

, ,

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

2007年11月14日 网站建设 1,940 views
没有评论

刚转完超级宝贝的十一篇div+css系列教程，里头的图片大部分自己做了处理，
同时收藏这些文章的目的是为了收集后自己学习。所有权属超级宝贝所有……
本站的目录如下：
一、了解XHTML中的常用选择符
二、如何将CSS应用到网页？
三、认识CSS布局的重要标签——div
四、div的常见布局结构——并列与嵌套
五、div的分栏布局——单列居中显示
六、div的分栏布局——两列固定及自适应列宽
七、两列右列宽度自适应与三列中间列宽自适应
八、两列固定宽度居中与高度自适应
九、利用div的定位制作复杂的页面布局
十、css网站元素设计——横向导航制作
十一、css网站元素设计——纵向导航制作
十二、下拉及多级弹出菜单(超简捷代码)
十三、css网站元素设计-列表元素的使用
十四、复杂的列表布局示例
 
以下是引用超级宝贝的目录：

XML/HTML代码

本人对CSS研究也是只处于摸索阶段，所以想写这样的教程，主要是想理清下学习CSS的思路与流程，以便于下一步更深入地了解，同时以一个初学者的眼光来了解学习。不求大家能从中获益多少，只求更多的网友能给以指点，交流提高。       
相关目录：       
一、了解XHTML中的常用选择符  http://www.chaojibaby.com/blog/article.asp?id=105      
二、如何将CSS应用到网页？  http://www.chaojibaby.com/blog/article.asp?id=106      
三、认识CSS布局的重要标签——div  http://www.chaojibaby.com/blog/article.asp?id=107      
四、div的常见布局结构——并列与嵌套  http://www.chaojibaby.com/blog/article.asp?id=108      
五、div的分栏布局——单列居中显示    http://www.chaojibaby.com/blog/article.asp?id=110      
六、div的分栏布局——两列固定及自适应列宽   http://www.chaojibaby.com/blog/article.asp?id=111      
七、两列右列宽度自适应与三列中间列宽自适应   http://www.chaojibaby.com/blog/article.asp?id=112      
八、两列固定宽度居中与高度自适应   http://www.chaojibaby.com/blog/article.asp?id=113      
九、利用div的定位制作复杂的页面布局  http://www.chaojibaby.com/blog/article.asp?id=114      
十、css网站元素设计——横向导航制作 http://www.chaojibaby.com/blog/article.asp?id=115      
十一、css网站元素设计——纵向导航制作  http://www.chaojibaby.com/blog/article.asp?id=116      
十二、下拉及多级弹出菜单(超简捷代码) http://www.chaojibaby.com/blog/article.asp?id=119  
十三、css网站元素设计-列表元素的使用  http://www.chaojibaby.com/blog/article.asp?id=120  
十四、复杂的列表布局示例   http://www.chaojibaby.com/blog/article.asp?id=121   

, ,

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

2007年11月14日 网站建设 588 views
没有评论

纵向导航多常见于电子商务网站的一侧，便于用户查找各个分类的商品。
先来看一段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″ />
<title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type = “text/css”>
<!–
#category{
width:100px;
border-color:#ff0000 #ff9900;/*此处边框的设定采用了简写的形式，此处单独设定边框颜色，两个颜色同样是表示上下，与右左。*/
border-style:solid;  /*此处单独设定边框样式*/
border-width:0px 1px 1px;  /*此处单独设定边框宽度，三个值分别表示：上为0px,右左分别是1px ,下为1px.*/
}
#category h1,#category h2{   /*此处把两级标题相同属性写在一起，节约代码*/
margin:0px;
padding:4px;
font-size:12px;
font-weight:bold;
}
#category h1{
border-top:1px solid #c5c6c4; /*把不同的属性单独设定。*/
}
#category h2{
font-weight:normal;  /*前面设定了粗体，此度用正常值覆盖。缺少这一句则按默认值加粗。*/
padding-left:10px;  /*用此值覆盖上面设定的值。*/
}
–>
</style>
</head>
<body>
<div id =“category”> [...]

, ,

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

2007年11月14日 网站建设 543 views
没有评论

导航在网站中起着举足轻重的作用，常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码：

CSS代码

<ul id=“nav”>
<li><a href=“#”>首页</a></li>
<li><a href=“#”>心路</a></li>
<li><a href=“#”>历程</a></li>
<li><a href=“#”>设计</a></li>
<li><a href=“#”>代码</a></li>
<li><a href=“#”>优化</a></li>
</ul>

这里我们引入了一个新的元素ul。ul是CSS中使用相当广泛的一种元素，主要用来描述列表型内容。每一个<ul></ul>相当于一个列表块，块中的每一条列表数据用<li></li>来描述，下图是一个不加样式的ul实现的样式效果：
如图：导航对比

显然，ul默认加上了圆点序号，而且自上而下排列。实际上导航可以理解为导航列表，每一个列表数据就可以看做是一个频道,当然也可以用二层嵌套div来实现导航代码结构，但相对于ul来说，div显然过于复杂，而且我们之前也说过，div主要是用来大范围的样式布局。而类似于导航的块状型区域则主要交给ul来处理。
下面我们来看为其实现样式的css代码：

XML/HTML代码

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title></title>
<style type=“text/css”>
<!–
ul{list-style-type:none;}     /*去除列表项前端的项目符号*/
ul li{float:left;}  /*使列表项不再遵循默认的自上而下样式，而类似于div的向左浮动属性，使右侧对象紧贴左侧最终形成横向排列样式*/
ul li a{display:block;/*块状显示，在第三节讲div的时候曾提过，此处的作用就是把a链接对象由一段文本改为块状对象，使其具备div的一些特性，从而实现内外边距，边框背景等属性*/
margin-left:10px;    /*左外边距*/
width:60px;          /*块宽度*/
height:16px;         /*块高度*/
padding-top:4px;     /*上内边距*/
text-align:center;   /*文本距中显示*/
background-color:#cecece;    /*块背景色*/
color:#009900;               /*字体颜色*/
font-size:12px;              /*字体大小*/
text-decoration:none;}       /*字体装饰无下划线*/
ul li a:hover{color:#fff;            /*伪类：指向链接时的字体颜色*/
background-color:#33ccff;    /*伪类：指向链接时的背景色*/
text-decoration:underline;   /*伪类：指向链接时的字体装饰*/
}
–>
</style>
</head>

<body>
<ul [...]

, ,

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

2007年11月14日 网站建设 566 views
没有评论

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

这是三九健康网一个频道的页面，原本是很长的页面，但为了说明问题，取了个完整布局样式，而省去了中间的内容。
我们可以把它看做是一个居中的页面布局，这样要实现整体居中，就需要一个div作为主要容器，我们把这个div命名为container.
CSS样式为：

CSS代码

#container{margin:0px auto;}

这样就实现了整体居中显示。
我们再来看在这个主容器里面分别都有哪些部分：
#header头部：位于顶端，显示网站LOGO及其它相关元素。
#mainmenu主菜单
#banner头部横幅广告
#menu频道菜单
#primary主内容区
#footer脚部区：显示底部功能链接和版权信息。
这些区域从上至下依次排列形成了纵向布局模式。它们之间是并列的，不需要要指定任何样式便可以实现从上到下的叠放。
而在主内容区，又加入了嵌套,即嵌套了两个div区域，左边为：pri_left,右边为pri_right.这两个如何实现左右分栏的，在前面的第六节教程里有详细的说明。在此再罗嗦下，也就是使用了float浮动属性。
css样式为：

CSS代码

#pri_left,#pri_right{float:left;width:75%;}
#pri_left{width:20%;}

此处代码注意：在属性的书写上我们采用了简化的方式应用了群组标签#pri_left,#pri_right{},在参数的书写上，我们为他们二者都定义了width:75%.节约了代码量，但紧接着在下面的属性中单独为左栏定义了width:20%,此时的左栏宽就会覆盖掉上一句的width:75%.从而实现了二者宽度的单独定义。
下面我们来定义这种样式，为了能够显示区域，我们只为他们加上宽度高度及边框样式。

XML/HTML代码

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title></title>
<style type=“text/css”>
<!–
#container{margin:0px auto;border:1px dashed #d55;width:98%;}
#header{border:1px solid #d55;height:48px;margin-top:0px;}
#mainmenu{border:1px solid #d55;height:36px;margin-top:2px;}
#banner{border:1px solid #d55;height:60px;margin-top:2px;}
#menu{border:1px solid #d55;height:36px;margin-top:2px;}
#primary{border:1px solid #d55;margin-top:2px;}
#pri_left,#pri_right{float:left;width:78%;border:1px solid #d55;margin:0px 2px;height:300px;}
#pri_left{width:20%;}
.kuang1{float:left;border:1px dashed #d55;width:40%;height:100px;}
.kuang2{float:left;border:1px dashed #d55;width:29%;height:100px;}
.kuang3{float:left;border:1px dashed #d55;width:69%;height:48px;}
.kuang4{float:left;border:1px dashed #d55;width:29%;height:48px;}
.kuang5{float:left;border:1px dashed #d55;width:99%;height:50px;}
#footer{border:1px solid #d55;height:48px;margin-top:2px;}
–>
</style>
</head>

<body>
<div id=“container”>
<div id=“header”>头部：位于顶端，显示网站LOGO及其它相关元素。</div>
<div id=“mainmenu”>主菜单</div>
<div id=“banner”>头部横幅广告</div>
<div id=“menu”>频道菜单</div>
<div id=“primary”>
<div id=“pri_left”>div为pri_left</div>
<div id=“pri_right”>
<div [...]

, ,

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

2007年11月14日 网站建设 666 views
没有评论

要实现两列固定宽度居中的布局，其实很简单，在第四节及第六节教程中已经提到，我们只要把两个固定列丢在一个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-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
<style type=“text/css”>
<!–
#layout{margin:0px auto;width:304px;}
#left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
–>
</style>
</head>
<body>
<div id=“layout”>
<div id=“left”>我是layout对象下的左栏</div>
<div id=“right”>我是layout对象下的左栏</div>
</div>
</body>
</html>

如下图上所示：

在很多情况下我们讨论对象横向排列的次数比较多，包括宽度的自适应。但有些时候也会用到高度的自适应问题，其实在实现高度自适应的过程中，往往会遇到很多不正常的现象，这与浏览器的解析有关，我们直接看如下css代码：

CSS代码

html,body{margin:0px;height:100%;}
#layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}

如上图下部分看实现效果!
注意：问题的关键在于第一句代码：

CSS代码

html,body{margin:0px;height:100%;}

我们同时设定了html和body的高度均为100%,这是实现高度自适应的关键。一个对象的高度可以用百分比来显示，但要取决于它的父对象的高度而#layout放在了body中，只有我们对其父对象设置了100%的高度时，子对象的相对高度才生效。
单独为body设置了100%的高度，在IE下可以实现高度自适应，但在Firefox下仍不能实现，所以也为html设置了100%的高度。这是浏览器解析的问题，加上这一句为的就是能让其在两个浏览器下都正常显示。
原文地址：http://www.chaojibaby.com/blog/article.asp?id=113

, ,

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

2007年11月14日 网站建设 754 views
没有评论

在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说：
一、两列右列宽度自适应
我们只需要设定左列为固定宽度，右列不设值，并且不浮动即可。代码如下：

CSS代码

#left,rightright{
background-color:#eeeeee;
border:1px solid #33ccff;
height:400px;
}
#left{width:180px;
float:left;
}

注：上面的写法一定要掌握住，利用群组标签把相同属性及参数写在一起，然后把不同的单独写出来。
这样左边将呈现出180px的宽度。而右侧则根据浏览器窗口大小来自动适应。
尝试把左栏宽度改为580px ，看有如何变化。
如图对比：一栏固定与一栏自适应的对比

这种布局方式常被应用到博客风格中。
二、三列中间列自适应：
这种样式细心的朋友会发现在第六节教程中已经提到这样的代码：

CSS代码

#left,#right{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
#left{float:left;width:180px}
#center{border:1px dashed #33ccff;} /*为了查看效果，只加了边框样式，便于观察*/
#right{float:rightright;width:200px;}

单单这样设置了左栏向左浮动，右栏向右浮动，是不够的，因为中间栏没有设定样式，它装根据左栏向左浮动，而在其右侧显示，而没有设定其宽度，所以将占据了所有的右边宽度。而右栏则根据block块状及向右浮动的属性在下一列右侧显示,如图上：

这样的布局显然不能满足我们的要求，这里我们就要引入除了浮动之外的另一个重要的属性：position绝对定位。
position:static;        /*默认值，无特殊定位,页面中的每一个对象默认都是这种属性 */
absolute;      /*对象从文档流中拖出，使用top,right,bottom,left等从最近的一个最有定位价值的父对象中绝对定位。 */
relative;      /*对象不可层叠，使用top,right,bottom,left等在正常文档流中偏移位置。 */
注意：某一对象使用了position:absolute;它将从本质上与其它对象中分离出来，它的定位不会影其它对象，也不会被其它对象的浮动定位所影响，可以这样理解，使用了此属性，对象就像一个图层一样浮在了网页之上。
明白了这个，我们再对上面的代码做一改进：

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″ />
<style type=“text/css”>
<!–
#left,#right,#center{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
#left{width:180px;
position:absolute;top:0px;left:0px;}  /*此处让左栏绝对定位，距父对象上为0px,距父对象左为0px */
#right{width:200px;}
position:absolute;top:0px;right:0px;} /*此处让左栏绝对定位，距父对象上为0px,距父对象右为0px */
#center{margin-left:186px;margin-right:204px;}/*固定了左右栏的位置，我们再来设定此对象距左距右的宽度，从而调整其大小 */
–>
</style>
</head>
<body>
<div id =“left”>我的ID为left</div> [...]

, ,

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

2007年11月14日 网站建设 668 views
没有评论

上一节教程讲的是单列固定宽度及自适应宽度，这一节我们讲的是两列的固定宽度与其中一列自适应宽度，这也是最常用的布局结构。
一、两列固定宽度：
两列固定宽度自然要用到两个div.如下XHTML代码：

XML/HTML代码

<div id=“left”>我的ID是left</div>
<div id=“right”>我的ID是right</div>

下面我们来为它设定统一的大小及其它样式：

CSS代码

#left,#right
{width:240px,
height:180px;
background-color:#cecece;
border:1px dashed #33ccff;
}

以上的css代码用到我们第一节讲到的群组选择符#left,#right，使它们二者都具备后面的样式。
由于div里没有加入内容，为了能看出它的效果，在属性里加入了宽为1像素，颜色为#33ccff的实线框。以后的讲解我们仍将彩此方法来显示其它结构效果。
看下效果：

图中并没有达到我们的两列的效果，其实前面第三节也有提到，它将会按照block（块状结构）来显示在下一列。要真正的实现左右排列，就要加入新的属性——float（浮动属性）。
float浮动属性是div+css布局中的一个非常重要的属性。大部分的div布局都是通过float的控制来实现的。具体参数如下：
float:none用于设置是否浮动。left对象向左浮动。right对象向右浮动。
在此为了实现它们的分列显示，就要加入浮动属性改良为：

CSS代码

#left,#right
{width:240px,
height:180px;
background-color:#cecece;
border:1px dashed #33ccff;
}
#left{float:left;}
#right{float:left;}

加入了以上代码，就表示#left向左浮动。而#right也向左浮动，它就会紧贴着#left并列显示。也如上图所示。
根据上面的讲解，我们来逐步实现下面的效果：
1、如果按下面的浮动修改会变成什么？

CSS代码

#left{float:left}
#right{float:right}

#left{float:right}
#right{float:left}

#left{float:right}
#right{float:right}

看其中的三个小图,之所以把几个上下列显示的块对象变成了左右显示的分列效果，完全依赖于float的浮动属性。从页实现多种样式的组合方法。
二、两列自适应列宽
这个样式实现起来比较简单，之前在第五节教程中也提到要实现自适应列宽就是变固定的数值为百分比。与其唯一的区别在于加了浮动的属性。代码如下：

CSS代码

#left,#right{
float:left,
height:200px;
background-color:#f6f6f6;
border:1px solid #ff9900;
}
#left{width:20%}
#right{width:80%} [...]

, ,