1、CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性:
display
/position
/float
/clear
/visibility
/overflow
(建议display
第一个写,毕竟关系到模式) - 自身属性:
width
/height
/margin
/padding
/border
/background
- 文本属性:
color
/font
/text-decoration
/text-align
/vertical-align
/white-space
/bread-word
- 其他属性(CSS3):
content
/cursor
/border-radius
/box-shadow
/text-shadow
/background: linear-gradient...
2、页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路:
- 必须确定页面的版心(可视区),可通过测量得出;
- 分析页面中的行模块,以及每个行模块中的列模块,其实就是页面布局第一准则;
- 一行中的列模块经常使用浮动布局,先确定每个列的大小之后确定列的位置,其实就是页面布局第二准则;
- 制作HTML结构,我们还是遵循,先有结构,后有样式的原则,结构永远是最重要的
- 先理清布局结构,再写代码尤为重要,这需要多些多积累
3、导航栏注意点
- 实际开发中,不会直接用链接
a
,而是用li
包含链接(li + a
)的做法; li + a
语义更清晰,一看就是有条理的列表项内容;- 如果直接用a,搜索引擎容易辨别为堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名
- 让导航栏一行显示,给
li
添加浮动,因为li
是块级元素,需要一行显示; - nav导航栏可以不给宽度,将来可以继续添加其余文字;
- 因为导航栏里面的文字不一样多,所以最好给链接
a
左右padding
撑开盒子,而不是指定宽度;