[先看效果图]

　　

例如这种排版，常规有两种情况
　　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. 【WPF学习】第三十五章 资源字典

    如果希望在多个项目之间共享资源,可创建资源字典.资源字典只是XAML文档,除了存储希望使用的资源外,不做其他任何事情. 一.创建资源字典 下面是一个资源字典示例,它包含一个资源: <Resour ...

  2. inode和block的理解

    什么是inode和block? 所谓的inode就是索引节点(index node)的意思,在每一个存储设备被格式化创建文件系统后,所有的文件大致被分为了两部分,分别是inode和block. 其中i ...

  3. Spring的aop思想

    1.AOP思想 (1)在解决中文乱码的应用: 一般情况下如果在Servlet中要解决中文乱码问题需要在每一个Servlet中书写解决乱码的代码,但是,在运用了过滤器之后,就不再需要每一个Servlet ...

  4. 搭建一个V 2ray的方法

    VPS构建VPN教程 (由于博客限制有些敏感词 V 2ray中间会打空格或者(删掉我)图片中的敏感词进行了马赛克处理) 关于自建VPN翻墙教程,此处是利用V 2 ray的一个VPS搭建VPN教程.便于 ...

  5. [兴趣使然]用python在命令行下画jandan像素超载鸡

    下午刷煎蛋的时候看到 Dthalo 蛋友发的系列像素超载鸡,就想自己试试用python脚本画一个,老男孩视频里的作业真没兴趣,弄不好吧没意思,往好了写,自己控制不好,能力不够. 所以还是找自己有兴趣的 ...

  6. LeetCode22 生成所有括号对

    本文始发于个人公众号:TechFlow,原创不易,求个关注 链接 Generate Parentheses 难度 Medium 描述 Given n pairs of parentheses, wri ...

  7. [C/C++]const限定符总结

    const限定符 const是一种限定符,被const所限定的变量其值不可以被改变. const的初始化 由于const一旦创建其值就不能够被改变,所以我们必须对其进行初始化 const int a; ...

  8. 你知道EasyX吗

    关于C++控制台上的图形界面,你知道一个东西叫做EasyX吗? 作为一个退役的OI选手(WTF?\(3^2-3^1\)年级退役?),在退役之后总想找点事情做. 开发个游戏?(我只会控制台) 学下人工智 ...

  9. DeBug Python神级工具PySnooper

    安装 pip3 install pysnooper import pysnooper @pysnooper.snoop() def number_to_bits(number): if number: ...

  10. 1282 - Leading and Trailing 求n^k的前三位和后三位。

    1282 - Leading and Trailing You are given two integers: n and k, your task is to find the most signi ...