[先看效果图]

　　

例如这种排版，常规有两种情况
　　1.把【“ & ”】+ 白色背景切一起

　　2.写结构的时候复杂，例如：div>img*2 +文字标签

　读到这里，可能有人说，第一种情况为什么两个引号不和白色背景切一张图，其实在我个人看来，一张大图的加载速度可能是没有两张小图加载的快，另外对于不会切图的前端小哥哥小姐姐来说，还要去找ui沟通，比较被动！
　　对于第二种情况，个人觉得页面排版有些臃肿，看着比较麻烦，还觉得有点乱

好了，言归正传，上我的排版
　　

看到这里，有没有觉得我的排版很简单，一个div里包含文字 ！ 下边贴上样式

没错，这里我用的是before + after　　

好了，到此就结束了，小可爱们可以去试试了

　　ps：这里给大家推荐一个超级好用的图片压缩工具

　　https://tinypng.com/　　

 

页面上icon较多，又不想使用臃肿的结构怎么办？的更多相关文章

  1. 解决WEB页面上"焦点控制"一法

    解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...

  2. 如何Spring Cloud Zuul作为网关的分布式系统中整合Swagger文档在同一个页面上

    本文不涉及技术,只是单纯的一个小技巧. 阅读本文前,你需要对spring-cloud-zuul.spring-cloud-eureka.以及swagger的配置和使用有所了解. 如果你的系统也是用zu ...

  3. 数据量大的数据转换成jason并显示在页面上

    代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...

  4. yaf将错误输出打印在页面上

    修改项目的配置文件 文件是conf/application.ini 添加两行代码 application.dispatcher.throwException = 1 ;开启/关闭自动异常捕获功能 ap ...

  5. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  6. 从数据库提取数据通过jstl显示在jsp页面上

    从数据库提取数据通过jstl显示在jsp页面上 1.ConnectDB.java连接数据库,把数据转换成list public class ConnectDB { private final stat ...

  7. spring从服务器磁盘读取图片，然后显示于前端页面上

    需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...

  8. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  9. yaf项目将500错误打印到页面上

    一般在yaf项目调试的时候,如果代码有错误,页面只会响应500错误,但看不到哪里报了什么错误,通过开启yaf的一个配置可以将错误信息显示在页面上. 打开项目的index.php入口文件,在开头加入如下 ...

随机推荐

  1. DWZ框架--页面样式丢失

    案例 今天我导入DWZ框架demo时,发现主页面样式丢失,出现了如下图那鬼样: 正常情况应该是有表格显示,并且用chrome开发者模式调试,可以看到有对应的样式,如下图所示: 先简单介绍下dwz框架的 ...

  2. 并发队列之PriorityBlockingQueue

    这一篇说一下PriorityBlockingQueue,引用书中的一句话:这就是带优先级的无界阻塞队列,每次出队都返回优先级最高或者最低的元素(这里规则可以自己制定),内部是使用平衡二叉树实现的,遍历 ...

  3. Unreal Engine 4 蓝图完全学习教程（三）—— 节点的基本知识

    Ⅰ.节点的种类 ①标题:在节点的上方显示着节点的标题,标题部分会根据节点类型显示不同的颜色. ②输入:用于从其他节点接收数据以获取必要的数值. ③输出:将这个节点计算出结果用于传递数值到其他节点. ( ...

  4. 1、OSI参考模型

    网络的层次模型:Core layer (核心层):高速转发,不建议做策略  Distribution layer (分布层,汇聚层):基于策略连接(路由控制,安全策略)Access layer (接入 ...

  5. 9. Palindrome Number QuestionEditorial Solution

    Determine whether an integer is a palindrome. Do this without extra space. click to show spoilers. S ...

  6. pyspark 记录

    import os import sys spark_name = os.environ.get('SPARK_HOME',None) if not spark_name: raise ValueEr ...

  7. shell命令之一天一见:awk

    AWK是一种优良的文本处理工具,Linux及Unix环境中现有的功能最强大的数据处理引擎之一. 这种编程及数据操作语言(其名称得自于它的创始人阿尔佛雷德·艾侯.彼得·溫伯格和布萊恩·柯林漢姓氏的首个字 ...

  8. POJ_3450_KMP

    http://poj.org/problem?id=3450 直接暴力枚举第一行的每一个字串,在下面的字符串中查找就行了,注意不符合就及时break. 然后试了一下strstr,发现效率是KMP的3- ...

  9. num10---适配器模式

    1.类适配器 Adapter类,通过继承 被适配的类,实现目标类的接口,完成适配. 分析: java 单继承,所以适配器类 需要继承 被适配类,这就要求目标类必须是接口,有一定局限性. 被适配类的方法 ...

  10. 9.3.2 map端连接-CompositeInputFormat连接类

    1.1.1         map端连接-CompositeInputFormat连接类 (1)使用CompositeInputFormat连接类需要满足三个条件: 1)两个数据集都是大的数据集,不能 ...