CSS学习16--CSS高级技巧：用户界面样式、精灵技术、字体图标、滑动门

乌鸦不像写字台2024-09-10 10:02

CSS高级技巧

  • 一、用户界面样式
    • [1. 鼠标样式cursor](#1. 鼠标样式cursor)
    • [2. 轮廓outline](#2. 轮廓outline)
    • 3.防止拖拽文本域resize
    • [4.vertical-align 垂直对齐](#4.vertical-align 垂直对齐)
    • [5. 去除图片底侧空白缝隙](#5. 去除图片底侧空白缝隙)
    • [6. 溢出文字隐藏](#6. 溢出文字隐藏)
  • 二、精灵技术sprite
    • [1. 精灵技术产生背景](#1. 精灵技术产生背景)
    • [2. 精灵技术的本质](#2. 精灵技术的本质)
    • [3. 精灵技术的使用](#3. 精灵技术的使用)
    • [4. 制作精灵图](#4. 制作精灵图)
  • 三、字体图标
    • [1. 字体图标优点](#1. 字体图标优点)
    • [2. 字体图标使用流程](#2. 字体图标使用流程)
    • [3. 追加新图标](#3. 追加新图标)
  • 四、滑动门
    • [1. 滑动门的背景](#1. 滑动门的背景)
    • [2. 核心技术](#2. 核心技术)
    • [3. 技术实现](#3. 技术实现)

一、用户界面样式

所谓界面样式就是更改一些用户操作样式，比如更改用户的鼠标样式、表单轮廓等。

1. 鼠标样式cursor

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

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

html 复制代码 
<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 复制代码 
<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 复制代码 
<html>
	<head>
		<title>resize</title>
		<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 复制代码 
<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 复制代码 
    <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 复制代码 
<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 复制代码 
<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 复制代码 
<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

  1. UI设计svg文件

  2. 前端上传兼容性字体文件包

  3. 前端下载到本地

  4. 把字体引入HTML页面中

    第一步： 在样式里声明字体

    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;
}

    第二步：给盒子使用字体

    html 复制代码 
    span{
	font-family: "icomoon";
}

    第三步：盒子里面添加结构

    html 复制代码 
    <style>
	span::before {
		font-family: "icomoon";
		color: pink;
		content: '\e91b';
	}
</style>
或者
<span><!--复制小图标--></span>

3. 追加新图标

selection.json

四、滑动门

1. 滑动门的背景

为了网页美观，常常需要为网页元素设置特殊形状的背景。为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术，常见于导航栏。

2. 核心技术

核心技术是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，可以设计导航栏。

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

html 复制代码 
<li>
	<a href="#">
		<span>导航栏内容</span>
	</a>
<li>

总结：

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

3. 技术实现

html 复制代码 
<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>
相关推荐
MiyueFE6 分钟前
14 个逻辑驱动的 UI 设计技巧，助您改善任何界面
前端·设计
啃火龙果的兔子10 分钟前
前端单元测试覆盖率工具有哪些，分别有什么优缺点
前端·单元测试
天水幼麟26 分钟前
python学习笔记（深度学习）
笔记·python·学习
「、皓子~38 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了40 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_42 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门，基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45801 小时前
小程序学习笔记：使用 MobX 实现全局数据共享，实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07GPU 进阶笔记（二）：华为昇腾 910B GPU08鸽了六年的某大厂面试题：你会手写一个模板引擎吗？09DeepSeek各版本说明与优缺点分析10扣子空间的使用教程与大模型技术思考