- 博客(17)
- 收藏
- 关注
RSS订阅转载 bootstrap图标菜单按钮组件
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"&g...
2017-06-29 16:12:00
122
转载 vue指令
v-bind 动态的绑定数据，简写为 : v-on 绑定事件监听器，简写为 @ v-text 更新数据，会覆盖已有结构 v-html 可以解析数据中的html v-show 根据值的真假，切换元素的display属性 v-if 根据值的真假，切换元素会被销毁、重建 v-else-if 多条件判断，为真则渲染 v-fo...
2017-05-18 13:51:00
128
转载 截取指定字数
截取指定字数，可以按照半角全角以及字母来截取，兼容IE9以及以上浏览器 html: <h2>控制只显示32个字过长显示省略号</h2> <div id="divbox"></div> css: #divbox{ width:300px; color:red; height:200p...
2017-05-11 17:25:00
135
转载 jquery 实现考试倒计时
html: <div class="countdown"> <p class="mtp"><span class="countdown_text">答题倒计时</span></p> <p class="line_height34"><span id="countdown...
2017-05-10 15:50:00
401
转载 楼层导航
鼠标滚动到某个楼层，某个楼层的楼层按钮高亮显示，点击左边的楼层按钮，页面直接定位到这个楼层 html： <div style="height: 100px;text-align: center" class="head">头部</div> <div class="main"> <div style="backgro...
2017-05-10 14:37:00
179
转载 根据容器的高度进行截取字符的长度
在实际工作中，很多时候都会有几行几行之后显示省略号的需求，都知道单行省略号的需求很简单，三个属性就实现了(overflow:hidden;text-overflow:ellipsis;white-space:nowrap;),但是多行的话，就稍微麻烦一些了，网上也有很多实现方法，但很多都不兼容，那下面就说一下用js实现多行之后多余的显示省略号。 html: &...
2017-05-10 11:47:00
145
转载 选项卡
常见选项卡之一： html: <button class="b">1</button> <button>2</button> <button>3</button> <button>4</button> <div class="active">1111</di...
2017-05-09 11:19:00
102
转载 屏幕水平居中垂直居中
不管左边的盒子放大还是缩小，中间的盒子始终水平垂直居中 html: <div class="sidebar"><a href="###" class="click">点击缩小左侧导航宽度</a></div> <div class="notebar"> <p>我始终在中间</p>...
2017-05-09 10:25:00
97
转载 移动端的头部标签和meta
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --> <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 --> <head> <!-- 声明文档使用的字符编码 --> <meta charset='u...
2017-05-04 17:22:00
101
转载 reset css
通用版（基本适用于所有的页面） body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0}...
2017-05-04 17:17:00
69
转载 遮罩
根据屏幕的宽高，弹框永远在页面垂直水平居中。 页面布局如下： <!--按钮--> <div class="checkbox"> <a href="javascript:0;" class="cd-popup-trigger3">播放</a> </div> <!...
2017-04-30 18:16:00
105
转载 css3 transform
transform 属性向元素应用 2D 或 3D 转换，允许我们对元素进行旋转（rotate）、缩放（scale）、移动（translate）或倾斜（skew）。 浏览器支持情况： Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-...
2017-04-19 14:45:00
88
转载 jq图片懒加载
在图片比较多的页面中，如果一次性把所有的图片全部加载出来，不仅加载速度慢，还会对服务器造成不小的压力，也浪费了带宽（不是每个用户都会从头至尾看完所有页面内容），那么在图片比较多的情况下，我们就可以采取图片懒加载的形式来解决这个问题。 jq中有一个lazyload.js的插件，方便好用，下面简单的介绍一下这个插件的用法 1.lazyload.js是依赖于jq的，所以在使用laz...
2017-04-19 11:37:00
96
转载 transition
<div> <a href="javascript:;"></a></div> a{ text-decoration: none; width: 30px; height: 30px; background: #000; border-radius: 50px; position: absolute; top:...
2017-04-17 17:27:00
100
转载 css3动画
目前浏览器都不支持 @keyframes 规则，Firefox 支持替代的 @-moz-keyframes 规则，Opera 支持替代的 @-o-keyframes 规则，Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。动画过程中，您能够...
2017-04-17 15:51:00
96
转载 div水平垂直居中的方法
1.盒子没有固定的宽和高 方法1.Transforms变形 这是比较简单的方法，不仅能实现绝对居中的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%。但是不兼容IE8以及以下，可能干扰其他transform效果，某些情形下会出现文本或元素边界渲染模糊的现...
2017-04-17 14:59:00
109
转载 一行文字的时候，文字在整个盒子中垂直水平居中，超过一行之后，文字在盒子中垂直水平居中，文字左对齐...
在现实工作中，很多时候会有一些比较奇怪的需求，但即使是奇怪，但还是需要去实现。最近，在工作中，遇到一个需求，是这样的： 1、标题只有一行文字的时候，整个标题在一个div中需要垂直水平居中，文字也是居中对齐 2、当标题超过一行的时候，那么标题在这个div中需要垂直水平居中，但是文字变成了左对齐 根据如上描述，其实所用到的知识点也就那么几个: 1、未...
2017-04-11 21:16:00
588
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人