[先看效果图]

  

例如这种排版,常规有两种情况
 
 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. systemctl中添加mysql服务

    由于mysql的版本更新,许多术语有了新含义,所以需要特别指出,mysqld.service 等价于mysqld vim /usr/lib/systemd/system/mysqld.service ...

  2. 使用RKE快速部署k8s集群

    一.环境准备 1.1环境信息 IP地址 角色 部署软件 10.10.100.5 K8s Master Etcd.Control 10.10.100.17 K8s Worker1 Worker 10.1 ...

  3. Springboot | @RequestBody 接收到的参数对象属性为空

    背景 今天在调试项目的时候遇到一个坑,用Postman发送一个post请求,在Springboot项目使用@RequestBody接收时参数总是报不存在,但是多次检查postman上的请求格式以及项目 ...

  4. vb.net datagridview 使用方法

    目录:  1. 取得或者修改当前单元格的内容  2. 设定单元格只读  3. 不显示最下面的新行  4. 判断新增行  5. 行的用户删除操作的自定义  6. 行.列的隐藏和删除  7. 禁止列或者行 ...

  5. HDU_2510_打表

    http://acm.hdu.edu.cn/showproblem.php?pid=2510 dfs打表. #include<iostream> #include<cstdio> ...

  6. centos系统组件优化

    CentOS Linux在公司服务器上广泛被使用,本文总结了一些常见的加固方法. 基本原则: 最小的权限+最小的服务=最大的安全 操作之前先备份: 为避免配置错误无法登录主机,请始终保持有一个终端已用 ...

  7. Linux tcpdump 命令详解与示例

    命令概要 Linux作为网络服务器,特别是作为路由器和网关时,数据的采集和分析是不可少的.TcpDump 是 Linux 中强大的网络数据采集分析工具之一. 用简单的话来定义tcpdump,就是:du ...

  8. Metasploit学习笔记(一) Samba服务 usermap_script安全漏洞相关信息

    一.Samba介绍 Samba是linux和unix系统上实现smb协议的一个免费软件,由客户机和服务器构成.SMB是一种在局域网上实现共享文件和打印机的协议.存在一个服务器,客户机通过该协议可以服务 ...

  9. tomcat增加内存 JVM内存调优

    tomcat总是卡死,查看日志catalina.out 发现疯狂报错 如下,提示内存溢出 java.lang.OutOfMemoryError: Java heap space 此外常见的内存溢出有以 ...

  10. ELK(V7)部署与架构分析

    1.ELK的背景介绍与应用场景 在项目应用运行的过程中,往往会产生大量的日志,我们往往需要根据日志来定位分析我们的服务器项目运行情况与BUG产生位置.一般情况下直接在日志文件中tailf. grep. ...