![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS+HTML
文章平均质量分 59
baoeni
爱编程,爱web,爱生活
展开
-
sliding door 滑动门 总结
之前一直听说sliding door/滑动门,很多人也讨论过。今天突然有点忘了,为了加深印象,总结了其中的精华,同时也贡献给大家: 以tab作为实例,分为2门和3门两种方法: sliding door 滑动门 source:http://www.alistapart.com/articles/slidingdoors/ example:http://w原创 2010-01-19 05:54:00 · 553 阅读 · 0 评论 -
CSS3 modernizer 检测浏览器是否支持CSS3
前几天在看headjs的时候偶尔发现这段代码,可以用来检测浏览器是否支持CSS3的属性,用纯Javascript写成,不依赖任何framework,感觉挺有用的。源代码:https://github.com/headjs/headjs/blob/master/src/css3.js/** Head JS The only script in your原创 2011-12-27 21:49:25 · 932 阅读 · 0 评论 -
几种Preload javascript,CSS, image的方法
原文:http://www.phpied.com/preload-cssjavascript-without-execution/preload javascript可以提升页面的速度,原因是preload之后网站的其他页面的许多资源都是已经加载过了,也就是说都在缓存里。普通的页面也可以preload资源,但是对已第一次的加载就会很耗时。为了提高速度,可以使用以下的方法在不影响第一个网页加原创 2011-12-28 00:37:21 · 1988 阅读 · 0 评论 -
javascript弹出窗口小结
弹出窗口已经被小广告弄得声名狼藉,虽然如此,但是有的时候还是需要用弹出窗口和原来的窗口分开来,比如说显示一个问卷调查。最基本的就是使用window.open函数,搭配对于弹出窗口的属性作为输入参数。第一个问题是许多浏览器都有popup blocker,从脚本直接运行window.open会被拦截,大部分用户会看不见你做的窗口。而且safari根本不允许脚本直接执行window.open,一原创 2011-12-13 06:07:01 · 740 阅读 · 0 评论 -
几种延迟运行javascript的方法
javascript在网页中一般的情况就是加载之后直接运行,即使是延迟加载的javascript也是这样(参看我之前的文章:7种延迟加载javascript方法),问题是运行javascript对于浏览器来说也是很耗时的,而且运行的时候会block其他资源的下载。所以就有了延迟运行的概念。steve也谈到这个问题:http://stevesouders.com/controljs/解决办法是:原创 2011-12-29 19:33:43 · 696 阅读 · 0 评论 -
7种延迟加载javascript方法
延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载,一般有一下几个方法:1. DOMhead append script tagwindow.onload = function() { setTimeout(function(){ // reference to var he原创 2011-12-28 00:23:35 · 4950 阅读 · 0 评论 -
Preload image 网页图片预载入
如果你的网站包含比较多重复的大尺寸图片,不妨预先载入他们,这样用户的浏览同个网站中其他页面的时候这些图片就不用再远程载入了。参看:http://perishablepress.com/press/tag/preload-images/方法1:CSS#preload-01 { background: url(http://domain.tld/image-01.png) no-r原创 2011-12-30 19:19:21 · 824 阅读 · 0 评论 -
javascript载入研究
为啥要研究javascript的载入呢,原因很简单,因为他影响页面载入速度,特别是第一次的载入速度。(如果考虑同域的其他页面可以使用预先载入的方法:几种Preload javascript,CSS, image的方法)。一个页面载入除了html,剩下的就是javascript,css和image了。css可以使用sprite。image在以后会讨论(Preload image 网页图片原创 2011-12-29 23:42:18 · 739 阅读 · 0 评论 -
javascript onerror event 打造js error错误日志
如果你想track网站js error的数据,可以使用onerror事件来捕捉,见例子如下:window.onerror=function(msg, url, linenumber){ alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber) return true}document.wr原创 2012-03-14 22:41:33 · 569 阅读 · 0 评论 -
JavaScript Array vs HTML Collections
如果你习惯使用Jquery,千万要小心$()函数(以及其他travse函数)的返回值可不是简单的array,他们是HTMLCollection。换句话说我们是不能使用array的函数来处理的,比如slice,concat,pop,push等等。HTMLCollection本身只有两个函数:PropertieslengthThe number of items in the coll原创 2012-03-14 22:35:00 · 347 阅读 · 0 评论 -
CSS3实例:半透明边框
原文出处:http://css-tricks.com/7423-transparent-borders-with-background-clip/记得以前Facebook有段时间使用了非常多的半透明边框(Facebox),虽然现在不支持了,但是还是值得研究一下。你有可能觉得这样写就行了:#lightbox { background: white; border:翻译 2011-11-15 05:51:06 · 2150 阅读 · 1 评论 -
超强CSS扩展框架
你还在写纯的CSS吗?那你就是outman了,今天介绍两个超强CSS扩展框架,他们让笨拙的CSS融入编译语言的编程思想,让你感觉豁然开朗!两个框架分别为:sass(ruby环境运行,http://sass-lang.com/)lesscss(javascript编写,http://lesscss.org/#-client-side-usage)下面介绍他们的厉害之处原创 2011-11-10 05:03:54 · 652 阅读 · 1 评论 -
button horizontal padding/按钮默认padding
IE和Firefox对于按钮都有一个默认的水平padding,不注意就会产生问题,解决方法是:在Firefox中你可以定义padding:0 删除默认填充 在IE需要设置 overflow:visible there is a default horizontal padding for button in IE and firefox. in firefox you原创 2010-01-21 22:35:00 · 697 阅读 · 0 评论 -
HTML表格专有属性和CSS
HTML表格很容易上手,一堆tr加td就可以显示一张表格了。复杂一点就是再加上th,colgroup,tbody,tfooter,caption之类。这些HTML里面的各种元素的确加强了表格的实用性和语义化,但table本身就有很大学问哦,毕竟是整个表格的根啊! 今天下面要总结包含对table本身的属性归纳和table专用的CSS比较: attributes VS CS原创 2010-01-22 05:43:00 · 646 阅读 · 0 评论 -
CSS有关文字的属性:white-space,text-overflow,word-wrap
<!-- .ellipsis { width:190px; overflow:hidden; height:20px; white-space:nowrap; } .afterMe{ width:200px; position:relative; } .after原创 2010-03-31 04:56:00 · 448 阅读 · 0 评论 -
IE6 PNG32 问题解决办法
IE6 PNG32 with semitranparncy inside PN32 image in IE6 does not look good, you will find a cyne color in the transparent area. To solve this problem you can choose the following with orders原创 2010-04-20 05:09:00 · 451 阅读 · 0 评论 -
给HTML tag 加浏览器属性到classname
有些时候我们需要给html加上一些浏览器属性到classname上,比如os种类,浏览器种类,css是否开启,javascript是否开启。这样我们可以避免使用css hack,更准确的定位渲染网页的环境。somethings it is good to setup en原创 2011-09-15 21:32:50 · 378 阅读 · 0 评论 -
总结jquery里面的Traversing函数
jquery有着非常强大的traversing函数,在这里总结一下://基本选择器$()//在基本的基础上修改选择add()not()andSelf()//通过位置过滤选择eq()first()last()slice原创 2011-09-15 21:40:01 · 280 阅读 · 0 评论 -
jquery plugin --image magnifier 放大器
今天研究了一下jquery plugin --image magnifier 放大器。原理其实很简单,首先你需要一个大图一个小图(或者是一个图),当在小图中移动,计算位差,把这个位差对应到大图上。当然你还可以隐藏鼠标。研究结果如下:/*//ex原创 2011-09-15 22:14:44 · 581 阅读 · 0 评论 -
CSS hack的三大法宝
做前端的朋友都知道要做到跨浏览器一致,你一定会遇到CSS hack,一般来说有三种方法:1. IE的conditional comments2. 使用javascript来给html加上浏览器信息/Using javascript to add user-agent in原创 2011-09-21 16:17:16 · 383 阅读 · 0 评论 -
jquery插件之 waypoints --页面滚动自动更新菜单
今天介绍一个非常cool的jquery插件,当页面滚动时,固定在页面上方的菜单会自动更新选项,详情请查看:http://imakewebthings.github.com/jquery-waypoints/#about我做的一个demo如下 Page Title div{ border:1px solid red; height:100原创 2011-11-26 23:03:33 · 2489 阅读 · 0 评论 -
IE8 HTTPS warning
If you have a form which will sent action to http in a https page, FF will show alert for security warning that you are sending data to a unsecured connection. Safari will show non-secure form. IE and原创 2012-04-02 16:02:47 · 913 阅读 · 0 评论