这本书大致的翻了一遍,个人觉得书中所涉及的知识面较广,就书中所涉及的知识,我来阐述一下我觉得有意思的地方。
一、小知识
1、link 里的 media 是用来指定输出设备,all表示在所有显示,handheld表示在移动端显示,screen表示在普通pc端,print表示打印机输出
2、一般,选择器相同的情况下,越在后面的样式越优先,以下情况除外:
id 选择器 100分
class 选择器 10分
.a,.b,.c{} 群组选择器 1分
* 全局选择器 0分
后代选择器
3、块级元素:address blockquote d div dl fieldset form h1-h6 menu noscript ol p pre table ul
内联元素:a abbr acronym b bdo big br button cite code dfn em i frame img input kbd label map object q ruby samp select small apn strong sub sup textarea tt var
4、单位用em的时候,相对的是母元素的尺寸,起始状态以body为基准
5、限制文本的最大最小宽度和高度:min-width,max-width,min-height,max-height。。。。。。text-align:justify强制左右对齐
可见行高:1.5em 150%
二、易于理解的版面要遵守以下几点:
第一视点的意识 —— 根据屏幕分辨率
滚动条的技巧 —— 尽量别有滚动条,或者可视区域与下半部分有衔接,让用户知道并看到下半部分的内容
使用其他环境进行验证 —— 别的浏览器
信息的整理 —— 信息归类
实现移动的射击 —— 人眼睛的习惯走势
配置的平衡 —— 保证页面不会失去平衡,不要一边倒,颜色的深浅也决定了页面的重量,粗大文本也比细小文本重
留白的设计 —— 有空隙感,通气,可保持平衡管,段落行间距也要统一
三、版面构成:
页面分割-竖栏 —— PS、AI里的网格,一般把网页分成9或12个竖栏,黄金比例1:1.618≈5:8
网站统一
页眉与页脚统一
链接颜色的统一,CSS事先定好样式,还有一些性质用途相同的按钮形状也要统一
留白的统一,要考虑板块间的留白要统一,可设置通用的样式加进所有html里
便于理解的导航
全局导航,第一视点,醒目
局部导航,可用作下拉菜单
补充导航
四、有代表性的排版模式:
2竖栏排版
3竖栏排版 —— 1:3:1
倒L字形排版 —— 常用语深层次或多页面的网站
水平型排版
垂直I字形排版,纤细感
网格型排版
图像为主型:直接,有冲击力,图像旁边其他的元素要设计的简单,可以突出图像
重视留白的排版,给人平静的感觉
五、速记属性的使用
margin:0; 四边都是0
margin:10px 20px; 上下是10,左右是20
margin:10px 20px 0; 上是10,左右是20,下是0
margin:10px 20px 0 30px; 上是10,右是20,下是0,左是30
六、需要掌握的CSS特别处理
使用css的特殊处理,但是这不是标准规范,最好不用
IE6 的代表CSS特别处理是“星号处理”和“下划线处理”,(IE6 MUST DIE,以后不需要考虑了)
星号处理是在选择器之前添加 *html,下划线处理是 _height:1%;
例如:
div#wrapper{
width:900px;
margin:0 auto; 在IE5、IE6中这个不能实现居中
}
*html body{
texr-align:center; 所以要在body里设置来达到目的的错误
}
*html div#wrapper{
text-align:left; body了设置了居中,所有子元素就都居中了,所以要用#wrapper还原左对齐
}
只适用于IE7的CSS特别处理是在选择器之前加 “ *:first-child+html ”
div#col{
margin:5px 0 0;
}
ie7和ie6怎么写呢?
*:first-child+html div#col,*html div#col{
margin:10px 0 0 ;
}上面的这两个选择器写到一起是不对滴,要分开写,
如下:
*:first-child+html div#col{
margin:10px 0 0;
}
*html div#col{
margin:10px 0 0;
}
七、内部元素超出整体的解决办法
方法一:after是可以经过指定的元素内容之后追加内容的伪元素,
用content属性来指定内容,(before)
.col01:after{
content:"."; 点是在div为col01之后生成的内容,可以使别的什么都行
display:block; 让这个点变成块
height:0; 高度为0,必须设置
visibility:hidden; 可见设为隐藏
clear:left; 清除左浮动
}
方法二:在div里最后的地方加个空的span标签,css里display:block;clear:left但是一般html里不放空标签,所以不推荐
方法三:div class=clearfix,css里.clearfix{overflow:auto;_height:1%}