Web前端基础Day09

这是一个关于Web前端基础Day09的思维导图，详细介绍了PS、 iconfont等。

Day09

• • 圣杯布局
    • 圣杯布局的实现思路： 1、结构上先放中间盒子，再放左盒和右盒 2、先给左侧和右侧盒子设置固定的宽度，给中间盒子width:100%; 3、让三个盒子实现水平排列（浮动，给父元素清浮动） 4、将左侧盒子移动到父元素的最左边显示（给左侧盒子margin-left:-100%;） 5、将右侧盒子移动到父元素的最右边显示（给右侧盒子margin-left:-自身的宽度;） 6、将中间盒子露出来（给最外层的父盒设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度）; 7、将左侧盒子归位（相对定位，left:-自身宽度），将右侧盒子归位（相对定位，right:-自身宽度）
  • 双飞翼布局
    • 双飞翼布局的实现思路： 1、结构上先放中间盒子（中间盒子需要有一个子盒），再放左盒和右盒 2、先给左侧和右侧盒子设置固定的宽度，给中间盒子width:100%; 3、让三个盒子实现水平排列（浮动，给父元素清浮动） 4、将左侧盒子移动到父元素的最左边显示（给左侧盒子margin-left:-100%;） 5、将右侧盒子移动到父元素的最右边显示（给右侧盒子margin-left:-自身的宽度;） 6、将中间盒子露出来（给中间盒子的子盒设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度）;
• PS
  • 图片格式
    • 2.4.1、PSD Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。
    • 2.4.2、JPG 色彩丰富 【不支持透明】 压缩比高，生成文件体积小， 支持多种压缩级别可以控制文件大小 色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））
    • 2.4.3、GIF 支持动画 支持透明（全透明） 颜色不够丰富，只支持256种颜色、文件小 适用于：色彩简单的logo/icon/动图
    • 2.4.4、PNG 颜色丰富 支持alpha透明（全透明和全不透明，半透明） 早期的浏览器不支持PNG图像 适用于：透明背景图片【投影，发外光, 线条复杂（文字）】
    • 2.4.5、WebP 谷歌（google）10年推出一种新型图片格式 文件小，支持有损和无损压缩，支持动画、透明 但并不是所有浏览器都支持 webp
  • 2.5、Cutterman插件
    • 2.5.2、下载 官网：http://www.cutterman.cn/zh/cutterman
• iconfont
  • 1、下载---压缩包，解压
  •             2、将字体文件（后缀名为.ttf   .woff    .woff2）复制到项目中的fonts文件夹中
  •             3、将iconfont.css复制到项目文件夹css下
  •             4、修改iconfont.css中字体文件的引入路径（../fonts）
  •             5、在页面中引入iconfont.css文件
  •             6、使用方式
    • unicode方式： <标签名 class="iconfont">&#xe600;</标签名>
    • font-class方式： 对unicode方式的变形，见名知意 <标签名 class="iconfont icon-sousuo"></标签名>