1.布局之道
- 固定布局:以px为单位进行布局
- 流性布局:以%为单位进行布局,加min-width、max-width
- 弹性布局:以em为单位代替px。px是相对于显示器屏幕而言的,而em是相对于当前对象内文本的字体尺寸而言。
1.1基本布局样式属性:
1.单位:1em=16px, 12px = 0.75em , 10px = 0.625em
2.浮动: Align属性、clear属性
3.定位:position,除边界外,一般选择relative。除非所有元素精确定位。
1.2基于网格系统的CSS框架布局
以960像素为例:划分为12列,每列间距20px。
1.3流体布局
将像素转化为100%比。
2.样式就是设计
这一章简介CSS样式,记下一些知识点,不在详述。
1.规划样式文件:global.css(全局样式)、layout.css(结构布局样式)、color.css(色彩样式)、text.css(文字样式)和reset.css(重置框架中的样式)。
2.加上头注释。
3.优先权:
多规则之间的优先级,使用一个4位数字来表示权重,每个选择器的权重决定用哪些样式。
- 元素的内联样式属性:加1,0,0,0
- 每个ID选择器(#id):加0,1,0,0
- 每个class选择器(.class)、属性选择器([attr=”-“])及伪类(:hover),加0,0,1,0
- 每个元素或伪元素(:firstchild)等,加0,0,0,1
- 其他选择器(如全局选择器*,子选择器>),加0,0,0,0
- !important优先级最高
最后逐位相加数字串,得到最终的特异值,按照从左到右的顺序逐位比较。
比如:
body h2 {color:#fff};//由两个普通元素组成,符合第4条规则,相加为0002
h2{color:#ccc};//只有一个普通元素组成,符合第4条规则,特意值为0001
//采用第一个规则解析,0002>0001
h2.category{color:#fff};//由一个普通元素和一个class选择器组成(3,4),相加为0011
h2{color:#ccc};//第4条,特异值0001
//比较结果0011>0001,采用第一个规则
3.动态交互之美
1.JavaScript代码只出现在.js文件中
2.不在JavaScript中定义css样式
3.HTML元素中不出现onclick等元素,所有行为用绑定的方式来实现
4.设计理念的碰撞与融合
1.PNG透明色应用
2.大菜单:不要分太多级
3.Tab选项卡:导航的最佳实践
4.模态窗口:
- 图像、视频预览
- 注册、登录
- 帮助、提示
5.unobtrusive的web开发:关注web开发的可维护性、可访问性、可搜索性。
- 使用更有语义的HTML标签
- 只将
<table>
用语表格式的数据 - 避免使用无意义的div、span
- 所以CSS非必须,没有CSS,页面也可以正常访问
- 尽量重用class
- 将css放在外部.css文件中或者style标签中
- js文件写在外部文件中
- 不适用onclick内联方式绑定事件、也不使用JavaScript:void(0)之类的代码