前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用？

大家好&＃xff0c;我是致力于前端开发&＃xff0c;前端设计&＃xff0c;前端入门的前端小姐姐&＃xff0c;今天为大家带来的前端新知识是【雪碧图和滑动门】&＃xff0c;不多说了&＃xff0c;接下来一起看看吧&＃xff01;

主要内容

1. 雪碧图
2. 滑动门

学习目标

一、雪碧图

1.1概念

CSS Sprite也叫CSS精灵、CSS雪碧图&＃xff0c;是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去&＃xff0c;这样一来&＃xff0c;当访问该页面时&＃xff0c;由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求&＃xff0c;所以图片越多请求越多&＃xff0c;造成延迟的可能性越大。所以页面有许多icon时&＃xff0c;推荐使用CSS Sprite。

1.2优点

&＃xff08;1&＃xff09;减少图片的字节。

&＃xff08;2&＃xff09;减少网页的http请求&＃xff0c;从而大大的提高页面的性能。

&＃xff08;3&＃xff09;解决了网页设计师在图片命名上的困扰&＃xff0c;只需对一张集合的图片上命名就可以了&＃xff0c;不需要对每一个小元素进行命名&＃xff0c;从而提高了网页的制作效率。

1.3原理

&＃xff08;1&＃xff09;需要一个设置好宽和高的容器

&＃xff08;2&＃xff09;通过background-image引入背景图片

&＃xff08;3&＃xff09;通过background-position把背景图片移动到自己需要的位置

调试方法:可以用浏览器自带的调试工具进行调试&＃xff08;如chrome浏览器按f12即可进行调试&＃xff0c;慢慢移动background-position的值来达到理想的效果&＃xff09;

1.4应用

我们把表情放在一张图片上&＃xff0c;图片的背景色为透明&＃xff01;

照片中有标记部分表情的位置为&＃xff08;0&＃xff0c;0&＃xff09;&＃xff1b;也就是说我们想要显示图中标记的表情只需将background-position设置为&＃xff08;0&＃xff0c;0&＃xff09;即可&＃xff01;

下面问题来了&＃xff0c;如果我们想显示其他表情&＃xff0c;应该怎样调整图片的background-position呢&＃xff1f;

注意点&＃xff1a;我们在一个页面上设置了盒子的宽高&＃xff0c;想要将一个表情显示在盒子内&＃xff0c;我们是不能移动盒子的位置的&＃xff0c;我们只能改变图片的位置。

比如我想显示下面表情&＃xff1a;

操作步骤&＃xff1a;将图片向左移X个单位&＃xff0c;然后向上移Y个单位&＃xff0c;其中XY的具体数值是需要个人调试至合适位置得出的&＃xff01;

代码如下&＃xff1a;

.

二、Ps

2.1安装ps

2.2安装cutterman

2.2.1介绍

Cutterman是一款运行在photoshop中的插件&＃xff0c;能够自动将你需要的图层进行输出&＃xff0c; 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出&＃xff0c;方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则&＃xff0c;纯点击操作&＃xff0c;方便、快捷&＃xff0c;易于上手。

2.2.2安装

2.3制作雪碧图

运用cutterman制作雪碧图步骤&＃xff1a;

1、打开图片

2、点击移动工具

3、设置自动选择为图层

4、选中需要的图层&＃xff08;按住ctrl多选&＃xff09;

5、图层选择完毕&＃xff0c;点击窗口

6、选择扩展功能

7、选择cutterman&＃xff08;第一次使用需要注册账号&＃xff09;

8、导出图层&＃xff0c;雪碧图制作完成

2.4ps常用快捷键

新建图形文件 【Ctrl】&＃43;【N】
打开已有的图像 【Ctrl】&＃43;【O】
关闭当前图像 【Ctrl】&＃43;【W】
保存当前图像 【Ctrl】&＃43;【S】
另存为... 【Ctrl】&＃43;【Shift】&＃43;【S】
存储为Web所用格式 【Ctrl】&＃43;【Alt】&＃43; 【Shift】&＃43;【S】

全部选取 【Ctrl】&＃43;【A】
取消选择 【Ctrl】&＃43;【D】
重新选择 【Ctrl】&＃43;【Shift】&＃43;【D】
反向选择 【Ctrl】&＃43;【Shift】&＃43;【I】

放大视图 【Ctrl】&＃43;【&＃43;】 或者 【ALT】&＃43;【滑轮往上】
缩小视图 【Ctrl】&＃43;【-】 或者 【ALT】&＃43;【滑轮往下】

还原/重做前一步操作 【Ctrl】&＃43;【Z】
还原两步以上操作 【Ctrl】&＃43;【Alt】&＃43;【Z】
重做两步以上操作 【Ctrl】&＃43;【Shift】&＃43;【Z】
剪切选取的图像或路径 【Ctrl】&＃43;【X】或【F2】
拷贝选取的图像或路径 【Ctrl】&＃43;【C】
将剪贴板的内容粘到当前图形中 【Ctrl】&＃43;【V】或【F4】
自由变换 【Ctrl】&＃43;【T】

用背景色填充所选区域或整个图层 【Ctrl】&＃43;【Del】
用前景色填充所选区域或整个图层 【Alt】&＃43;【Del】

显示/隐藏标尺 【Ctrl】&＃43;【R】

显示/隐藏参考线 【ctrl】&＃43;【H】

复制图层 【ctrl】&＃43;【J】

三、滑动门

3.1概念

大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。

3.2实现滑动门所需要的技术

&＃xff08;1&＃xff09;简单的HTML基础知识

&＃xff08;2&＃xff09;简单的css基础样式

&＃xff08;3&＃xff09;Css定位

3.3如何实现滑动门

1、准备好一段HTML代码

2、给当前HTML结构添加一些样式

四、作业

4.1作业1

4.2作业2

作业效果参考网址&＃xff1a;https://www.mi.com/

好了&＃xff0c;本次内容已全部完毕&＃xff0c;希望生动有趣的前端新知识能对正在学习前端开发的你有所帮助&＃xff01;我们下期见&＃xff01;