上一页 1 2 3 4 5 6 ··· 8 下一页
摘要:首先说下为什么要写这篇文章。一个网站,为了添加样式,惯性思维都是加id,加class,问题是如果这是一个大型网站,整个页面使用的id和class会非常多,多到维护起来想死了。其实css提供了一些选择器帮助我们减少id和class,只是很多人很懒,有了id和class就不再关心它们了,为了简化和正规化css编码,专门写一篇IE78下能用的选择器,因为其他浏览器都支持标准,所以可以放心大胆的使用。这里主要说一些不常用的选择器,无视IE6,因为好用的选择器它基本都不支持。IE7支持的IE8肯定也支持,所以就不重复列举了。IE7支持的选择器有: 子选择器(div > span)相邻选择器(h1 阅读全文
posted @ 2012-05-09 21:01 越己 阅读(193) 评论(0) 推荐(0) 编辑
摘要:浮动到底做了什么?浮动如何影响元素的盒模型?浮动的元素和行内元素有何不同?调整浮动元素的位置是通过什么规则进行的?clear属性如何工作,它的目的又是什么?浮动甚至能绊倒有经验的开发者,理解浮动能帮助你解决很多CSS问题。即使你认为已经知道了浮动的所有知识,我们足够深入的分析也许也能让你学到一些新东西。什么是浮动?CSS中的一些元素是块级元素,表示它们会自动另起一行。举个例子,如果你创建了两个段落,每个段落都只有一个单词。这两个单词不会靠在一起,而是会各自占据一行。另一些元素是行内元素,表示它们和前面的内容位于相同的一行。举个例子,<a>可以出现在另一个元素中,比如<p> 阅读全文
posted @ 2012-05-08 23:58 越己 阅读(7464) 评论(1) 推荐(7) 编辑
摘要:伪类 VS 伪元素这两个概念很容易混淆,即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单,如下:伪类:作用对象是整个元素首先,来看几个伪类a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}如你所见,尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。伪元素:作用于元素的一部分还是来看几个例子:p::first-line {color: #555}p::first-letter {c 阅读全文
posted @ 2012-05-08 01:02 越己 阅读(1360) 评论(0) 推荐(1) 编辑
摘要:css有5种不同的position属性值我们不会讨论inherit,因为顾名思义,它就是继承了父元素的值,而且在比较老的IE版本中,支持情况也不好。任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了,这完全取决于你的HTML结构。另一个值你肯定见过,它就是fixed。说白了,它就是把一个对象钉在背景上,因此无论你把它放在哪,它就会一直在那。我们经常在sidebar的导航元素中看到它的身影,当页面向下滚动了很远的距离,这时候我们想回到顶部,如果没有一个fixed的导航,这种用户体验是很差的。前面这三个值都很浅显易懂,接下来是绝对定位和相对定位 阅读全文
posted @ 2012-05-07 23:27 越己 阅读(1919) 评论(1) 推荐(4) 编辑
摘要:需求比如新浪微博的tip,或者别的网站常用的tip,都可以看到三角形的身影,一般来说,都会使用图片,但是我希望能用css解决。三角形的实现方式(不考虑css3):1. 纯字符2.border可选字符如下:◣◢◤◥▲▼► ◄△▽⊿你可以等比放大缩小,或者改变颜色如果字符无法满足需求,使用border.arrow { display: block; width: 0; height: 0; font-size: 0; /** 下面两行随你配置 **/ border-width: 40px; border-style: solid; border-co... 阅读全文
posted @ 2012-05-07 15:10 越己 阅读(267) 评论(0) 推荐(0) 编辑
摘要:以前一直对em心存疑虑,今天终于了解它的作用了。CSS的单位分绝对和相对两种,比如设置width: 100px,就是绝对值,如果设置成width: 100%,就会相对父元素的大小进行调整。em是一种相对单位,它相对于父元素的文本字体大小,来看一个例子:body { font-size: 100%;}h1 { font-size: 1.5em;}这段CSS表示页面使用字体的默认大小,即16px。h1的大小是默认大小的1.5倍,即24px(16 * 1.5 = 24)http://www.impressivewebs.com/understanding-em-units-css/ 阅读全文
posted @ 2012-05-01 17:34 越己 阅读(116) 评论(0) 推荐(0) 编辑
摘要:Java的正则非常坑爹,因为转义的恶心程度已经令人发指了。我先举个简单的例子,假如有个方法,参数是普通字符串,返回的是符合Java规范的正则字符串,众所周知,这需要转义,这里简单一下,仅转义 .public String toRegex(String str) { return str.replaceAll("\\.", "\\.");}可以看到,第一个参数是 \\. ,一般的语言表示为 \. ,但是Java需要转两次,为什么呢?比如JavaScript,会写成var exp = /\./g;exp不是字符串,而是一个正则对象,但是Java是用字符串表示 阅读全文
posted @ 2012-04-22 23:41 越己 阅读(207) 评论(0) 推荐(0) 编辑
摘要:高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。需求:1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条2. 绿色部分高度固定,比如50px3. 紫色部分填充剩余的高度HTML结构暂且如下:<div id="main"> <div id="nav">nav</div> <div id="content">content</div></div>先看1.html, body { height: 阅读全文
posted @ 2012-03-20 22:45 越己 阅读(35838) 评论(7) 推荐(5) 编辑
摘要:php的动态特性让人印象深刻,比如这里的可变变量和可变函数。可变变量:$var = 'filename';$filename = 'index.php';echo $$var;打印出 "index.php"可变函数:$var = 'getName';function getName() { return 'zhujl';}echo $var();打印出 "zhujl" 阅读全文
posted @ 2012-03-12 22:57 越己 阅读(95) 评论(0) 推荐(0) 编辑
摘要:各个类库基本都有contains函数,检测一个元素是否包含另一个元素。核心方法不外乎两个:contains 和 compareDocumentPositioncontains是IE发明的函数,后来也有别的浏览器支持,比如Chrome,但是Firefox不支持。用法如下:el.contains(el2);如果 el包含el2 或 el === el2,返回true;否则返回false。这很简单,接着说compareDocumentPosition。这个函数来自DOM Level 3 规范,标准浏览器都支持,但IE6-8不支持,IE从9开始支持,但是仅仅是IE9模式下才管用,如果你的IE9用的是小 阅读全文
posted @ 2012-03-08 00:28 越己 阅读(2731) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 ··· 8 下一页