700字范文 > 17-CSS3 高级技巧精灵图字体图标滑动门

17-CSS3 高级技巧精灵图字体图标滑动门

时间：2022-11-08 15:39:51

CSS高级技巧

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor : default 小白 | pointer 小手 | move 移动 | text 文本

鼠标放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移动</li><li style="cursor:text">我是文本</li></ul>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

input {/* outline: 5px solid red;border: 1px solid blue; */outline: 0; /* 取消轮廓线 */}

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是：outline: 0;

<input type="text" style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea style="resize: none;"></textarea>

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>textarea {resize: none; /* 防止文本域拖拽 */outline: none;/* 取消轮廓线 */width: 400px;height: 120px;border: 1px solid pink;background-color: #f6e7f7;color: hotpink;}</style></head><body><textarea name="" id="" cols="30" rows="10"></textarea><p>下面是文字</p></body></html>

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

注意：对块级元素没有效果

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。

图片和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片或者表单（行内块）和文字的垂直关系了。默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住：如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。

给img 添加 display：block; 转换为块级元素就不会存在问题了。

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>div {width: 200px;height: 100px;background-color: pink;margin-left: auto;margin-right: auto; /* 左右自动 auto 盒子可水平居中对齐 */text-align: center; /* 文字水平居中 *//* vertical-align: middle; 对于块级元素无效 */}img { /* 行内块 *//* vertical-align: baseline; 默认的基线对齐 */vertical-align: middle; /* 手动改为中线对齐 */}textarea {height: 300px;width: 300px;vertical-align: middle;}</style></head><body><div>文字居中</div><hr><img src="images/2.jpg" > 我好尴尬呀 <hr>用户留言: <textarea ></textarea> </body></html>

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 不显示省略标记（…），而是简单的裁切

ellipsis : 当对象内文本溢出时显示省略标记（…）

必须结合white-spacing 和overflow一起来用

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>div {width: 120px;height: 20px;border: 1px solid #f00;white-space: nowrap; /* 首先先需要添加这句话强制一行*/overflow: hidden; /* 其次必须有这句话 *//* text-overflow: clip; 直接裁剪 */text-overflow: ellipsis; /* 超出的部分，省略号代替 */}</style></head><body><div>我的名字是安迪，楚乔的男朋友 </div></body></html>

CSS精灵技术（sprite）

精灵技术产生的背景

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为京东网站中的一个精灵图。

精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。

我们精灵图的宽度取决于最宽的那个背景。

我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。

在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>div {width: 17px;height: 13px;background: url(images/jd.png) no-repeat;background-position: 0 -388px; /* 因为背景图片往上移动，所以是负值 */margin: 100px auto;}p {width: 56px;height: 49px;background: url(images/jd.png) no-repeat;background-position: 0 -438px; /* 因为背景图片往上移动，所以是负值 */}</style></head><body><div></div><p></p></body></html>

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的”http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新”宠幸”啦。。这就是字体图标（iconfont).

字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药...

字体图标使用流程

设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图：

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： /

阿里icon font字库

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

提供PNG免费下载，像素大能到500PX

下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML

最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

首先把以下4个文件放入到 fonts文件夹里面。通俗的做法

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/CSS" href="./iconfont.CSS">

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

步骤：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>@font-face { /* 电脑中没有的字体，我们需要声明 */font-family: 'icomoon';/*这个可以改*/src: url('fonts/icomoon.eot?7kkyc2');src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;}span {font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */font-size: 100px;color: pink;}div::before {/*伪元素*/font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */font-size: 100px;color: hotpink;content: "\e91b";}</style></head><body><span></span><span></span><div></div></body></html>

滑动门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li><a href="#"><span>导航栏内容</span></a></li>

总结：

a 设置背景左侧，padding撑开合适宽度。 span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。之所以a包含span就是因为整个导航都是可以点击的。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑动门4</title><style>li{list-style: none;float: left;padding-left: 6px;/*宽度由内容决定*/background: url(img/nb.png) no-repeat;height: 35px;}li a {display: inline-block;height: 35px;text-decoration: none;line-height: 35px;padding-right: 25px;background: url(img/nb.png) no-repeat top right;}</style></head><body><ul><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li><li><a href="#">导航4</a></li></ul></body></html>

第二种

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}a {margin: 100px;display: inline-block;height: 33px;/* 千万不能给宽度写死宽度是不对滴，我们要推拉门自由缩放*/background: url(images/ao.png) no-repeat;padding-left: 15px;color: #fff;text-decoration: none;line-height: 33px;}a span {display: inline-block;height: 33px;background: url(images/ao.png) no-repeat right; /* span 不能给宽度利用padding挤开要我要span 右边的圆角所以背景位置右对齐 */padding-right: 15px;}</style></head><body><a href="#"><span>首页</span></a><a href="#"><span>楚乔传</span></a><a href="#"><span>公司简介</span></a></body></html>

微信案例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: url(images/wx.jpg) repeat-x;}.nav {height: 75px;}.nav li {float: left;margin: 0 10px;padding-top: 21px;}.nav li a {display: block;background: url(images/to.png) no-repeat;color: #fff;font-size: 14px;line-height: 33px;padding-left: 15px;text-decoration: none;}.nav li a:hover {background-image: url(images/ao.png);}.nav li a:hover span { /* 鼠标经过a a里面的span 也要变换背景 */background-image: url(images/ao.png);}.nav li a span {display: block;line-height: 33px;background: url(images/to.png) no-repeat right center;padding-right: 15px;}</style></head><body><div class="nav"><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>公众平台</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li></ul></div></body></html>

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

2、各属性详解**

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

before和after伪元素

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>/* .one 类选择器 :hover 伪类选择器 ::after 伪元素选择器 */div::before {content: "楚乔";background-color: pink;border: 1px solid red;width: 100px;height: 100px;display: block;/* 类选择伪类选择器就是选区对象伪元素选择器本质上是插入一个元素（标签盒子）只不过是行内元素 span a */}div::after {content: "宇文玥的";display: block;width: 50px;height: 50px;border: 1px solid skyblue;}</style></head><body><div>是</div><p></p></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>div {width: 296px;height: 180px;margin: 20px auto;position: relative; /* 子绝父相 */}div:hover::before { /* 鼠标经过之后前面插入一个伪元素 */content: "";width: 100%;height: 100%;border: 10px solid rgba(255, 255, 255, .3);display: block; /* 伪元素属于行内元素要转换 */position: absolute; /* 要伪元素不占位，就用绝对定位 */top: 0;left: 0;box-sizing: border-box; /* 把padding 和 border 都算入 width 里面 */}</style></head><body><div><img src="images/mi.jpg" height="180" width="296" alt=""></div><div><img src="images/mi.jpg" height="180" width="296" alt=""></div><div><img src="images/mi.jpg" height="180" width="296" alt=""></div><div><img src="images/mi.jpg" height="180" width="296" alt=""></div></body></html>

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性花费时间运动曲线何时开始;

运动曲线示意图：

img {width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;transition:transform 0.5s ease-in 0s;}img:hover {transform:rotate(180deg);}

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 要过渡的属性花费时间运动曲线何时开始; *//* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; *//* transtion 过渡的意思这句话写到div里面而不是 hover里面 */transition: all 0.6s; /* 所有属性都变化用all 就可以了后面俩个属性可以省略 */}div:hover { /* 鼠标经过盒子，我们的宽度变为400 */width: 600px;height: 300px}</style></head><body><div></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。