阿里巴巴css滑动菜单 ,滑动门
阿里巴巴的一款滑动分类菜单,效果很不错,但是使用了较多的图片,不过这些图片只是背景,不影响你修改菜单的文字,所以很值得大家使用,代码稍嫌多,学习CSS的朋友好好研究一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312">
<title>滑动菜单 ,滑动门菜单,css滑动菜单</title>
<style type="text/css">
/*样式定义,由于左右滑动区宽度不同,所以代码略多*/
*{font-size:12px;}
body {margin:0px;border:0px;font-size:12px;background-color:#fff;}
a:link{color: #003278;text-decoration: none;}
a:visited{color: #003278;text-decoration: none;}
a:hover{color: #FF6600;text-decoration: underline;}
#slideBox{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_bg.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;}
#slide{padding-top:5px}
#slide li img{margin-right:3px}
#slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
#slideBox li{float:left;font-weight:bold;height:37px !important;height:27px;}
#slideBox li a:link,#slideBox li a:visited{color:#000;}
#slideBox li a:hover{color:#ff7300;text-decoration: none}
#slideBox .l{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft.gif);width:80px;}
#slideBox .r{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright.gif);width:94px;float:right}
#slideBox .l_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft_h.gif);width:80px;}
#slideBox .r_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright_h.gif);width:94px;float:right;}
#slideBox .hide{display:none}
#slideBox .l a{width:52px;}
#slideBox .r a{width:68px;}
.arrow{padding-left:8px;background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_arrow03_right_08x.gif) no-repeat;}
#slideBox .l a,#slideBox .r a,#slideBox .l_h a,
相关文档：
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{bord ......
原理：
当两个同父元素z-index相同时，后面的元素显示在上面。
当z-index超过浏览器最大值时，浏览器会按最大值计算。
方法：
连续放置两个div元素d1，d2；并设定position:absolute及不同背景色。
设定d1.z-index = max + 1, d2.z-index = max；
当max + 1有效时，d1在前；当max + 1 无效时，d2在前。（参看原理） ......
转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下，但是一
般我们不直接调用它们。
那么Magento应用又是如何引用CSS文件的呢 ......
下面是CSS最常用和实用的技巧。
1.重置浏览器的字体大小
重置浏览器的默认值 ，然后重设浏览器
的字体大小你可以使用雅虎的用户界面重置
的CSS方案 ，如果你不想下载9MB的文件，代码如下：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td ......
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(fun ......
