RSS

Slashdot’s Menu CSS 剖析

17 Feb
偶然间在晚上发现一个比较有意思的Slashdot’s Menu,先看看整体的图片:
HTML布局分析:

CSS代码展示及分析:
 1: div.sdmenu {
 2:     width: 150px;
 3:     font-family: Arial, sans-serif;
 4:     font-size: 12px;
 5:     /* 设置这个是为了留出空间给DIV下面的背景图片,背景图片的高度是10px */
 6:     padding-bottom: 10px;
 7:     border:1px ridge #ff0000;
 8:     /* 将背景图片放置最外层DIV的右下脚 */
 9:     background: url(bottom.gif) no-repeat right bottom;
 10:     color: #fff;
 11: }
 12: div.sdmenu div {
 13:     /* 将黑线平铺作为每个BLOCK的背景图片 */
 14:     background: url(title.gif) repeat-x;
 15:     /* 收缩状态,div的长度超过收缩设定的长度,多余部分则隐藏 */
 16:     overflow: hidden;
 17: }
 18: div.sdmenu div:first-child {
 19:     /* 这段代码有没有都没有意义,设置Span的背景 */
 20:     background: url(toptitle.gif) no-repeat;
 21: }
 22: div.sdmenu div.collapsed {
 23:     /*设置收缩时的高度 */
 24:     height: 25px;
 25: }
 26: div.sdmenu div span {
 27:     display: block;
 28:     padding: 5px 25px;
 29:     font-weight: bold;
 30:     color: white;
 31:     /* 展开时的图片 10px属性定位不受对象的补丁属性( padding )设置影响。*/
 32:     background: url(expanded.gif) no-repeat 10px;
 33:     cursor: default;
 34:     border-bottom: 1px solid #ddd;
 35: }
 36: div.sdmenu div.collapsed span {
 37:     /* 这里留一个疑问,为什么不像上面的设置,让它有一个10px的偏移,为什么加上去就不可以了 */
 38:     background-image: url(collapsed.gif);
 39: }
 40: div.sdmenu div a {
 41:     padding: 5px 10px;
 42:     background: #eee;
 43:     display: block;
 44:     border-bottom: 1px solid #ddd;
 45:     color: #066;
 46: }
 47:
 48: div.sdmenu div a:hover {
 49:     /* 就是那个模拟的小白箭头,深海绿背景,小白箭头右侧居中 */
 50:     background : #066 url(linkarrow.gif) no-repeat right center;
 51:     color: #fff;
 52:     text-decoration: none;
 53: }
Advertisements
 
Leave a comment

Posted by on 02/17/2008 in CSS

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: