css学习9 - 技术栈

雪碧图

字体图标

滑动门

雪碧图

是一种网页图片优化技术，它将多个小图标或小图片合并到一张大图中（称为"雪碧图"）例如那种小表情图片

优点

1.减少图片字节

2.减少网页http请求，从而大大提高页面的性能

原理

1.通过background-image引入背景图片

2.通过background-position把背景图片移动到自己需要的位置

实例：展示上面雪碧图中的两个表情

html 复制代码

	<style>
		.icon1{
			display:block;
			width: 70px;
			height: 70px;
			background-image: url(icon.png);
			border:1px solid red;
			background-position: -8px -10px;
		}
		.icon2{
			display:block;
			width: 70px;
			height: 70px;
			background-image: url(icon.png);
			border:1px solid red;
			background-position: -225px -300px;
		}

	</style>

字体图标

是一种将图标以字体字符 的形式呈现的技术，它将图标制作成一个字体文件（如 .woff, .ttf, .eot, .svg），然后通过 CSS 调用和文字一样使用，可以轻松地修改颜色、大小、阴影、透明度等样式，非常适合用于网站 UI 中的图标展示。

特点：

1.轻量型：加载速度快，减少http请求

2.灵活性：可以利用css设置大小颜色等

3.兼容性：网页字体支持所有现代浏览器，包括IE低版本

常用字体图标库：iconfont-阿里巴巴矢量图标库

将自己想要的图标放到购物车中，下载代码，解压文件夹，然后里面有一个.html，打开按照Font class操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./iconfont.css">
	<style>
		.home{
			font-size: 300px;
			color:brown;
		}
	</style>
</head>
<body>
	<span class="iconfont icon-zhuye home"></span>
</body>
</html>

滑动门

是一种经典的布局与视觉效果技术，主要用于实现可伸缩的标签、按钮、导航项等UI元素的两侧背景图动态适配 。它的核心思想是利用 CSS 背景图像 + 浮动/定位 + 多个元素组合 ，让元素的左侧、中间（可拉伸）、右侧部分背景能够根据内容宽度自动适应，从而实现视觉上连贯的动态效果。

跟着视频教程做了一个简单的滑动门

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
		.slide{
			width:234px;
			height:420px;
			background-color: rgb(105,101,101,0.6);
			padding:20px 0;
			margin:100px;
			position: relative;
		}
		.slide ul{
			list-style: none;
		}
		.slide ul li{
			color:white;
		}
		.slide ul li{
			width:100%;
			height:42px;
			line-height: 42px;

			text-align: left;
			padding-left: 30px;
			box-sizing: border-box;
		}
		.slide ul li:hover{
			background-color: #ff6700;
		}
		.slide-list{
			width:992px;
			height: 460px;
			background-color: #fff;
			color: black;
			position: absolute;
			top:0;
			left:234px;
			border: 1px solid #e0e0e0;
			border-left: none;
			box-shadow: 0 8px 16px rgba(0,0,0,0.18);
			display:none;
		}
		.slide ul li:hover>.slide-list{
			display:block;
		}
	</style>
</head>
<body>
	<!--滑动门的结构-->
	<div class="slide">
		<ul>
		    <li>
				<a class="#">手机</a>
				<div class="slide-list">小米手机</div>
			</li>
		    <li>
				<a class="#">平板</a>
				<div class="slide-list">小米平板</div>
			</li>
		</ul>
	</div>
</body>
</html>

好玩太好玩了，等我学会插图片，我要做一本照片集！！！想来不难

好玩好玩，感觉还能丰富一点板块，可以再放点收藏的音乐那简直了