《精通CSS高级WEB标准解决方案》第七章 布局
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第七章 布局
所有CSS布局技术都依赖于三个基本概念：定位、浮动和空白边操纵
7.1 让设计居中[code]
<body>
<div id='wrapper'>
</div>
</body>
/*最明了的居中方案，可惜IE6不支持*/
#wrapper{
width:720px;
margin:0 auto;
}
/*利用Ie对text-align的理解BUG解决IE6支持问题*/
body{
text-algin:center;
min-width:760px;/*如果窗口宽度小于760px就不再自适应缩小*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*也可以采用这种方法,只需定义wrapper一个元素*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 固定宽度的布局[code]
/*这是一个非常常见的两列布局*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'>
...
</div>
<div id='footer'>
...
</div>
</div>
/*两列布局的CSS设定很简单*/
#content{
width:520px;
float:right;
}
#mainNav{
width:180px;
float:left;
}
#footer{
clear:both;
}
/*让文字与容器边缘保持距离*/
#mainNav{
padding-top:20px;
padding-bottom:20px;
}
#mainNav li{
padding-left:20px;
padding-right:20px;
}
#content h1,#content h2,#content p{
padding-right:20px;
}
/*三列布局，可以在右侧content中再添加一栏*/
<div id='content'>
<div id='mainContent'>
......
</div>
<div id='secondaryContent'>
...
</div>
</div>
/*只要一个左对齐，另一个右对齐就可以了*/
#mainContent{
width:320px;
float:left;
}
#secondaryContent{
width:180px;
float:right;
}
[/code]流体布局[code]
/*布局宽度根据窗口大小自适应*/
#w
相关文档：
1、CSS风格网站，将下面这段代码添加到网站css文件最顶端。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
或者：
在css文件的body中加入filter:gray：
body {filter:gray}
2、未启用CSS风格网站，在网页或者模板的HTML代码和之间插入以下代码：
<style>
html{filter:pro ......
CSS优先级包含四个级别（文内选择器，ID选择器，Class选择器，元素选择器）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下：
* 页面中直接设置style,加1,0,0,0
* 每个ID选择器(如 #id),加0,1,0,0
* 每个Class选择器(如 .class)、每个属性选择器(如 [attribute=])、每个 ......
原文:http://www.52css.com/article.asp?id=1026
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.
1.div的垂直居中问题
vertical-align:middle;
将行距增加� ......
我在第九区 上发表了这个系列的笔记，并上传了原作电子书，今天有空，转一下过来。
第一章、基础知识
1.1设计代码的结构
设计代码时应该使用有意义的标记，比如，xHTML里包含很多有意义的元素，如h1、ul、strong、thead等等，应用使用所有意义合适的元素；当现有元素不足以描述页面内容时，可以用id或是class来赋予它们� ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第四章、对应链接样式
4.1 简单的链接样式[code]
/*所有链接红色*/
a{color:red;}
/*未访问链接蓝色，已访问红色*/
a:link{color:blue;}
a:visited{color:green}
/*鼠标悬停时链接红色*/
a:hover,active{color:red;}
/*平时不显示下� ......
