页面上icon较多,又不想使用臃肿的结构怎么办?
[先看效果图]
例如这种排版,常规有两种情况
1.把【“ & ”】+ 白色背景切一起
2.写结构的时候复杂,例如:div>img*2 +文字标签
读到这里,可能有人说,第一种情况为什么两个引号不和白色背景切一张图,其实在我个人看来,一张大图的加载速度可能是没有两张小图加载的快,另外对于不会切图的前端小哥哥小姐姐来说,还要去找ui沟通,比较被动!
对于第二种情况,个人觉得页面排版有些臃肿,看着比较麻烦,还觉得有点乱
好了,言归正传,上我的排版
看到这里,有没有觉得我的排版很简单,一个div里包含文字 ! 下边贴上样式
没错,这里我用的是before + after
好了,到此就结束了,小可爱们可以去试试了
ps:这里给大家推荐一个超级好用的图片压缩工具
页面上icon较多,又不想使用臃肿的结构怎么办?的更多相关文章
- 解决WEB页面上"焦点控制"一法
解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...
- 如何Spring Cloud Zuul作为网关的分布式系统中整合Swagger文档在同一个页面上
本文不涉及技术,只是单纯的一个小技巧. 阅读本文前,你需要对spring-cloud-zuul.spring-cloud-eureka.以及swagger的配置和使用有所了解. 如果你的系统也是用zu ...
- 数据量大的数据转换成jason并显示在页面上
代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...
- yaf将错误输出打印在页面上
修改项目的配置文件 文件是conf/application.ini 添加两行代码 application.dispatcher.throwException = 1 ;开启/关闭自动异常捕获功能 ap ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- 从数据库提取数据通过jstl显示在jsp页面上
从数据库提取数据通过jstl显示在jsp页面上 1.ConnectDB.java连接数据库,把数据转换成list public class ConnectDB { private final stat ...
- spring从服务器磁盘读取图片,然后显示于前端页面上
需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
- yaf项目将500错误打印到页面上
一般在yaf项目调试的时候,如果代码有错误,页面只会响应500错误,但看不到哪里报了什么错误,通过开启yaf的一个配置可以将错误信息显示在页面上. 打开项目的index.php入口文件,在开头加入如下 ...
随机推荐
- List容器排序方法的使用
今天在做任务的时候需要对已经存到list容器里的对象数组进行排序,需要根据 其中的一个属性进行排序,最初是根据一个利用冒泡排序的算法进行处理的后来上网查了一下对于list容器进行排序时有自带的方法.所 ...
- 计算机网络 & 网络编程 期末总结与测评题
第一部分:网络编程部分的相关知识 Socket套接字定义: 套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作.套接字允许应用程序 ...
- Ops:jar包启动关闭脚本
简介 公司开发架构为java语言的rpc dubbo架构,将功能分解为各个模块,模块较多,发布到环境上的应用为编译后的jar包和配置文件,以及启动关闭jar包的shell脚本.之前经常会出现进程启动不 ...
- JMeter+Grafana+Influxdb搭建可视化性能测试监控平台(待继续完善。。。)
influxdb下载.安装.配置.启动 InfluxDB是一个当下比较流行的时序数据库,InfluxDB使用 Go 语言编写,无需外部依赖,安装配置非常方便,适合构建大型分布式系统的监控系统. 下载: ...
- js + php服务器推送see(自定义推送时间)
//javascript code var source = new EventSource("./main.php"); source.onmessage=function(ev ...
- postman简单接口测试
Postman简单接口测试 1. get请求: a. 选择get请求时,地址栏输入地址,如果需要添加参数,可以直接在地址栏加?后面写参数,也可以在点击params添加参数 b. 在headers中添加 ...
- Nginx location配置 正则表达式
一. location 的匹配符 Syntax: location [ = | ~ | ~* | ^~ ] uri { ... }location @name { ... } 1. 语法格式 ...
- 保留yum安装的软件包
文件路径 /etc/yum.conf [root@opvnserver ~]# grep "keepcache" /etc/yum.conf keepcache=0 [root@o ...
- JMeter接口测试-如何循环使用接口返回的多值?
前言 在用JMeter做接口测试的时候,经常会遇到这样一种情况:一个接口请求返回了多个值,然后下一个接口想循环使用前一个接口的返回值:第二种情况:只想循环请求前一个接口返回值中的随机不定长度的某一些值 ...
- 珠峰-6-node
1. js主线程是单线程的. 2. path.resolve 传('/')解析出一个绝对路径.