菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 高钰琪-CSS（7）-20221117 [打印本页]

作者: mx88783 时间: 2023-1-5 18:39
标题: 高钰琪-CSS（7）-20221117

一、今日学习内容：

CSS的其他技巧

精灵图

为什么要使用精灵图

将多张小图片整合到一张大的图片中返回给浏览器，可以减少对服务的重复请求，以减轻服务器的压力

使用方法：

利用背景图片的方式来将精灵图插入

将精灵图移动到指定位置即可，利用的属性是bacground-position ，一般移动的数值都是负值（X轴向右是正值，Y轴向下是正值，精灵图一般都是向上和向左进行移动，所以取负值）

鼠标样式

属性cursor

属性值

• default 默认的鼠标样式

• pointer 小手的鼠标样式

• text 文本鼠标样式

• move拖动时的鼠标样式

• not-allowed 禁止鼠标样式

输入框删除外框

outline:none

文本域取消拖拽

resize:none;

行内元素的对齐方式

属性

vertical-align

• 属性值：

• top 顶线对齐

• middle 中线对齐

• baseline 基线对齐（默认值）

• bottom 底线对齐

CSS的三角制作

原理

盒子的四个边框的联结处是分别平分的样式

将盒子的宽高设置为0 直接利用边框可生产四个三角形状

将边框的颜色设置为透明，需要哪个三角，单独设置哪个边框的颜色即可

CSS的省略号制作

步骤

1、让文字一行显示

2、将多余的文字隐藏掉

3、将隐藏的文字用省略号代替

CSS的滑动门

核心思想，用a标签实现左部背景图，用哪个span实现右部的背景图

CSS字体图标的使用

1、登录阿里字体图标库

2、找到字体图标将需要的字体图标添加至购物车

3、将购物车的字体图标下载下来

4、将下载的压缩包解压到项目目录下

5、在demo_index.html文件中查看字体图标的类名

6、在html文件中引入字体图标

7、改变字体图标大小要注意权重问题，字体属性默认的权重是10

PS的基本操作

常规操作

1、文件里打开相应的psd图片

2、Ctrl+R可以打开标尺，右击标尺可以选择单位

3、Ctrl + 加号可以放大图片 Ctrl + 减号可以缩小图片

4、按住空格键，可以拖动整个视图

5、用选框工具可以测量大小

切图

1、先选择切片工具

2、选择要切片的区域

3、点击文件进行保存

4、选择jpeg格式点击存储

5、将切片选项选择为选中的切片导出即可

图层

手动合并图层导出

1、选中所需合并的图层

2、ctrl+e合并图层，右键点击图层导出即可

cutterman插件的使用

1、先安装cutterman插件

2、重启ps，找到cutterman插件

3、使用cutterman进行图层合并导出

二、今日问题：无

三、解决方案：无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)