Saturday, 11. November 2006, 14:29:22
CSS笔记, CSS, Code
来这里的朋友可能已经发现了，鼠标在划过Blog搜索框处时会有很好看的颜色变化效果，实现的代码如下：
/* 美化输入框和文字框 */
input, textarea{
border-width: 1px; /*边框宽1像素*/
border-style: solid; /*边框样式为实线*/
border-color: #CCC #EEE #EEE #CCC; /*边框颜色,表现为凹陷效果*/
background-color: #FCFCFC; /*背景色*/
}
/* 输入框激活和聚焦时的效果 */
input:hover,input:focus{
background: #fff9ed;/*背景色*/
}
如果你仅仅想让Blog搜索框实现这样的效果的话,只需加入下面的代码:
#searchbox {
border-width: 1px;
border-style: solid;
border-color: #CCC #EEE #EEE #CCC;
background-color: #FCFCFC;
}
#searchbox:hover,#searchbox:focus{
background: #fff9ed;
}
注意:IE6无法显示这种效果
Saturday, 11. November 2006, 12:10:26
Code, CSS笔记, CSS
这是一个有趣的链接效果，当你把鼠标移到链接上时，链接下会出现一道流动的线条。
点这里查看示范效果你只需在CSS文件中加入下面的代码就可以实现这个效果：
a:link {
color: #C37108;
white-space: nowrap;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #C37108;
}
a:hover {
text-decoration: none;
background-image: url(http://files.myopera.com/z8519312/images/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
}
a:active {
text-decoration: none;
}
Saturday, 4. November 2006, 10:43:30
CSS笔记, CSS
在编写CSS时，Opera和IE的表现总会有太多的差异，如果你更满意IE的显示效果的话，可以在CSS文件里直接针对Opera另写一段代码，格式为：
@media screen and (min-width:0px){
选择符 {
样式
}
选择符 {
样式
}
}
由于上面的代码只能被Opera读到，而其他浏览器只会将其视为无效的代码而忽略掉，所以我们可以将其作为Opera的
hack来使用。
WIDGETIZE