[先看效果图]

　　

例如这种排版，常规有两种情况
　　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. try catch finally的理解

    定义以及用法: try/catch/finally 语句用于处理代码中可能出现的错误信息. 错误可能是语法错误,通常是程序员造成的编码错误或错别字.也可能是拼写错误或语言中缺少的功能(可能由于浏览器差 ...

  2. HTML5的web 存储localStorage、sessionStorage

    说明 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...

  3. koa中间执行机制

    start 基于 koa 2.11 按以下流程分析: const Koa = require('koa'); const app = new Koa(); const one = (ctx, next ...

  4. ROS和Gazebo进行机器人仿真(一)

    Gazebo是一种多机器人仿真器,可用于室内外机器人仿真.Gazebo在ROS中有良好的接口,包含ROS和Gazebo的所有控制. 若要实现ROS到Gazebo的通信,我们必须安装ROS-Gazebo ...

  5. 11、ACL

    IP访问控制列表 标准ACL 1)检查源地址 2)不能对协议簇作限定 扩展ACL 1)检查源和目标地址 2)能容许或拒绝特定的协议和应用(端口号) 区别列表类型: 1)ACL号 : 1-99,1300 ...

  6. Android之SimpleAdapter简单实例和SimpleAdapter参数说明

    SimpleAdapter基本上认知了其参数含义 用起来就简单多了 SimpleAdapter的参数说明 第一个参数 表示访问整个android应用程序接口,基本上所有的组件都需要  第二个参数表示生 ...

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

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

  8. Jmeter源码编译缺bouncycastle包

    Jmeter源码下载后install没问题,运行newDrive时会包包不存在,因为下载时缺少三个包没下载成功,点击链接下载并放到lib目录下即可 下载

  9. shell命令之一天一见

    一.在统计行数时常要用的到命令包括 w.c.l, 在这里做个简单的介绍. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也 ...

  10. ajax jsonp跨域 【转】

    跨域的基本原理:    JSONP跨域GET请求是一个常用的解决方案,    JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...