我的前端工具集(七)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. UOJ#288:基础数据结构练习题

    题面 UOJ Sol 玄学,不会势能分析 所以 维护区间最大最小值 把开根变成区间减法 如果最大值开根后的变化量和最小值的相等,就直接打个减法\(lazy\) # include <bits/s ...

  2. 前端面试经典题目合集(HTML+CSS)一

    1.说说你对HTML语义化的理解? (1)什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. ( ...

  3. Python-约束和异常处理

    今天我们来说一说类的规范以及程序出现错误后我们要怎么进行处理 一.类的约束 首先,你要清楚,约束是对类的约束,比如,现在你是一个项目经理,然后呢,你给手下的人分活,张三你处理一下普通用户登录,李四你处 ...

  4. 在vue中安装使用vux

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一 ...

  5. webapi datetime类型序列化成json带T且时间不对问题的解决

    在global.asax.cs里加入如下代码: protected void Application_Start() { GlobalConfiguration.Configuration.Forma ...

  6. VC添加文件到工程出错问题--FileTool.dll

    原文:http://blog.csdn.net/bingdianlanxin/article/details/45112737 在我们的软件开发中,经常需要导入其他文件到我们的工程. 一般,我们会选择 ...

  7. Android GridView设置行数

    普通的做法是设置一个高度,然后里面能显示出来几行就是几行,如果里面的内容高度变了,就需要重新调整高度来适配. 观察了一下它的onMeasure @Override protected void onM ...

  8. visual studio code断点调试react

    在项目配置文件   .vscode\launch.json 中添加:   "sourceMaps": true,   "skipFiles": [   &quo ...

  9. 初学scrum及首次团队开发

    一.初学scrum 1.什么是scrum Scrum在英语的意思是橄榄球里的争球.而在这里Scrum是一种迭代式增量软件开发过程,经常性的被用于敏捷软件开发.Scrum包括了一系列实践和预定义角色的过 ...

  10. Http超文本传输协议

    HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...