当前位置：首页 > news >正文

css学习9

news 2025/11/7 13:41:05

雪碧图

字体图标

滑动门

雪碧图

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

优点

1.减少图片字节

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

原理

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

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

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

	<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操作

<!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 背景图像 + 浮动/定位 + 多个元素组合，让元素的左侧、中间（可拉伸）、右侧部分背景能够根据内容宽度自动适应，从而实现视觉上连贯的动态效果。

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

<!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>