2个CSS在线处理网站
可以在不影响页面显示效果的前提下减少你的CSS代码,我测试了一个css，还真有效果,优化掉近10%。
[ 链接 http://flumpcakes.co.uk/css/optimiser/ ]
这个则可以把CSS紧凑化
[ 链接 http://www.cssdrive.com/index.php/main/csscompressor ]
存档
文章标签 ‘css’
完美兼容IE6/IE7/FF的通用方法
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
CSS代码
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
CSS代码
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
XML/HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
CSS代码
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width [...]
步步为营，实战div+css系列教程
刚转完超级宝贝的十一篇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网站元素设计——纵向导航制作
纵向导航多常见于电子商务网站的一侧，便于用户查找各个分类的商品。
先来看一段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网站元素设计——横向导航制作
导航在网站中起着举足轻重的作用，常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合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的定位制作复杂的页面布局
既然是复杂的布局自然用到较多的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 [...]
八、两列固定宽度居中与高度自适应
要实现两列固定宽度居中的布局，其实很简单，在第四节及第六节教程中已经提到，我们只要把两个固定列丢在一个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
七、两列右列宽度自适应与三列中间列宽自适应
在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的分栏布局——两列固定及自适应列宽
上一节教程讲的是单列固定宽度及自适应宽度，这一节我们讲的是两列的固定宽度与其中一列自适应宽度，这也是最常用的布局结构。
一、两列固定宽度：
两列固定宽度自然要用到两个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%} [...]
五、div的分栏布局——单列居中显示
上一节我们也提到了div的左右分栏布局，但没有实现真正意义上的分栏。这一节，我们就来结合css样式实现分栏。
在讲解分栏之前，有必要对单一列的布局做一个了解。
如代码：
XML/HTML代码
<html>
<head>
<title></title>
<style type=“text/css”>
#layout{
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id =“layout”>单一列的固定宽度</div>
</body>
</html>
在css中我们分别实现了id为layout的div的背景色，边框的线粗、线样式、线颜色，以及div的宽和高。
看如图效果：
上图中实现的是固定的宽和高，如果想实现自适应宽度，我们可以用百分数来控制。即把其中的width值改为width:N%，这样就会根据浏览器当前宽度自动调整。
设定了div的总宽度，但它会按默认的方式居左显示。那么怎么实现它的固定列宽和自适应列宽都能够居中显示呢？这就用到它的外边距属性：
margin:0px auto;
margin属性表示对象的外边距，分别为：上边距、右边距、下边距、左边距（即按照顺时针顺序）。
当书写一个参数时，表示四个边距均为此参数。
当只书写两个参数时，第一个参数表示：上下边距，第二个参数表示左右边距。
当书写三个参数时，第一个表示上边距，第二个表示左右边距，第三个表示下边距。
margin属性除了支持数值外，还支持auto值，表示让浏览器自动判断边距。
这样margin:0px auto;就表示上下边距均为0px,左右边距根据浏览器自动判断一致，从而实现了居中效果。
试一试在上面代码中加入此句后，为：
XML/HTML代码
<html>
<head>
<title></title>
<style type=“text/css”>
#layout{
margin:0px auto;
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id =“layout”>单一列的固定宽度</div>
</body>
</html>
预览效果图为：图
注意：以上代码在FireFox中测试正常，但在IE6中测试以上代码，一定要在顶部加入以下声明，用以定义XHTML文档类型。否则不能呈现居中样式,当然这个问题在IE7中已经不会再出现了。代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
小知识：一个标准的XHTML必须以doctype标签作为开始。doctype用于定义文档类型。文档类型分为三种：分别为Transitional类型,Strict类型,Frameset类型。
Transitional是一种过渡类型，使用过渡类型的XHTML网页，浏览器对它的解析比较宽松。允许使用HTML4.01中的标签，但必须符合XHTML语法。
Strict是一种严格类型。浏览器对此类型的XHTML的解析相对严格。不允许使用任何表现样式的标识和属性，如在元素中直接使用背景色bgcolor属性。
代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd”>
Frameset框架型网页，如果网页使用了框架结构，有必要在文档中声明。代码如下：
XML/HTML代码
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd”> [...]
Recent Comments