css⽤户界⾯样式（附实例、图解）
⽬录
1. ⿏标样式cursor
卷烟器2. 轮廓线outline
3. ⽂本域拖拽 resize
4. vertical-align 垂直对齐
5. ⾏内块在盒⼦默认的⼀个距离问题
6. 精灵图的使⽤
7. 字体图标
8. 滑动门
9. css3过渡效果
正⽂
1. ⿏标样式cursor
< url >： 使⽤绝对或者相对地址引⼊外部图像作为光标形状 < url > < x > < y >： 通过< x > < y >两个值指定具体需要显⽰的图像位置。类似 <’ background-position '> auto： ⽤户代理基于当前上下⽂决定光标形状
default： 相关平台的默认光标形状，通常为箭头。
none： 没有光标形状滤波装置
/* cursor: pointer; */
类似点到链接的⼿型
/* cursor: text; */
类似点到⽂本的“⼯”型
/* cursor: move; */
风扇转速测试类似移动图⽚的⼗字架型
2. 轮廓线outline
<’ outline-width '>： 指定轮廓边框的宽度。
<’ outline-style '>： 指定轮廓边框的样式。
<’ outline-color '>： 指定轮廓边框的颜⾊。
能类似border的和写，主要⽤于对input标签的初始化
Outline：none；
3. ⽂本域拖拽 resize
both： ⽤户可以调节元素的宽度和⾼度。
horizontal： ⽤户可以调节元素的宽度
vertical： ⽤户可以调节元素的⾼度。
textarea{
resize: none;
}
4. vertical-align 垂直对齐
适⽤于内联级元素
关于⽂字与图⽚及表单
取值：
middle： 把当前盒的垂直中⼼和⽗级盒的基线加上⽗级的半x-height对齐top： 把当前盒的top与⾏盒的top对齐
默认中：⽂字与图⽚及input等的基线对齐rfid标签生产
对图⽚或者input标签设置： vertical-align：middle；
5. ⾏内块在盒⼦默认的⼀个距离问题
⾏内块级元素：input、img
与盒⼦底部有个距离
解决⽅法：
1.对该⾏内块级元素设置display: block;
2.对该⾏内块级元素设置vertical-align: top;
3.对该⾏内块级元素设置vertical-align: middle;
6. 精灵图的使⽤
精灵图：将页⾯的图⽚整合到⼀张，有利于提⾼服务器的效率
例如：
精灵图使⽤核⼼：
1.使⽤的是背景图的做法
2.控制背景图的位置
7. 字体图标
获取⽅式：阿⾥巴巴⽮量图标库
下载–>在⽂件夹打开–>将压缩包剪切在vscode的⼯作地址–>在本地解压–>打开HTML 引⽤字体图标有三种⽅式
1.symbol（了解）
板栗切口机
2.classfont（了解）
3.Unicode（必须掌握）
<style>
@font-face{
/* 定义的字体风格以图标的形式存在
（iconfont是名字来的可以改，现改为zeng） */
font-family:'zeng';
/*URL是地址，所以要改成本地的地址*/
src:url('./');
src:url('./?#iefix')format('embedded-opentype'),
url('./fontimg/iconfont.woff2')format('woff2'),
url('./fontimg/iconfont.woff')format('woff'),
url('./f')format('truetype'),mica martinez
url('./fontimg/iconfont.svg#iconfont')format('svg');
}
.
iconfont{
/* 引⽤字体类型，与上⾯⼀定要对应 */
font-family:"zeng"!important;
font-size: 50px;
/* 设置风格为normal */
font-style: normal;
background-color: aqua;
}
</style>
</head>
<body>
中间引⽤对应的是不同⽂字图标的Unicode编码，在说明⽂件中可以查看
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<!-- <span class="iconfont"></span> -->
</body>
8. 滑动门
为了使各种特殊形状的背景能够⾃适应元素中的⽂本内容，出现了css滑动门技术，它从新的⾓度构建页⾯，使各种特殊形状的背景能够⾃由拉伸滑动，以适应元素内部的⽂本内容，可⽤性强，最常见于各种导航栏的滑动门。
核⼼技术：
核⼼技术就是利⽤css精灵（主要是背景图位置）和盒⼦padding撑开宽度，以便适应不同字数的导航
栏
⼀般经典布局是这样的：
<li>
<a href=”#”>
<span>导航栏内容</span>
</a>
</li>
总结：
1, a设置背景左值，padding撑开合适宽度
2，span设置背景右侧，padding撑开合适宽度，剩下由⽂字继续撑开宽度。
3，之所以a包含span是因为整个导航都是可以点击的
9. css3过渡效果
格式：
transition: 要过渡的属性 花费时间 运动曲率 开始时间;
前两个属性必须写
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议