前端知识点------小米官网精灵图书写（两种方式）

图片示例：

第一种：采用背景图片的方式

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}div{width: 234px;height: 170px;background-color:#5f5750;margin:0 auto;}ul{width:228px; padding:3px;font-size: 0px;list-style: none;}li {display: inline-block;width:76px;height:82px;font-size: 12px;color:#c9c5c4;text-align: center;}span{display: block;width:30px;height:30px;         /*span 中放图片，所以他的大小最好等于所剪切图片的大小！！！*/margin-top: 15px; margin-left: auto;margin-right: auto;background-image: url(https://personal-image-storage.oss-cn-shanghai.aliyuncs.com/img/spirit.png
);/*或者使用margin的复合形式*//*margin: 15px auto  15px; */}ul li:nth-child(1) span{background-position: 0px 0px;}                 /*如果精灵图第一张图片位置本身就在最左上角，那么此处代码可以不写，直接写li标签的精灵图位置就行，*/ul li:nth-child(2) span{background-position:0px 30px; } ul li:nth-child(3) span{background-position: 0px 60px;} ul li:nth-child(4) span{background-position: 0px 90px;} ul li:nth-child(5) span{background-position: 0px 118px;} ul li:nth-child(6) span{background-position: 0px 148px;} a{text-decoration: none;color:#c9c5c4; }a:hover{color: white;}ul li:hover:nth-child(1) span{background-position: 30px 0px;}ul li:hover:nth-child(2) span{background-position: 30px 30px;}ul li:hover:nth-child(3) span{background-position: 30px 60px;}ul li:hover:nth-child(4) span{background-position: 30px 90px;}ul li:hover:nth-child(5) span{background-position: 30px 118px;}ul li:hover:nth-child(6) span{background-position: 30px 148px;}</style>
</head>
<body>
<div><ul><li><a href=""><span></span><p>选购手机</p></a></li><li><a href=""><span></span><p>企业团购</p></a></li><li><a href=""><span></span><p>F码通道</p></a></li><li><a href=""><span></span><p>米粉卡</p></a></li><li><a href=""><span></span><p>以旧换新</p></a></li><li><a href=""><span></span><p>话费充值</p></a></li></ul>
</div></body>
</html>

第二种：采用图片的方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>精灵图改版</title><style>.home-channel-list {display: flex;align-items: center;flex-wrap: wrap;width: 234px;margin: 0;padding: 3px;list-style-type: none;font-size: 12px;text-align: center;background: #5f5750;}.home-channel-list li {position: relative;width: 70px;height: 82px;padding: 0 3px;}.home-channel-list li::before {position: absolute;content: "";background: #665e57;top: -1px;left: 6px;width: 64px;height: 1px;}.home-channel-list li::after {position: absolute;content: "";background: #665e57;top: 6px;left: -1px;width: 1px;height: 70px;}.home-channel-list li a {text-decoration: none;display: block;padding-top: 18px;text-overflow: ellipsis;color: #fff;opacity: 0.7;transition: all 0.2s;}.home-channel-list li a:hover {opacity: 1;}.home-channel-list img {display: block;width: 24px;height: 24px;margin: 0 auto 4px;}</style>
</head><body><!-- 说明：先前采用的是背景图(即精灵图)实现，现在是使用小米官网的做法，改变图片和字体的透明度来实现hover时的颜色变化的 --><ul class="home-channel-list clearfix"><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">小米秒杀</a></li><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">企业团购</a></li><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="">F码通道</a></li><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="">米粉卡</a></li><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="">以旧换新</a></li><li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">话费充值</a></li></ul>
</body></html>

前端知识点------小米官网精灵图书写（两种方式）相关推荐

Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
Python实现平行坐标图的两种方式
平行坐标图,一种数据可视化的方式.以多个垂直平行的坐标轴表示多个维度,以维度上的刻度表示在该属性上对应值,相连而得的一个折线表示一个样本,以不同颜色区分类别. 但是很可惜,才疏学浅,没办法在Pytho ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
前端实现小米官网导航栏的实现主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
话不多说直接上代码首先看看小米商城的导航栏,如图: 通过实际测试可以知道,服务和社区不属于下拉菜单,除了这两个,剩下的全是下拉菜单,想成了一个下拉菜单组,一旦鼠标进入下拉菜单组,那么就会有下拉效果, ...
Cesium 修改默认地球贴图的两种方式
Cesium 建立Cesium.Viewer的时候,默认的贴图(imageryProviderViewModels)为'Bing Maps Aerial',但是因为"HTTP401: 已拒绝 ...
matlab绘制动态图,Matlab绘制动态图的两种方式（参考）
第一种方式 close all; clear all; clc; clf; xlabel('X轴'); ylabel('Y轴'); box on; axis([-2,2,-2,2]); axis eq ...
Android Studio 显示gif动图的两种方式
方法一: 1.gif图片: 将所需的.gif图片复制到drawable文件夹下,如下图所示. 2.布局文件: 在布局文件添加ImageView代码段,如下所示. <ImageViewandroi ...
前端设置input复选框的大小两种方式
方式一: 使用zoom调框大小 <input type="checkbox" name="cashierCheck" value="" ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...

前端知识点------小米官网精灵图书写（两种方式）

图片示例：

第一种：采用背景图片的方式

第二种：采用图片的方式

前端知识点------小米官网精灵图书写（两种方式）相关推荐

最新文章

热门文章