《无懈可击的Web设计》章节试读

《无懈可击的Web设计》的笔记-第249页

第2章（接上）
给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符)
第3章
不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。
当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。
运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。
一个浮动的组件必须要有明确的宽度值
background: url(img) repeat-x top left. 背景横向平铺，从（左，上）角开始。
tips:
避免在HTML中写不必要的图片代码，而通过CSS设置背景图片来引入。
当一个容器包含的内容量未知时，可以使用两张背景图片以便容器能够扩展和收缩。
第4章 浮动对象
发现一个特点，每章开头就会吐槽一个网站的设计。
<dl>中的<dt>和<dd>，<dd>自动缩进.
<letter-spacing>设置字母间距 <line-height>设置行间距
除了是用clear的方法，还可以将元素的外容器也设置为浮动，以便随着浮动对象的大小而伸展。
第5章
用图片设置圆角边框。
第6章
为了确保在没有图片的情况下依然可读，在任何可能使用图片的地方设置同样的背景颜色。没有CSS的状态下，要保持网站的可读性就很困难了。
第7章
表格有关
<table>的cellspacing = '0'或者 CSS中的border-collapse属性来消除表格单元各间距。
positon属性：relative将元素相当原来的位置做调整，absolute将元素根据父容器的坐标来做绝对调整。
第8章 流动的布局
"gutters"指的是文本栏之间的间距，在流动的栏宽设计中，gutter的设置就变得很困难。
有两种解决办法：用margin把宽度设为百分比的形式，或者在元素内添加一个<div>来设定margin 和 padding
常用的布局
.wrapper{
margin: 0 auto;
min-width: 980px;
max-width: 1200px;
background: url(/img/bg.png) repeat-y 70% 0;
}
.header{}
.content{
float: left;
width: 70%;
}
.content div{
padding-right: 40px;
}
.sidebar{
float: right;
width: 30%;
}
.sidebar div{
padding: 20px;
}
.footer{
clear:both;
}
第9章
构造一个完整的网站
用伪类:after在容器后插入一个字符（content），用来清除浮动。dl:after{
content: ".";
display: block;
clear: both;
visibility: bidden;
height: 0;
}

《无懈可击的Web设计》的笔记-第32页

1.灵活的文字
为保证页面文字大小的统一性，在body中设置文字大小。
font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。
2.导航栏
常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。