11 2015 档案

绝对定位注意点
摘要：块级元素不设置宽度时默认占父元素的100%~如果块级元素没有设置大小~同时又给该块级元素设置了绝对定位~那它会缩成一个点~下面一段代码： hehe ... 阅读全文
posted @ 2015-11-21 00:37 Liujunyan_x 阅读(261) 评论(0) 推荐(0)
浅谈setTimeout与setInterval
摘要：在吐槽这两个欺骗人的感情的方法之前先提一下这两个函数的用法：setTimeout( function(){ alert(’你好!’); } , 100);setInterval( callbackFunction , 100);上述两函数第一个是指延迟100ms后执行回到函数打印“你好”第二个函数是... 阅读全文
posted @ 2015-11-19 13:12 Liujunyan_x 阅读(167) 评论(0) 推荐(0)
bing智能提示搜索框实现
摘要：1、将一张大图铺满窗口~实现方式：.bg-div-class { background-image: url("../images/river.jpg"); position: fixed; width: 100%; height: 100%;}*有时~可能需要设置z-ind... 阅读全文
posted @ 2015-11-16 12:33 Liujunyan_x 阅读(873) 评论(0) 推荐(0)
eval()和JSON.parse()的区别
摘要：我们将一个字符串解析成json对象时可以使用两种方法：假设我们有一个json格式的字符串：'{ "student" : [ {"name":"鸣人","age":17}, {"name":"小樱","age":17}, {"name":"佐助","a... 阅读全文
posted @ 2015-11-14 23:41 Liujunyan_x 阅读(6641) 评论(0) 推荐(1)
浅谈web存储
摘要：1、先来说说之前的客户端存储吧~在html5出来之前~客户端存储主要是使用cookie~不过这种古老的方式存在着好一些弊端~举例如下：可以存储的数据的大小受到限制~官方指出一个域名下最多可以存储4k的数据（有点少吧~~）cookie的数据放到了http请求头上~这样不仅使得http请求头变得臃肿~过... 阅读全文
posted @ 2015-11-14 22:51 Liujunyan_x 阅读(246) 评论(0) 推荐(0)
图片压缩工具之grunt-contrib-imagemin
摘要：对页面进行优化时~免不了对使用的图片进行压缩~以便减小我们使用的图片的大小~这样就可以减少用户下载的文件大小，加快页面访问速度。Google Pagespeed最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩，如果是 P... 阅读全文
posted @ 2015-11-13 12:29 Liujunyan_x 阅读(859) 评论(0) 推荐(0)
企业网设计与实现---盒子布局、高度自适应容器、广告轮播图插件、li样式设定、新闻标题与日期一行排版、float注意事项
摘要：1、给li添加样式图标时使用语句.top_content li { list-style-image: url("../images/li_bg.gif"); float: left; width: 70px;}实现效果：注意：为了让li可以在一行显示~可以有多种方法~比如设置li... 阅读全文
posted @ 2015-11-12 10:16 Liujunyan_x 阅读(621) 评论(0) 推荐(0)
通过js获取元素的css样式属性
摘要：var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display;这样可以获取定义在内部~外部样式表以及内嵌的所有的样式~当然这里指获取display属性~简... 阅读全文
posted @ 2015-11-11 23:25 Liujunyan_x 阅读(360) 评论(0) 推荐(0)
float小结
摘要：首先再明确一下浮动的定义：浮动的框可以向左或向右移动~直到它的外边缘碰到包含框或另一个浮动框的边框为止~由于浮动框不在文档的普通流中~所以文档的普通流中的块级元素表现的就像浮动框不存在一样1、如果设置了元素float~那通过设置margin为0和auto的居中效果将失效2、设置元素浮动后~如果没有指... 阅读全文
posted @ 2015-11-11 20:57 Liujunyan_x 阅读(126) 评论(0) 推荐(0)
从盒子模型浅析设置了容器背景图后看不到背景色的原因
摘要：各层内容如上~然后就不用多说了::>_<:: 阅读全文
posted @ 2015-11-11 15:37 Liujunyan_x 阅读(177) 评论(0) 推荐(0)
css3---transform&transition之toolTip动画效果的实现
摘要：知识点总结：1、元素设置了绝对定位后会自动变为块级元素；2、父元素设置为相对定位，子元素设为绝对定位，然后对子元素作如下设置会得到不同的效果：a、bottom:100%----------------->子元素的底端和父元素的顶端对齐重合（如下图所示：黑色框为父元素~白色圆为子元素~）html代码：... 阅读全文
posted @ 2015-11-11 11:46 Liujunyan_x 阅读(597) 评论(0) 推荐(0)
我的博客平面设计
摘要：问题：不管页面怎么变化时~约束图片的大小始终占页面总宽度的某个百分比~假设以32%为例解决：1、给图片加一个父元素~设置父元素的宽度占整个屏幕的32%~2、将图片宽度设为100%（这一步很重要~只有加上这句~图片才会被约束在父元素中~）html代码： ... 阅读全文
posted @ 2015-11-10 22:59 Liujunyan_x 阅读(262) 评论(0) 推荐(0)
下拉菜单
摘要：1、需求：当鼠标滑过时，会弹出其对应的二级子菜单问题：一般菜单中的文字都是加了超链接的~一个常用的样式是鼠标hover时对应的那一会颜色变深~自然会想到给a：hover加背景颜色的样式~不过颜色改变仅仅是文字那一小块~解决：把a设为块级元素~并设置a的padding~问题： 父级菜单的li会根据子菜... 阅读全文
posted @ 2015-11-10 08:31 Liujunyan_x 阅读(148) 评论(0) 推荐(0)
水平垂直居中方式小结
摘要：话不多说~直接来看demo吧1、不定宽高的水平垂直居中：.box { position: absolute; top: 50%; left: 50; z-index: 3; -webkit-transform: translate(-50%,-50%);}2、flex版... 阅读全文
posted @ 2015-11-09 13:04 Liujunyan_x 阅读(165) 评论(0) 推荐(0)
使用reveal.js制作酷炫的页面
摘要：几天前遇到一个制作3D幻灯片效果的插件，试着用到自己的在线简历页面中，展示效果蛮好的。不过查阅了很多文档，几乎都是英文，于是想着整理一下写一篇博客当总结。准备工作：1、首先当然是下载相应reveal的资源，下载链接：https://github.com/hakimel/reveal.js2、将相应的... 阅读全文
posted @ 2015-11-08 22:09 Liujunyan_x 阅读(6133) 评论(0) 推荐(1)
jQuery.on()和jQuery.off()--注意事项
摘要：总结： 1、这两个都是是官方推荐的为元素绑定/移除事件的函数~虽然函数须由一个jQuery调用~但本意应该是为调用此函数的jQuery对象的子元素绑定/移除事件子元素由函数中... 阅读全文
posted @ 2015-11-04 17:03 Liujunyan_x 阅读(1261) 评论(0) 推荐(0)