前端学习笔记5

前端学习笔记5

学习目标

• 能够说出网页布局的三大流派

• 能够利用浮动属性解决盒子的并排问题

• 能够在photoshop中进行简单操作(包括量取距离、切图等操作)

• 能够完成老师在课堂上完成的企业网的进度

网页布局经验：

页面的稳定性：

1.优先使用width和height

2.其次使用padding，虽然说padding会改变盒子的占位大小，但是padding没有其他的问题

3.最后使用margin，margin有塌陷的问题。 实际开发中： 怎么方便就怎么来

一、网页布局的三大流派

标准流（文档流）、浮动流，定位流。

标准流（文档流）就是网页中元素默认的排列方式，自上而下，从左到右，我们前面所学习的就是标准流布局。

浮动流和定位流在后面的学习中会讲到。

二、浮动(float)

什么时候用浮动？用来专门让网页中同级下不能并排的盒子实现并排效果。

浮动属性有两个常用浮动方向：

float:left;左浮动（左浮动）

float:right;右浮动（右浮动）

注意1：没有浮动居中的写法。

注意2：浮动不要乱用，一般在同级盒子中实现并排，同级下哪些盒子要并排，就给它们都加上浮动。

三、ps的快捷键

基本操作

ctrl+r 展示与隐藏标尺

在标尺上右键，选中像素

z 放大镜工具 按住鼠标左键，向右下拖拽就是放大(ctrl + =)，向左上拖拽就是缩小(ctrl + -)

安装空格键的情况下，按住鼠标左键拖拽可以移动这个页面

ctrl+alt+0 把页面缩放回正常的比例

移动辅助线的工具是 v

量取距离

鼠标停留在标尺上，向标尺外部按住拖拽， 把参考线拖拽到想要的位置，

通过 M 按键 选框工具 量取想要的距离， 可通过F8快捷键，查看信息面板得到想要的距离数值

切图(把图片从效果图上切下来，保存到我们的images文件夹里面)

C 切片工具

i 吸管工具

Demo：

1、爱宠系列

2、鲁能

3、尚合