页面上icon较多,又不想使用臃肿的结构怎么办?
[先看效果图]

例如这种排版,常规有两种情况
1.把【“ & ”】+ 白色背景切一起
2.写结构的时候复杂,例如:div>img*2 +文字标签
读到这里,可能有人说,第一种情况为什么两个引号不和白色背景切一张图,其实在我个人看来,一张大图的加载速度可能是没有两张小图加载的快,另外对于不会切图的前端小哥哥小姐姐来说,还要去找ui沟通,比较被动!
对于第二种情况,个人觉得页面排版有些臃肿,看着比较麻烦,还觉得有点乱
好了,言归正传,上我的排版

看到这里,有没有觉得我的排版很简单,一个div里包含文字 ! 下边贴上样式
没错,这里我用的是before + after
好了,到此就结束了,小可爱们可以去试试了
ps:这里给大家推荐一个超级好用的图片压缩工具
页面上icon较多,又不想使用臃肿的结构怎么办?的更多相关文章
- 解决WEB页面上"焦点控制"一法
解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...
- 如何Spring Cloud Zuul作为网关的分布式系统中整合Swagger文档在同一个页面上
本文不涉及技术,只是单纯的一个小技巧. 阅读本文前,你需要对spring-cloud-zuul.spring-cloud-eureka.以及swagger的配置和使用有所了解. 如果你的系统也是用zu ...
- 数据量大的数据转换成jason并显示在页面上
代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...
- yaf将错误输出打印在页面上
修改项目的配置文件 文件是conf/application.ini 添加两行代码 application.dispatcher.throwException = 1 ;开启/关闭自动异常捕获功能 ap ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- 从数据库提取数据通过jstl显示在jsp页面上
从数据库提取数据通过jstl显示在jsp页面上 1.ConnectDB.java连接数据库,把数据转换成list public class ConnectDB { private final stat ...
- spring从服务器磁盘读取图片,然后显示于前端页面上
需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
- yaf项目将500错误打印到页面上
一般在yaf项目调试的时候,如果代码有错误,页面只会响应500错误,但看不到哪里报了什么错误,通过开启yaf的一个配置可以将错误信息显示在页面上. 打开项目的index.php入口文件,在开头加入如下 ...
随机推荐
- Guava中强大的排序器Ordering使用
一 创建排序器 排序器:可以用来为构建复杂的比较器,以完成集合排序的功能: 本质上来说,Ordering 实例无非就是一个特殊的Comparator 实例. Ordering把很多基于Comparat ...
- CUDA学习(四)之使用全局内存进行归约求和(一个包含N个线程的线程块)
问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...
- 技术派-github常见的一些用法和缩写
PR: Pull Request. 拉取请求,给其他项目提交代码 LGTM: Looks Good To Me. 看起来不错,代码已 review,可以合并 SGTM: Sounds Good To ...
- Linux用户在第一次登录时强制更改初始密码
迫使用户更改密码 如果你想迫使用户更改其密码,请使用下面这个命令. $ sudo chage -d0 <user-name> 最初,“-d <N>”选项应该被设成密码的“有 ...
- 每日一练PAT_B_PRAC_1002
NowCoder最近在研究一个数列:* F(0) = 7* F(1) = 11* F(n) = F(n-1) + F(n-2) (n≥2)他称之为NowCoder数列.请你帮忙确认一下数列中第n个数是 ...
- Codeforces_714
A.相遇时间段l = max(l1,l2),r = min(r1,r2),再判断k是否在里面. #include <iostream> using namespace std; long ...
- [Jinja2]本地加载html模板
import os from jinja2 import Environment, FileSystemLoader env = Environment(loader=FileSystemLoader ...
- BZOJ 2653 middle (可持久化线段树+中位数+线段树维护最大子序和)
题意: 左端点在[a,b],右端点在[c,d],求这个线段里中位数(上取整)最大值 思路: 对数组离散化,对每一个值建中位数的可持久化线段树(有重复也没事),就是对于root[i],大于等于i的值为1 ...
- sqlserver check running process 1
check process script 1, check which is current running: use master SELECTspid,ER.percent_complete,CA ...
- Mysql 5.7.18:主从复制,io优化
#目录 #挂盘#时间同步#master节点,进行如下操作: #下载安装 #初始化 #配置文件 #开机启动 #服务启动 #初始数据库#slave节点,进行如下操作: #下载安装 #初始化 #配置文件 # ...