《精通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兼容性一直是大家头疼的问题，现在说说如何区分这几个浏览器，IE6、IE7、IE8和FF，IE8均指IE8正式版,版本号:8.0.6001.18702。
以颜色为例来说如何区分这几个浏览器：
.csshack{
color:#f00; &nbs ......
为了提高网站的加载速度，有一个很重要的手段就是在用户浏览过程中的上游网站做一个文件的预加载。预加载文件一般有两种常用的方式：xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块)，然后使用动态插入节点方法加载的文件都会在加载后立即执行，javascript的执行一方面会� ......
我在第九区 上发表了这个系列的笔记，并上传了原作电子书，今天有空，转一下过来。
第一章、基础知识
1.1设计代码的结构
设计代码时应该使用有意义的标记，比如，xHTML里包含很多有意义的元素，如h1、ul、strong、thead等等，应用使用所有意义合适的元素；当现有元素不足以描述页面内容时，可以用id或是class来赋予它们� ......
【简 介】
为方便站点哀悼,特提供css滤镜代码,以表哀悼.以下为全站CSS代码
为方便站点哀悼,特提供css滤镜代码,以表哀悼.以下为全站CSS代码.
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装.建议全国站长动起来.为� ......
