页面上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入口文件,在开头加入如下 ...
随机推荐
- 这个菜鸟花几个小时写的 DEMO 被码云推荐上首页 ?
写在最前 没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解.最近 病毒猖獗,遂抽空做了一个相关小 DEMO.数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成 ...
- t-io Java构建p2p网络
Java 构建p2p网络 这篇文章是一篇关于pbft算法实现的一篇补充文章,但是在这里不会涉及pbft的算法方面,所以可以当做一篇单独的文章食用.如果想查看关于区块链或者PBFT算法的文章,可以参考一 ...
- QT笔记:数据库总结
http://blog.csdn.net/reborntercel/article/details/6991147 #include <QtSql> QT += sql QSqlDatab ...
- 浅谈二分—— by hyl天梦
二分 解决范围 二分法可以用来解决这一系列具有单调性质的题,例如求单调函数的零点 其实在小学奥数中就用到了二分法 例如手动开根号,再比如猜数游戏 二分的具体过程就是先取一个中间值,判定一下正确答案在哪 ...
- [转载]goldendict下优质词典简介及安装
使用Arch Linux一年以来,如果要问自己最为中意的词典程序是? 当然是Goldendict啦!想详细了解这款瑞士军刀的请猛戳这里. 以前在Win下都是用的lingoes, 感觉还不错,词典库很全 ...
- Speech Super Resolution Generative Adversarial Network
博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/10874993.html 论文作者:Sefik Emre Eskimez , Kazuhito K ...
- Springboot全局事务处理
什么是全局事务 Spring Boot(Spring)事务是通过aop(aop相关术语:通知(Advice).连接点(Joinpoint).切入点(Pointcut).切面(Aspect).目标(Ta ...
- 小白学 Python 数据分析(6):Pandas (五)基础操作(2)数据选择
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- WLAN802.11
IEEE 802.11,1997年,原始标准(2Mbit/s,播在2.4GHz).DSSS, FHSS.该协议的一大缺点是它提供了太多的选择使得互操作性很难实现.所以它不严密,更像是一个beta标准, ...
- Tomcat 配置2 tomcat-users.xml
Tomcat的配置 Tomcat的主要配置文件有3个,分别是: Tomcat-users.xml. web.xml server.xml. 配置Tomcat-users.xml 该文 ...