前端
文章平均质量分 60
纯和书院
晓见寒溪有炊烟
展开
-
CSS巧妙实现分隔线的几种方法
前几天一@同事看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。单个标签实现分隔线: 小小分隔线 单标签实现 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height:原创 2017-01-30 20:16:47 · 101 阅读 · 0 评论 -
解决Button在IE6、7下的自适应宽度问题
很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。写一个Button,有两种方式:其一,直接button标签;其二,input type=”button”。不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现B原创 2017-01-30 20:16:52 · 79 阅读 · 0 评论 -
利用ie与标准浏览器在处理数组的tostring方法的差异判断浏览器
利用ie与标准浏览器在处理数组的tostring方法的差异,对于数组最后一个字符为逗号,标准浏览器会自动剔除它,但是ie会报错,利用这个特性可以判断浏览器是否为ie!if( -[1,] ){ alert("这不是IE浏览器!");}else{ alert("这是IE浏览器!");}原创 2017-01-30 20:17:14 · 117 阅读 · 0 评论 -
IE6 position:fixed bug (固定窗口方法)
今天herb同学在twitter上问到,如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题,不过,当时并没有解决,用JS有现成的方法,不过,这次要求的就是不用JS。然后,开始写代码,测试,最终,IE6下依然有问题。position:fixed;没有正常显示。 正确的代码:预览/Demo | ie6_position_fixed_bug.txt(源代码) 在别的文章中看到,原创 2017-01-30 20:17:16 · 83 阅读 · 0 评论 -
推荐10个加速CSS开发的框架
CSS可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而CSS本身是不支持的。本文介绍了10个CSS预处理器,让CSS支持一些简单的编程语法。1.Compass Compass是一个开源的CSS制作框架。2.CSS Cacheer 这是一个很棒的CSS预处理器,让开发者可以制作插件,要求PHP以及Apache(mod_deflate和mod_rewrite)3.CSScaff原创 2017-01-30 20:17:24 · 124 阅读 · 0 评论 -
css透明兼容,alpha兼容
.transparent_class { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* ie8 */ filter:alpha(opacity=50); /* ie5-7 */ opacity: 0.5; /* css standard, currently it work原创 2017-01-30 20:17:27 · 83 阅读 · 0 评论 -
jQuery ajax方式加载页面后,被加载页面的js不能执行的问题
在回调函数里注册一下事件就可以了,要么就各个函数写在被加载的页面里。$(document).ready(function() { $('content_div').hide(); $('#list_user').click(function(event){ event.preventDefault(); load_user(); });});funct原创 2017-01-30 20:15:29 · 195 阅读 · 0 评论 -
设计一个你喜欢的滚动条
/* 滚动条 */html{ scrollbar-face-color:#a0a0a0; scrollbar-shadow-color:#7b7b7b; scrollbar-highlight-color:#7b7b7b; scrollbar-3dlight-color:#7b7b7b; scrollbar-darkshadow-color:#7b7b7b;crollbar-track-color原创 2017-01-30 20:15:19 · 78 阅读 · 0 评论 -
纯CSS超过宽度显示省略号
纯CSS超过宽度显示省略号 *{ margin:0; padding:0; font-size:12px; font-family:"新宋体";} ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;}原创 2017-01-30 20:11:36 · 87 阅读 · 0 评论 -
LazyLoad+ob_start(),完美解决图片延迟加载 [jQuery 插件]
Lazy Load是一个用户延迟加载图片的jQuery插件。再配合后台ob_start()开启页面缓冲区,就能完美的解决图片延迟加载,在没有后台配合的情况下,Lazy Load只是一个伪懒加载模式,长页面,多图时,它只能解决页面加载速度的问题,而不能解决减轻服务器压力的问题,甚至反而加重服务器压力。具体下文介绍。Lazy Load介绍Lazy Load是一个用JavaScript编写的jQuery原创 2017-01-30 20:14:43 · 135 阅读 · 0 评论 -
Jquery解决“动画积累”问题
停止当前执行的动画。语法:$("element").stop([clearQueue][,gotoEnd]);clearQueue:bool,代表是否要清空未执行的动画队列gotoEnd:bool,代表将正在执行的动画直接跳到末状态如果我们做了一个下拉菜单,当鼠标移上去的时候就菜单下拉,当鼠标离开的时候菜单上卷,下拉和上卷的动画时间都是3 秒种。[javascript:showcolumns] v原创 2017-01-30 20:15:13 · 106 阅读 · 0 评论 -
CSS教程:行高line-height属性
来源:CSDN行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整行高(line-height)可以减低阅读的困难与枯燥,并且使页面显得美观。行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响。 7.3.1 语法 line-height属性的具体定义列表如下原创 2017-01-30 20:19:04 · 154 阅读 · 0 评论