石周明

要实现的效果：点击链接改变背景颜色 先看css部分： .bgcolor{     background:#ccc;     } 再看html部分： <ul id="ful"> <li><a onclick="changeBgColor(this)" href="#">我们是做什么的？</a></li> <li><a onclick="changeBgColor(this)" href="#">我们能做些什么？</a></li> <li><a onclick="changeBgColor(this)" href="#">我们已经做过些什么？</a></li> </ul> 最后来看js部分： function changeBgColor(link) { var alllinks=document.getElementById("ful").getElementsByTagName("a"); for (var i=0; i<alllinks.length; i++){     alllinks[i].className="";     } link.className="bgcolor"; } 原理比较简单： 定义一个函数，让每个a的onclick时间去调用这个函数，将ID对应的那个UL里所有a的className都质空，被点击的a的className为你设定的bgcolor

伪类hover并不是对html所有标签都起作用 要用一些比较特殊的手段才能达到你想要的效果 比如这个 a都不能在ie下很好的支持hover 更别说input了 那在这里给各位同学介绍一个让input支持hover的方法 目前只能用js去实现了 js部分 ================================= var oldclass=’border_none’;     function borderhave(border)     {     olodclass=border.className;     border.className=’border_have’;     }     function bordernone(border)     {     border.className=oldclass;     } css部分 ================================= .border_none{     border:1px solid #fff;         } .border_have{     border:1px solid #fc0;     background:#ffeff7;     } html部分 ================================= <input type=text class="border_none" [...]

腾讯的设计师还是很不错的 绑定QQ向导页面↑ QQ副载的软件管理页面

看图不说话

这几天在做小i社区，碰到一些页面布局方面的难题，比如下面这样一个登陆方式： 布局要求： 1、点击【小i通行证】和【MSN账号】出现相应的内容，就是两种登陆的方式的切换（怎样切换我们就不讨论了···） 2、已选登陆方式字体加粗 蓝色 并且带有下箭头 3、鼠标移到另外一种登陆方式的a上时字体加粗 蓝色 并出现下箭头 看似简单的布局，但实际操作起来还是有点难度的。 我们应该考虑的问题： 1.怎样在a的下面显示小三角箭头？ 2.怎样实现那条蓝色的直线？ 3.怎样实现那个小三角箭头刚好在那条蓝色直线的下面？ 好，我们下面逐一解决上面三个问题： 第一问题：这个好解决，P一张小三角的gif，给a定义display:blcok，并给它赋background-image:center bottom；这样就可以了。 第二个问题：实现1px高的直线的通用方法→{height:1px;background:#80cbff;font-size:0;overflow:hidden;} so easy吧···很好，这两个问题我们都解决了，那接下来最后一个问题就得请出我们今天的主角儿了：z-index··· 第三个问题：或许有朋友会说那个蓝色的直线，我可以直接给a定义1px的下边框，恩，是！这样是可以！但问题是那个蓝色的小三角你怎么让它在直线下面呢？即使你同样设置a的background-image，但这样小三角只能在a里面，也就是只能在直线（a的下边框）的上面，所以，我们变通一下：用z-index将这个直线层叠到a的下面。 穿插解释一下我对z-index的理解：在垂直方向上让对象进行层叠。z-index数值大的对象在数值小的上面。 理解了这个意思，我们就好下手了，说一下整体的思路： 将最外面控制两种登陆方式的a所在的div绝对定位，并将z-index数值设为3，即z-index:3，将1px的蓝色直线绝对定位，并将数值设为2，即z-index:2，这样直线就可以在a所在的div的下面了，然后两种登陆方式的a我们用无序列表LI去写，并定义display:block，定义宽和高，我们这里定义width:12px;height:45px;，从而得出直线的宽度应该是120+120=240px;那因为我们前面定义a的background-image（那个蓝色的小三角，高度5px）而且这个小三角是垂直居中居底部显示的，那我们可以得出那条1px直线的位置应该是距离顶部 45px-5px=40px的地方，减去本身1px，那我们设置那条直线line的margin-top:39px；那到这里，我们第三个问题就解决了··· 不知道啰嗦了这么多，有没有明白我的意思，让大家受累了··· 点这里看demo

很早在 蓝色论坛 做过一个调查《你使用的CSS命名规则 (单选) 》，调查结果如下（参与投票人数为83人）： helloworld 2 (2.41%) hello-world 9 (10.84%) hello_world 52 (62.65%) helloWorld 19 (22.89%) HelloWorld 1 (1.20%) 其他 0 (0.00%) 从结果中可以看出使用率最好的为下划线命名法（ hello_world ），其次为骆驼式命名法（helloWorld），再次为连接符命名法（ hello-world）。而在其他语言中比较常见的帕斯卡（pascal）命名法、匈牙利命名法等在 CSS 的命名规则中则很少有人使用。 调查的最终结果并不能说明谁的对错，只是体现一种偏好。但更多人对某种的偏好，其实同时也更体现出其在某些地方的突出。仅为初学者入门提供了更好的选择。 　　很荣幸我是62%那部分里的一份子···

晚上在怿飞的博客上看到这篇文章，以前还从来不知道background-position还有这么个问题： background-position 属性定义的顺序为水平位置、垂直位置。比如定义 background-position:top left; 虽然顺序颠倒了位置，但所有的浏览器都能识别。因为 top 和 left 为可识别位置属性，但如果换个定义方式 background-position:20px left; 此属性只会在 IE 中正常显示，在其他浏览器中却认为是无效的定义，难得 IE 的“智能”。

css部分 ============================================ * {     margin:0;     padding:0; } body {     font:12px Verdana, Geneva, sans-serif #444;     line-height:1.5; } ul li {     list-style:none; } .menu {     width:660px;     margin:20px auto; } .menu li {     display:inline;     float:left;     margin:0 5px;     background:#f2f2f2;     border:1px #39c solid;     text-align:center;     font-size:14px;     [...]

css部分 ========================================== body{     font-size:12px;     } .tooltips{     position:relative; /*这个是关键*/     z-index:2;     } .tooltips span{     display: none;     } .tooltips:hover{     z-index:3;     background:none; /*没有这个在IE中不可用*/     } .tooltips:hover span{     /*span 标签仅在 :hover 状态时显示*/     display:block;     position:absolute;     top:21px;     left:0px;     width:15em;     border:1px solid black;     background-color:#006699;     padding:3px; [...]