[先看效果图]

　　

例如这种排版，常规有两种情况
　　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. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. Android教程2020 - RecyclerView获取滑动距离

    获取RecyclerView滑动的距离. Android教程2020 - 系列总览 本文链接 前面我们已经用RecyclerView显示一些数据. 本文演示如何获取RecyclerView的滑动距离. ...

  3. css的选择器及它的种类特性？

    今天主要说的是选择器的基础, 首先看,选择器的优先级:!important > 行间样式 > id选择器 > class 选择器 == 属性选择器 > 标签选择器 > 通 ...

  4. ROS中3D机器人建模(五)

    一.创建一个差速驱动移动机器人模型 前面我们已经创建了一个7-DOF机械臂机器人模型,接下来我们将创建一个差速机器人模型,差速轮式机器人在机器人底盘的两端安装两个轮子, 整个底盘由一个或两个脚轮支撑. ...

  5. centos7安装lnmp

    一.配置CentOS 第三方yum源(CentOS默认的标准源里没有nginx软件包) [root@localhost ~]# yum install wget #安装下载工具wget [root@l ...

  6. ubuntu+mysql+php+apache2+wordpress建站全记录

    虽然操作并不难,但用到的各种命令,各种坑的解决方法还需要记一下 建好的博客: 念诗之人的博客 VPS和域名选购 VPS选购 国内外有很多商家可供选择,国内有如阿里云,百度云,腾讯云等(ECS,BCC等 ...

  7. <七>对于之前的一些遗漏的地方的补充

    1.线程的状态: 我们可以通过wait,start,notify等关键字来切换线程的状态,但是我们如何知道线程目前是处于哪一种状态呢?使用Thread.getState()来获取,有下面几种常见的状态 ...

  8. 【WPF学习】第四十三章 路径和几何图形

    前面四章介绍了继承自Shape的类,包括Rectangle.Ellipse.Polygon以及Polyline.但还有一个继承自Shape的类尚未介绍,而且该类是到现在为止功能最强大的形状类,即Pat ...

  9. 动手学习Pytorch(6)--卷积神经网络基础

    卷积神经网络基础 本节我们介绍卷积神经网络的基础概念,主要是卷积层和池化层,并解释填充.步幅.输入通道和输出通道的含义.   二维卷积层 本节介绍的是最常见的二维卷积层,常用于处理图像数据.   二维 ...

  10. 《Head first设计模式》之单例模式

    单例模式(书中叫单件模式,个人习惯叫单例)确保一个类只有一个实例,并提供一个全局访问点. 有一些对象我们只需要一个,比方说:线程池.缓存.对话框.处理器偏好设置和注册表的对象等等.事实上,这类对象只能 ...