[先看效果图]

  

例如这种排版,常规有两种情况
 
 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. 这个菜鸟花几个小时写的 DEMO 被码云推荐上首页 ?

    写在最前     没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解.最近 病毒猖獗,遂抽空做了一个相关小 DEMO.数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成 ...

  2. t-io Java构建p2p网络

    Java 构建p2p网络 这篇文章是一篇关于pbft算法实现的一篇补充文章,但是在这里不会涉及pbft的算法方面,所以可以当做一篇单独的文章食用.如果想查看关于区块链或者PBFT算法的文章,可以参考一 ...

  3. QT笔记:数据库总结

    http://blog.csdn.net/reborntercel/article/details/6991147 #include <QtSql> QT += sql QSqlDatab ...

  4. 浅谈二分—— by hyl天梦

    二分 解决范围 二分法可以用来解决这一系列具有单调性质的题,例如求单调函数的零点 其实在小学奥数中就用到了二分法 例如手动开根号,再比如猜数游戏 二分的具体过程就是先取一个中间值,判定一下正确答案在哪 ...

  5. [转载]goldendict下优质词典简介及安装

    使用Arch Linux一年以来,如果要问自己最为中意的词典程序是? 当然是Goldendict啦!想详细了解这款瑞士军刀的请猛戳这里. 以前在Win下都是用的lingoes, 感觉还不错,词典库很全 ...

  6. Speech Super Resolution Generative Adversarial Network

    博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/10874993.html 论文作者:Sefik Emre Eskimez , Kazuhito K ...

  7. Springboot全局事务处理

    什么是全局事务 Spring Boot(Spring)事务是通过aop(aop相关术语:通知(Advice).连接点(Joinpoint).切入点(Pointcut).切面(Aspect).目标(Ta ...

  8. 小白学 Python 数据分析(6):Pandas (五)基础操作(2)数据选择

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  9. WLAN802.11

    IEEE 802.11,1997年,原始标准(2Mbit/s,播在2.4GHz).DSSS, FHSS.该协议的一大缺点是它提供了太多的选择使得互操作性很难实现.所以它不严密,更像是一个beta标准, ...

  10. Tomcat 配置2 tomcat-users.xml

    Tomcat的配置 Tomcat的主要配置文件有3个,分别是:    Tomcat-users.xml.    web.xml    server.xml. 配置Tomcat-users.xml 该文 ...