pink老师HTML5+CSS3学习笔记 | DAY13

目录

1、常见的图片格式

2、CSS 属性书写顺序(重点)

3、页面布局整体思路

---

1、常见的图片格式

①jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的；

②gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果；实际经常用于一些图片小动画效果；

③png图像格式：是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，选择png格式；

④PSD图像格式：PSD各式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿；对前端人员来说，最大的优点时可以直接从上面复制文字，获得图片，还可以测量大小和距离；

2、CSS 属性书写顺序(重点)

建议遵循以下顺序:

①布局定位属性: display/position/ float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)

②自身属性: width/height/margin/ padding /border/ background

③文本属性 : color/font / text-decoration/text-align/vertical-align/white- space / break-word；

④其他属性 (CSS3) :content/cursor / border-radius/box-shadow / text-shadow/ background:inear-gradient...

3、页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路:

①必须确定页面的版心(可视区)，我们测量可得知；

②分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则；

③一行中的列模块经常浮动布局,先确定每个列的大小，之后确定列的位置，页面布局第二准则；

④制作HTML结构；遵循先有结构后有样式的原则；结构永远最重要

⑤先理清楚布局结构,再写代码尤为重要；