我的前端工具集(七)div背景网格

 

liuyuhang原创,未经允许禁止转载

目录

我的前端工具集

有时候总觉得div颜色过于白,于是给了10%的灰

但是并不一定能解决问题,因为页面中会有不均衡的空白处,导致大面积灰有些暗淡

于是想给div背景加上网格

1.css代码

.gridbackground { /*网格背景*/
/*90度直线,100灰度,0.1透明度,5%宽度,0透明度背景*/
background: linear-gradient(90deg, rgba(100, 100, 100, 0.1) 5%, transparent 0),
/*0度直线,100灰度,0.1透明度,5%宽度,0透明度背景*/
linear-gradient(rgba(100, 100, 100, 0.1) 5%, transparent 0);
/*横纵向宽距*/
background-size: 20px 20px;
}

2.指定div中的class

     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 stripe" id="assetShowTree">
<h4>资产列表加载中...</h4>
</div>

3.效果

以上!

我的前端工具集(七)div背景网格的更多相关文章

  1. 我的前端工具集(六)Ajax封装token

    我的前端工具集(六)Ajax封装token   liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都 ...

  2. 我的前端工具集(八)获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  3. 都2022年了,你的前端工具集应该有vueuse

    摘要:一款基于Vue组合式API的函数工具集. 本文分享自华为云社区<vueuse:我不许身为vuer的前端,你的工具集只有lodash!>,作者: 前端要摸鱼 . vueuse 是什么? ...

  4. 前端工具之WebPack解密之背景

    请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPa ...

  5. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  6. Visual Studio 2015和ASP.NET 5中可用的前端开发工具集

    最近微软发布了一本白皮书,谈到了一些可以和Visual Studio 2015和ASP.NET 5配合使用的JS/前端Web开发工具(比如:函数库.任务执行器.框架等). 由于现在前端开发的生态系统在 ...

  7. 前端好的工具集推荐 lodash

    原来用 backbone 的时候, 感觉 underscore 是一个好的工具集,顿时感觉不错,不用自己一直去封装一些组件. 直到我遇到了 lodash,一只发现 web 项目中有依赖这个库的,但是一 ...

  8. 前端工具之WebPack解密--使用

    接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...

  9. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

随机推荐

  1. css设置一行显示,超出部分显示...

    碰到一些介绍时候需要一行显示,然后超出部分用...替代 white-space: nowrap;不换行显示text-overflow: ellipsis;以...显示overflow: hidden; ...

  2. ArcGIS 编程中对接口的理解

    学习AO,最重要的是理解“接口”这个概念.接口是什么?有什么具体作用?在多种计算机高级语言中,都可以看到“接口”这个术语,但基本上每一本书对“为什么使用接口”等重要文都都“语焉不详”,使得初学者往往不 ...

  3. C++程序员必需的修养

    原文:http://www.cnblogs.com/ctoroad/archive/2006/03/24/357423.html 我总结了在用C/C++语言(主要是C语言)进行程序写作上的三十二个“修 ...

  4. SpringMVC学习(六)——@InitBinder注解

    有些类型的数据是无法自动转换的,比如请求参数中包含时间类型的数据,无法自动映射到Controller里的Date参数.需要使用@initBinder注解为binder提供一个数据的转换器,这个转换器可 ...

  5. 一段SQL代码

    begin transaction set quoted_identifier on set arithabort on set numeric_roundabort off set concat_n ...

  6. 应用线性代数简介 - 向量,矩阵和最小二乘法 By Stephen Boyd and Lieven Vandenberghe

    Introduction to Applied Linear Algebra – Vectors, Matrices, and Least Squares 应用线性代数简介 - 向量,矩阵和最小二乘法 ...

  7. HDU 3420 -- Bus Fair ACM

    Bus Fair Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  8. 贴现率d与利率i

    一.复利中的实际利率 it=(1+i)t -(1+i)t-1  /   (1+i)t-1=i i 为常数, 而单利的实际利率递减 二.贴现 时间t的1元在时间零点的价值为贴现函数 记为 a-1(t) ...

  9. iostat -x命令诊断

    -x 参数iostat还有一个比较常用的选项-x,该选项将用于显示和io相关的扩展数据. iostat -d -x -k 1 10Device:    rrqm/s wrqm/s   r/s   w/ ...

  10. oracle 函数 WMSYS.WM_CONCAT 与对应 mysql 函数GROUP_CONCAT的用法

    1.oracle函数 WMSYS.WM_CONCAT的使用 如图,将图1的结果变成图2的结果,使用函数 WMSYS.WM_CONCAT 即可. 查询语句需要配合使用group by select aa ...