web第7天

项目切图规范

PS常用工具

  • 移动工具

    • 移动工具主要负责图层、选区、等的移动、复制操作。
    • 快捷键：v

  • 抓手工具

    • 快捷键：h
    • 空格 + 鼠标左键拖动，空格键可临时转换为抓手工具。

  • 放大镜工具

    • 放大镜工具可以放大或缩小图像。
    • 放大：点击放大工具，点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。
    • 缩小：点击缩小工具，点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。

  • 文字工具

    • 快捷键：t
    • 文字工具是用来输入文本的。

  • 吸管工具

    • 快捷键：i

  • 标尺工具

    • 标尺工具可以用来测量图像的高度或者宽度。
    • 属性栏： x 和 y：绘制的起点坐标。 W：标尺投射到 x 轴上的宽度。 H：标尺投射到 y 轴上的高度。（正负仅代表方向，x 轴方向向右，y 轴方向向下）。

  • 切片工具

    • 根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为 web 所用格式的时候能将所 切的各个部分分别保存成一张图片，完全区分开来。 保存时可选择图片格式以及切片类型。

  • 制作表情包

    • 将表情素材调入PS中；
    • 再找一张脸部细节丰富的人物照片，同样调入PS里；
    • 利用套索工具，将人物中表情部分扣取下来，拖入表情素材内。Ctrl+T调整一下表情的尺寸，让它和素材大小协调；
    • Ctrl+Shift+U首先对表情部分去色，然后按下Ctrl+M调出曲线工具，将对比度压低，整个表情打亮。这里特别说一下，挑选素材图时一定要注意去找那些面部打光均匀的照片，避免存在明暗过渡明显的“阴阳脸”，否则会给后期图片处理带来很多麻烦；
    • 双击表情图层，然后按住Alt键依次拖动混合颜色带右侧两个高光滑杆，你会发现表情就完美地嵌入到素材中了；

常见的图片格式和特点

格式优点缺点使用场景
jpg色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像
gif文件小，支持动画、透明，兼容性比较好只支持256种颜色色彩简单的logo/icon/动图
png无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图
webp文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性不好支持webp格式的app和webview

 

CSS精灵

  • 什么是 CSS 精灵

  • 英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-image: url(./images/jingling.jpg);
        }
        .box1 {
            background-position: -150px 0;
        }
        .box2 {
            background-position: -200px -50px;
        }
    </style>
</head>
<body>
    <img src="./images/jingling.jpg" alt="">
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

    •  

  • CSS 精灵优缺点

    • 优点：

      • 减少网页的 http 请求，从而大大的提高页面的性能；
      • 图片命名上的困扰；
      • 更换风格方便。

    • 缺点：

      • 必须要限定容器大小符合背景图元素位置，需要计算

  •  

 

CSS小箭头

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: blue;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .box1 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent red;
            position: absolute;
            top: 0;
        }
        .box2 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent blue;
            position: absolute;
            top: 0;
            left: -10px;
        }
        .wrap {
            width: 100px;
            height: 200px;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

  •  

BFC (Block Formatting Context) 块级格式化上下文

  • 什么是bfc？

    • Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了 其子标签如何定位，以及与其他标签的相互关系和作用。

      BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

  • 怎样生成BFC

    • 根标签
    • float的值不为none
    • overflow 的值不为 visible
    • display 的值为 inline-block
    • position 的值为 absolute 或 fixed

  • BFC的特性

    • 内部的标签默认会在垂直方向上一个接一个的放置。
    • 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠。
    • 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
    • BFC 的区域不会与 float 的标签区域重叠。
    • 计算BFC的髙度时，浮动子标签也参与计算。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

  • BFC解决的问题

    • 外边距塌陷
    • 清浮动
    • 两栏或者三栏自适应布局

阿里矢量图标

https://www.cnblogs.com/xiaonian0327/p/7735799.html

posted @ 2020-12-16 19:23  majiancheng  阅读(63)  评论(0)    收藏  举报