前端入门视频笔记 CSS3（五） P190-197

PS切图

图层切图：选择图片的那个图层，右击-快速导出为PNG；

                  如果一个图片由多个图层组成，就先合并图层，然后再导出。

 

切片切图：用切片工具选择想导出的图片，右击-存储为web...

 

PS插件切图：Cutterman插件

 

 

CSS属性的书写顺序

• 布局定位属性

       display（建议第一个）/ position / float / clear / visibility / overflow

• 自身属性

       width / height / padding / margin / border / background

• 文本属性

       color / font / text-decoration / text-align / vertical-align / white-space / break-word

• 其他属性（CSS）

       content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient...

 

页面布局的整体思路

1. 确定页面的版心（可视区的宽度）；
2. 分析页面中的行模块，以及每个行模块中的列模块（第一准则）；
3. 每行中的列模块浮动布局，先确认列的大小，在确认列的位置（第二准则）；
4. 先编写HTML结构，再写样式。

 

实际开发中，导航栏 nav 常用 li 包含链接 (li+a) 的做法。

 

9.10