电商网站规划与建设方案,网站建设加后台,泰安网络电视台直播,1688黄页网芒果品种大全网页布局形式----浮动 css浮动#xff1a;一、常见的三种网页布局形式#xff1a;1.1 网页布局两大准则#xff1a; 二 、浮动#xff1a;2.1 浮动语法#xff1a;2.2 浮动特性#xff08;重难点#xff09;#xff1a;浮动元素通常与标准流的父级元素搭配使用#xf… 网页布局形式----浮动 css浮动一、常见的三种网页布局形式1.1 网页布局两大准则 二 、浮动2.1 浮动语法2.2 浮动特性重难点浮动元素通常与标准流的父级元素搭配使用 2.3 浮动注意事项2.4 清除浮动2.4.1 为什么清除浮动2.4.2 清除浮动语法2.4.3 清除浮动总结 三、PS3.1 常见的图片格式3.2 ps切图1 图层切图使用最多2 切片切图3 添加ps插件cutter插件快速切图蓝湖像素大厨app css浮动
学习目标
一、常见的三种网页布局形式
网页布局的本质----CSS摆放盒子
CSS中三种传统布局方式盒子排列顺序 (1标准流普通标签按照默认规定的方式排列 块状元素独自占一行行内元素按照顺序从左往右排列 2浮动 3定位 实际开发中一般一个页面需要同时包含这三种布局方式
1.1 网页布局两大准则
网页布局第一准则多个块级元素纵向排列用标准流多个块级元素横向排列用浮动
网页布局的第二准则先设置盒子的大小再设置盒子的位置
二 、浮动
为什么需要浮动改变标签默认的排列方式
多个盒子怎么占同一行将盒子设置为行内块元素样式中设置display-block
但是这样盒子之间会有比较大的空隙比较难控制。
2.1 浮动语法
float属性创建浮动框浮动的意思是将他们移到一边靠着浏览器的边缘或者其他浮动框的边缘
浮动的语法 浮动属性值
2.2 浮动特性重难点
1 脱标浮动元素会脱离标准流不再保留原来的位置让出位置
可以实现叠加效果
2 多个浮动的盒子会按照属性值一行内显示并且顶端对齐
注如果父级元素装不下这些浮动的盒子多出的会另起一行显示
3 任何元素浮动之后都有行内块元素相似特性 行内元素加浮动后具有行内块元素的特性 块元素加浮动后具有行内块元素的特性
浮动元素通常与标准流的父级元素搭配使用
目的约束浮动元素的位置符合网页布局第一准则
步骤一先用标准流的父元素排列上下位置
步骤二再在父元素中采取浮动排列左右位置以父元素为基准浮动子盒子
2.3 浮动注意事项
1 浮动常与标准流的父元素搭配使用
先用标准流排列上下之后内部的元素通过浮动排列左右
2 一个元素浮动理论上其余的兄弟元素也需要浮动一浮全浮
记住浮动的盒子只会影响这个盒子后面的标准流不会影响前面的标准流
2.4 清除浮动
引入 所有父盒子都需要设置高度吗
由于父盒子很多情况下不便给出高度但是浮动后的子盒子是不占位置导致父盒子的高度为0会影响下面的标准流的盒子浮动的元素不占原文档流的位置会对后面元素的排版产生影响
最理想的状态是由子盒子来决定自动撑开
2.4.1 为什么清除浮动
1 父级没有设置高度
2 子盒子浮动脱标
3 影响了下面的布局需要清除浮动
因此要清除浮动
清除浮动的本质清除浮动元素脱离标准流造成的影响
清除之后父元素就能根据浮动的子盒子检测到高度
2.4.2 清除浮动语法 属性值
清除的方法闭合浮动只让浮动在父盒子中产生影响
1 额外标签法隔墙法在最后一个浮动的盒子添加空标签必须是块级元素----不常用
2 父级添加overflow属性属性值设置为hidden,auto或者scroll
3 after伪元素法百度淘宝网易的网页使用的这种清除浮动的方法
只需要将这段代码调用就可以
4 双伪元素清除浮动给父元素添加小米腾讯的网站使用
在父元素父盒子的前后都插入一个盒子前后闭合
2.4.3 清除浮动总结
清除浮动的四种方式
三、PS
3.1 常见的图片格式
1 jpg图像格式色彩信息比较好颜色丰富产品类图片
2 gif图像格式颜色比较少可以保存透明背景和动画
3 png图像格式结合jpg和gif的特点一般背景透明的图片选择png格式
4 PSD图像格式是ps的专用格式方便前端测量也可以选中文字网页设计稿
3.2 ps切图
1 图层切图使用最多
右击图层快速当初为PNG
如果需要图片上的文字先进行合并图层
1选中需要的图层图层菜单点击合并图层ctrle
2右键快速导出图层
2 切片切图
1使用切片工具(左边栏第一列第三个手动划出
2导出选中的图片文件-导出-存储为web所用格式
3 添加ps插件cutter插件快速切图
Cutterman是一个运行再Photoshop中的插件非常好用
完整版本的ps才可以安装
蓝湖像素大厨app
将psd文件直接拖动到像素大厨当中
