[先看效果图]

　　

例如这种排版，常规有两种情况
　　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. Spring 核心功能演示

    Spring 核心功能演示 Spring Framework 简称 Spring,是 Java 开发中最常用的框架,地位仅次于 Java API,就连近几年比较流行的微服务框架 SpringBoot, ...

  2. 解决git报错：error: RPC failed; curl 18 transfer closed with outstanding read data remaining 的方法

    报错信息: error: RPC failed; curl 18 transfer closed with outstanding read data remainingfatal: the remo ...

  3. Spring初识、新建工程

    1.spring与三层架构的关系: spring负责管理项目中的所有对象,是一个一站式的框架,容器中的对象决定了spring的功能. 2.spring核心架构 Spring框架主要由六个模块组成,在开 ...

  4. 隐马尔可夫(HMM)/感知机/条件随机场(CRF)----词性标注

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 7. 词性标注 7.1 词性标注概述 什么是词性 在语言学上,词性(Par-Of- ...

  5. nginx的进程结构

    nginx分为单进程和多进程,默认是多进程 进程架构: 父进程master process  子进程worker process和cache manager cache loader 高可用性 高可靠 ...

  6. java-zhisji

    1. int indexOf(int ch):用来检查给定的一个字符在当前字符串中第一次出现的下标位置.这里的下标和数组的下标意思相近,0表示该字符串的第1个字符,以此类推.当该字符串中并不     ...

  7. Spring基础(二)_面向切面(AOP)

    面向切面编程 面向切面编程[AOP,Aspect Oriented Programming]:通过预编译方式和运行期间动态代理实现程序功能的统一维护的技术.AOP 是 Spring 框架中的一个重要内 ...

  8. 情人节到了，Postman 都脱单了，那你咧？

    前言 Postman 是一款API接口调试工具,做过 Web 接口或多或少应该接触过. 通过它可以完成 Http 接口的调试,测试同学也可以基于此做一些自动化测试.另外 Postman 还提供其他高级 ...

  9. Multi-hierarchical Independent Correlation Filters for Visual Tracking（MFT）略读

    作者写道: 有幸在本届的VOT 2018 主赛中,我们的参赛方案Multi-solution Fusion for Visual Tracking(MFT)获得第一名的成绩,通过结果来看,MFT无论在 ...

  10. c++中的智能指针怎样释放连续的资源？

    以前学智能指针时有点想当然了,一直以为智能指针很智能,不管你让它管理的是单个资源还是连续的资源它都能正确的将资源释放,现在发现自己大错特错. 先看代码: #include <iostream&g ...