- 博客(22)
- 收藏
- 关注
RSS订阅转载 position:absolute的小坑
一般说道元素居中显示会有多种方法，今天使用一个很常见水平居中的方式~即父元素相对定位，子元素绝对定位然后left：50%~再让其margin-left偏移负的子元素宽度的一般~因为一些特殊的需求~没有给子元素设置尺寸~而是使用js获取元素的宽度在通过js去操作器margin-left~于是就出现了个比较坑的问题~css那边没有设置尺寸~仅仅给子元素设置了position:absolute...
2016-04-13 18:55:00
285
转载 小谈angualr $q
以一个$()请求为例代码如下$http({ method:'GET', url:'../temp.json'}).then(function(data) { // data为返回的数据对象 console.log('请求成功'); }, function(err) { // err为请求失败后...
2016-04-12 00:42:00
91
转载 利用flexbox实现li翻转显示
时常遇到要将多个li项翻转显示的需求~可以编写相应的js来实现~但在支持flexBox布局的浏览器中可以利用这一布局的特性巧妙地实现li的翻转显示~实现如下：（可以使用注释起来的方式快速生成多个li标签~）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
2016-03-16 00:32:00
147
转载 绝对定位注意点
块级元素不设置宽度时默认占父元素的100%~如果块级元素没有设置大小~同时又给该块级元素设置了绝对定位~那它会缩成一个点~下面一段代码：<!DOCTYPE html><html> <head ln="en"> <meta charset="utf-8"> <meta http-...
2015-11-21 00:37:00
122
转载 浅谈setTimeout与setInterval
在吐槽这两个欺骗人的感情的方法之前先提一下这两个函数的用法：setTimeout( function(){ alert(’你好!’); } , 100);setInterval( callbackFunction , 100);上述两函数第一个是指延迟100ms后执行回到函数打印“你好”第二个函数是指每隔100ms就执行一次callbackFunction函数但是当我们写...
2015-11-19 13:12:00
99
转载 bing智能提示搜索框实现
1、将一张大图铺满窗口~实现方式：.bg-div-class { background-image: url("../images/river.jpg"); position: fixed; width: 100%; height: 100%;}*有时~可能需要设置z-index为一个较大的值2、为了实现智能提示的功能...
2015-11-16 12:33:00
316
转载 eval()和JSON.parse()的区别
我们将一个字符串解析成json对象时可以使用两种方法：假设我们有一个json格式的字符串：'{ "student" : [ {"name":"鸣人","age":17}, {"name":"小樱","age":17}, {"name":"佐助","age":17} ]}'然后我们需要把它解...
2015-11-14 23:41:00
129
转载 浅谈web存储
1、先来说说之前的客户端存储吧~在html5出来之前~客户端存储主要是使用cookie~不过这种古老的方式存在着好一些弊端~举例如下：可以存储的数据的大小受到限制~官方指出一个域名下最多可以存储4k的数据（有点少吧~~）cookie的数据放到了http请求头上~这样不仅使得http请求头变得臃肿~过多的cookie会使请求越来越慢~同时还带来了安全的问题~这玩意默认是明文的同...
2015-11-14 22:51:00
96
转载 图片压缩工具之grunt-contrib-imagemin
对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小，加快页面访问速度。Google Pagespeed最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩，如果是 PNG 格式，则使用 OptiPNG 或 PNGOUT 压缩。但是对于不同格式的图片，我...
2015-11-13 12:29:00
145
转载 企业网设计与实现---盒子布局、高度自适应容器、广告轮播图插件、li样式设定、新闻标题与日期一行排版、float注意事项...
1、给li添加样式图标时使用语句.top_content li { list-style-image: url("../images/li_bg.gif"); float: left; width: 70px;}实现效果：注意：为了让li可以在一行显示~可以有多种方法~比如设置li的display为inline-block~不过这里要...
2015-11-12 10:16:00
199
转载 通过js获取元素的css样式属性
var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display;这样可以获取定义在内部~外部样式表以及内嵌的所有的样式~当然这里指获取display属性~简单来说就是只要定义了display~不管在哪里设置的~都可以获取出来转载于...
2015-11-11 23:25:00
117
转载 float小结
首先再明确一下浮动的定义：浮动的框可以向左或向右移动~直到它的外边缘碰到包含框或另一个浮动框的边框为止~由于浮动框不在文档的普通流中~所以文档的普通流中的块级元素表现的就像浮动框不存在一样1、如果设置了元素float~那通过设置margin为0和auto的居中效果将失效2、设置元素浮动后~如果没有指定元素的宽高则元素会根据内容自动扩展~如果元素中没有文本内容或图像做填充...
2015-11-11 20:57:00
83
转载 从盒子模型浅析设置了容器背景图后看不到背景色的原因
各层内容如上~然后就不用多说了::>_<::转载于:https://www.cnblogs.com/Liujunyan/p/4956178.html
2015-11-11 15:37:00
259
转载 css3---transform&transition之toolTip动画效果的实现
知识点总结：1、元素设置了绝对定位后会自动变为块级元素；2、父元素设置为相对定位，子元素设为绝对定位，然后对子元素作如下设置会得到不同的效果：a、bottom:100%----------------->子元素的底端和父元素的顶端对齐重合（如下图所示：黑色框为父元素~白色圆为子元素~）html代码：<div id="father"> ...
2015-11-11 11:46:00
738
转载 我的博客平面设计
问题：不管页面怎么变化时~约束图片的大小始终占页面总宽度的某个百分比~假设以32%为例解决：1、给图片加一个父元素~设置父元素的宽度占整个屏幕的32%~2、将图片宽度设为100%（这一步很重要~只有加上这句~图片才会被约束在父元素中~）html代码：<section class="gray-section"> <div c...
2015-11-10 22:59:00
95
转载 下拉菜单
1、需求：当鼠标滑过时，会弹出其对应的二级子菜单问题：一般菜单中的文字都是加了超链接的~一个常用的样式是鼠标hover时对应的那一会颜色变深~自然会想到给a：hover加背景颜色的样式~不过颜色改变仅仅是文字那一小块~解决：把a设为块级元素~并设置a的padding~问题： 父级菜单的li会根据子菜单的长度而发生改变~解决：给父级菜单的li加r...
2015-11-10 08:31:00
65
转载 水平垂直居中方式小结
话不多说~直接来看demo吧1、不定宽高的水平垂直居中：.box { position: absolute; top: 50%; left: 50; z-index: 3; -webkit-transform: translate(-50%,-50%);}2、flex版本的水平垂直居中：.parent...
2015-11-09 13:04:00
83
转载 使用reveal.js制作酷炫的页面
几天前遇到一个制作3D幻灯片效果的插件，试着用到自己的在线简历页面中，展示效果蛮好的。不过查阅了很多文档，几乎都是英文，于是想着整理一下写一篇博客当总结。准备工作：1、首先当然是下载相应reveal的资源，下载链接：https://github.com/hakimel/reveal.js2、将相应的文件夹（css、is、lib、plugin）引入到自己的工作目录，...
2015-11-08 22:09:00
245
转载 jQuery.on()和jQuery.off()--注意事项
总结： 1、这两个都是是官方推荐的为元素绑定/移除事件的函数~虽然函数须由一个jQuery调用~但本意应该是为调用此函数的jQue...
2015-11-04 17:03:00
157
转载 HTML5表单元素新特新
知识点总结： 1、新表单元素 全部都是由input标签组成 1.1 email 1.2 url 注意：输入的内容必须以http:// 1.3 search 1.4 range 范围 属性: ...
2015-09-29 10:04:00
63
转载 H5新表单属性之required
1、required属性要求此控件不能为空，否则表单不允许提交。eg：1 <input type="text" required="false" />其中required属性后面不管跟什么，required都要求此控件不能为空转载于:https://www.cnblogs.com/Liujunyan/p/4845561.html...
2015-09-29 09:52:00
296
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人