CSS学习16--CSS高级技巧：用户界面样式、精灵技术、字体图标、滑动门
CSS高级技巧
- 一、用户界面样式
-
- 1. 鼠标样式cursor
- 2. 轮廓outline
- 3.防止拖拽文本域resize
- 4.vertical-align 垂直对齐
- 5. 去除图片底侧空白缝隙
- 6. 溢出文字隐藏
- 二、精灵技术sprite
-
- 1. 精灵技术产生背景
- 2. 精灵技术的本质
- 3. 精灵技术的使用
- 4. 制作精灵图
- 三、字体图标
-
- 1. 字体图标优点
- 2. 字体图标使用流程
- 3. 追加新图标
- 四、滑动门
-
- 1. 滑动门的背景
- 2. 核心技术
- 3. 技术实现
一、用户界面样式
所谓界面样式就是更改一些用户操作样式，比如更改用户的鼠标样式、表单轮廓等。
1. 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor: default 小白 | pointer 小手 | text 文本| move 移动
<html>
<head>
<title>鼠标title>
head>
<body>
<ul>
<li style="cursor: default;">小白li>
<li style="cursor: pointer;">小手li>
<li style="cursor: text;">文本li>
<li style="cursor: move;">移动li>
ul>
body>
html>
2. 轮廓outline
是绘制于元素周围的一条线，位于边框边缘的外围，用于突出元素。
<html>
<head>
<title>鼠标title>
<style>
input{
outline: 1px solid red;
outline: 0; /*取消轮廓线*/
border: 1px solid blue;
}
style>
head>
<body>
<input type="text">
body>
html>
3.防止拖拽文本域resize
<html>
<head>
<title>resizetitle>
<style>
textarea{
resize: none; /*防止文本域拖拽*/
outline: none; /*取消轮廓*/
width: 100px;
height: 200px;
border: 1px solid pink;
background-color: #f6e7f7;
}
style>
head>
<body>
<p>下面是文字p>
<textarea name="" id="">textarea>
body>
html>
4.vertical-align 垂直对齐
- 带有宽度块级元素居中对齐：margin: 0 auto;
- 文字居中对齐： text-align: center;
- 垂直居中：设置或检索对象内容的垂直对齐方式。
vertical-align不影响块级元素中内容的对齐，只针对行内元素或行内块元素，通常用来控制图片/表单与文字的对齐。
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin-left: auto;
margin-right: auto; /*盒子水平*/
text-align: center; /*文字水平居中*/
vertical-align: middle; /*对于块级元素无效*/
}
img {
vertical-align: baseline; /*默认基线对齐*/
vertical-align: middle; /*中线对齐*/
}
style>
head>
<body>
<div>文字居中div>
<hr>
<img src="images/id.png" alt="" > 12345
body>
html>
5. 去除图片底侧空白缝隙
有一个很重要的特性：图片或者表单等行内块元素，他们的底会和盒子的基线对齐，存在空白缝隙。
解决方法：
-
转换为块元素；
-
给img的vertical-align属性值为middle或者top，用的最多；
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; } img { display: block; vertical-align: middle; } style> head> <body> <div> <img src="#.png" alt="" > 12345 div> html>
6. 溢出文字隐藏
（1）word-break 自动换行
normal 使用浏览器默认换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
<html>
<head>
<style>
div {
width: 120px;
height: 30px;
background-color: pink;
word-break: break-all;
/*允许单词拆分*/
word-break: keep-all;
/*不允许拆开单词显示，连字符特殊 -*/
}
style>
head>
<body>
<div>
my name is andy
div>
html>
（2）white-space
设置或检索对象内文本显示方式。通常用于强制一行显示内容。
normal 默认处理方式
nowrap 强制在同一行内显示所有文本，直到文本结束或遇到br标签换行
（3）text-overflow 文字溢出
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
clip 不显示省略标记（…），而是简单的裁剪
ellipsis 当对象内文本溢出时显示省略标记（…）
注意：使用一定要强制一行内显示，再次和overflow搭配使用！
<html>
<head>
<style>
div {
width: 120px;
height: 30px;
background-color: pink;
white-space: nowrap;/*首先强制一行内显示*/
text-overflow: ellipsis;
overflow: hidden; /*再次搭配使用*/
}
style>
head>
<body>
<div>
我的名字是安迪
div>
html>
二、精灵技术sprite
1. 精灵技术产生背景
为了减少服务器接收和发送清秀的次数，提高页面加载速度，出现了CSS精灵技术。
2. 精灵技术的本质
是一种处理网页背景图像的方式，将一个页面涉及的所有背景图片集中到一张大图上，将大图应用与网页。这样当用户访问该页面时只需要发送一次请求，网页中的背景图片都可以显示出来。合成的大图成为精灵图（雪碧图）。
3. 精灵技术的使用
<html>
<head>
<style>
div {
width: 17px;
height: 13px;
background-color: pink;
background: url(images/jd.jpg) no-repeat;
background-position: 0 -388px;
}
style>
head>
<body>
1. 插入图片 margin padding float position 移动图片 width 大小
2. 背景图片 background 来控制 size 大小 background-position 位置
<div>
div>
html>
4. 制作精灵图
当背景图片较多时，运用ps技术制作精灵图。
注意一般不包括插入图片。
三、字体图标
一般的图片会增加总文件大小，额外增加http请求，不能缩放。因此应运而生了字体图标。
1. 字体图标优点
- 可以做和图片一样的事情，改变透明度、旋转度等
- 本质是文字，可以随意改变颜色、产生阴影、透明效果
- 本身体积更小，携带信息未缩减
- 几乎支持所有浏览器
- 移动端设备必备
2. 字体图标使用流程
字库网页：icomoon icofont.cn
-
UI设计svg文件
-
前端上传兼容性字体文件包
-
前端下载到本地
-
把字体引入HTML页面中
第一步： 在样式里声明字体
@font-face{ font-family: "iconfont"; src: url('../fonts/iconfont.woff2?t=1648085640271') format('woff2'), url('../fonts/iconfont.woff?t=1648085640271') format('woff'), url('../fonts/iconfont.ttf?t=1648085640271') format('truetype'); font-weight: normal; font-style: normal; }第二步：给盒子使用字体
span{ font-family: "icomoon"; }第三步：盒子里面添加结构
<style> span::before { font-family: "icomoon"; color: pink; content: '\e91b'; } style> 或者 <span>span>
3. 追加新图标
selection.json
四、滑动门
1. 滑动门的背景
为了网页美观，常常需要为网页元素设置特殊形状的背景。为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术，常见于导航栏。
2. 核心技术
核心技术是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，可以设计导航栏。
一般的经典布局是这样的：
<li>
<a href="#">
<span>导航栏内容span>
a>
<li>
总结：
- a设置背景左侧，padding撑开合适宽度
- span设置背景右侧，padding撑开合适宽度 剩下由文字撑开宽度
- 之所以a包含span就是因为整个导航都是可以点击的
3. 技术实现
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
a {
display: inline-block;
height: 33px;/*千万不能给宽度*/
background: url(#.png) no-repeat;
padding-left: 15px;
text-decoration: none;
line-height: 33px;
}
a span {
display: inline-block;
height: 33px;
background: url(#.png) no-repeat;
padding-right: 15px;
}
style>
head>
<body>
<a href="">
<span>首页span>
a>
html>