《精通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
相关文档：
选择器 语法 描述 示例 标签选择器 E{ .....} 以文档元素作为选择符 td{font-size:14px;
......} ID选择器 #ID{...} 以文档元素的惟一� ......
碰到好些问题，Firefox下面看着很完美，ie6下面就惨不忍睹，还好，一点点慢慢解决了。一些东西摘录一下，以后也许用得到。
DIV+CSS解决IE6，IE7，IE8，FF兼容问题
那我来说说吧，做了几年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的没去研究过
1.ie8下兼容问题� ......
CSS（Cascading Style Sheets）层叠样式表。
·传统HTML页面排版和显示效果设置方面的问题。
·引入CSS后：Html标记专门用于定义网页的内容，而是用CSS来设置其效果。
CSS分类：
内嵌样式（Inline Style）：以属性形式直接在HTML标记中给出，用于设置该标记所定义的信息效果。例如：
<body style ......
1.区别IE和非IE浏览器
#tip {
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
【示例】：
#tip {
background:blue; /*Firefox 背景变蓝色*/
background:r ......
jQuery, MooTools, Prototype 等优秀的
JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等
Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS& ......
