Layui表格，序号列自动产生序号
摘要：HTML部分： 创建一个表格容器 <table class="layui-hide" id="table" lay-filter="table"></table> js渲染部分： <script> layui.use(['table','form'], function(){ let table =
阅读全文
posted @
2022-02-16 14:09
栋H栋
阅读(3233)
推荐(0) 编辑
鼠标移入，变放大图片的按钮样式
摘要：例子： html部分： <img src = "../1.jpg" id = "img1"> CSS部分： #img1{ cursor: zoom-in; //放大图标 cursor: zoom-out; //缩小图标 } 效果图： 放大图标： 缩小图标：
阅读全文
posted @
2021-06-03 10:38
栋H栋
阅读(179)
推荐(0) 编辑
Chrome浏览器不支持小于12px的字体大小
摘要：可以利用css3的缩放属性：transform:scale() .small-font{ font-size: 12px; -webkit-transform: scale(0.5); } 引用原文： https://www.jianshu.com/p/5991523a98f9
阅读全文
posted @
2020-12-11 15:48
栋H栋
阅读(100)
推荐(0) 编辑
纯 CSS + DIV 实现带小三角div矩形
摘要：/*正方形样式*/ #demo{ width:96px; height: 96px; border:2px solid #0cc; background-color: #fff; position:absolute; } /*小三角形*/ #demo:before,#demo:after{ widt
阅读全文
posted @
2020-12-11 15:32
栋H栋
阅读(1451)
推荐(0) 编辑
layui.form is not a function
摘要：原因：layui版本不同，写法、语法不一样 改变： var form = layui.form; 如果你是从1.x升级2.x造成的，那只需要在定义的时候吧后面的()去掉就可以了。请关注更新日志: 1.x 升 2.0 特别注意事项 layDate日期模块、layPage分页模块、Upload上传模块等
阅读全文
posted @
2020-09-07 11:40
栋H栋
阅读(1126)
推荐(0) 编辑
fixed定位的元素，滑动滚动条后点击事件失效
摘要：给定位的元素加了一个：z-index:1; 定位的元素是一个图片： <img src="../../a.jpg" style="position:fixed; right:17%; top:17%; z-index:1;" onclick="ha();" 原理没搞懂，试着可以解决问题。先记录一下
阅读全文
posted @
2019-11-21 11:55
栋H栋
阅读(972)
推荐(0) 编辑
bootstrap输入框前端的图标不能对齐的解决
摘要：<span class="input-group-addon glyphicon glyphicon-user"></span> 换成： <span class="input-group-addon " ><span class="glyphicon glyphicon-user " ></span
阅读全文
posted @
2019-09-16 09:45
栋H栋
阅读(713)
推荐(0) 编辑
a标签去除默认样式
摘要：/*包含以下四种的链接*/ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none; } /*鼠标划过(
阅读全文
posted @
2019-09-16 09:33
栋H栋
阅读(33708)
推荐(1) 编辑
鼠标移入，元素宽度在2秒的时间里变宽
摘要：div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover { width:300px; }
阅读全文
posted @
2019-08-19 16:41
栋H栋
阅读(359)
推荐(0) 编辑
li里包含span标签也可以超出部分显示省略号
摘要：overflow:hidden; width:8em; 每行li显示几个字（这个例子是8个字） text-overflow:ellipsis 超出部分显示省略号 也可以使用js获取到要显示固定字数的标签，检查元素的长度(这里以 .a 为例) jQuery写法：$(".a").html().lengt
阅读全文
posted @
2019-08-19 16:27
栋H栋
阅读(755)
推荐(0) 编辑
CSS选中最后一个li
摘要：.class ul li:nth-child(1):选择中最后一个li.box ul li:nth-child(1){ margin-right:0;}
阅读全文
posted @
2019-08-19 15:59
栋H栋
阅读(4391)
推荐(0) 编辑
bootstrap一行表格内同时有文字和按钮de时候，使文字和按钮同时垂直、水平居中
摘要：.table th, .table td { text-align: center; vertical-align: middle!important; }
阅读全文
posted @
2019-08-19 15:58
栋H栋
阅读(623)
推荐(0) 编辑
让div不独占一行
摘要：以 div A 和 B为例，宽高为100px。 1、使div浮动起来，效果图如下 2、给 div 添加CSS属性 display：inline； 但是这样会造成 div 的宽高无效，宽高是被 div 内的内容撑开的，效果如下图： 使用 display：inline-block； 效果如下图： 但是这
阅读全文
posted @
2019-06-23 23:39
栋H栋
阅读(8127)
推荐(0) 编辑
float浮动后，父级元素高度塌陷和遮盖问题
摘要：当子元素不浮动的时候，父元素的高度是由子元素撑起来的。 子元素A和B是两个div，独占一行 效果如图： 当子元素B浮动起来之后，父元素高度塌陷到只剩子元素A的高度 效果如图： 当给子元素A（div）设置CSS属性：display：inline 后，A的宽高将不起作用，宽高由内容撑开，即被字母A撑开。
阅读全文
posted @
2019-06-23 23:39
栋H栋
阅读(1084)
推荐(0) 编辑
页面背景透明
摘要：给想要设置的页面添加一个背景色，透明度设置为完全透明就可以了 页面背景透明：background:rgba(255,255,255,0.5); 括号里最后的一项 0.5就是透明度，改成0就是完全透明了；
阅读全文
posted @
2019-05-16 11:29
栋H栋
阅读(355)
推荐(0) 编辑
鼠标变小手的方式
摘要：方式一、 给要变小手的元素添加css样式cursor:pointer; 用 cursor:pointer 来的方便 用JS使鼠标变小手onmouseover(鼠标越过的时候)onmouseover="this.style.cursor='hand'"方式二、 href="javascript:voi
阅读全文
posted @
2019-05-16 11:26
栋H栋
阅读(556)
推荐(0) 编辑
弹性盒子的理解
摘要：弹性盒子： display: flex; ：是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列 如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局 direction ：rtl 属
阅读全文
posted @
2019-03-12 11:00
栋H栋
阅读(535)
推荐(0) 编辑
css3的初步接触
摘要：1、边框的圆角 border-radius: 25px; 圆角弧度的大小 可以设置边框、背景色、背景图片的圆角效果及其圆角大小 background: #ccc; 设置背景色的圆角 border: 5px solid #ccc; 设置边框的圆角效果 background-image: url(../
阅读全文
posted @
2019-03-07 23:44
栋H栋
阅读(306)
推荐(0) 编辑
