一步步认识ss的div和css(二)

上次我们分析了ss的bbs页面的结构,这次我们针对页面结构相对应css做一下分析.

1./*顶部导航*/

1. #topmenu { background: #E8F7FC; border-bottom: 4px solid #F5FBFF; text-align: right; line-height: 2em; }
   
2. 
   
3. #topmenu ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #C1D8E0; }
   
4. 
   
5. #topmenu li { display: inline; border-left: 1px solid #C1D8E0; padding-left: 1em; padding-right: 0.5em; }
   
6. 
   
7. #topmenu a { color: #154BA0; }
   
8. 
   
9. #pagetitle { padding: 8px 0; height: 76px; he\ight: 60px; border-bottom: 4px solid #F5FBFF; overflow: hidden; }
   
10. 
    
11. #logo { border-right: 1px solid #86B9D6; padding: 0 10px; margin-right: 10px; }
    
12. 
    
13. .banner468 { float: right; }

复制代码

分析:从上一节的图上我们可以看到这个地方所定义的区域,#topmenu定义的是最上边的导航条,#pagetitle定义的是中间的logo部分和广告条.

缺陷:#pagetitle定义了高度,并设置了overflow:hidden,这样子可能造成更换logo的时候还需要回到这里修改高度以适应自己的logo.

建议:如果logo超过大小的时候,可以在此处修改height的大小,(修改后便的60px即可,前边那个是针对ie5.5浏览器设置的,其实目前来说完全可以不考虑ie5.5了.),然后将overflow:hidden去掉,当然也可以使高度自适应的,不过如果将logo定义为背景的时候必须定义严格的高度.

2. /*主导航*/

1. #menu { border-top: 3px solid #86B9D6; border-bottom: 1px solid #86B9D6; line-height: 25px; background: url(../images/menu_bg.gif); width: 770px; overflow: hidden; }
   
2. 
   
3. #menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
   
4. 
   
5. #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
   
6. 
   
7. /*首页导航*/
   
8. 
   
9. #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
   
10. 
    
11. #menu dt { float: left; width: 4em; white-space: nowrap; }
    
12. 
    
13. #menu dt a { color: #5086A5 !important; }
    
14. 
    
15. #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }

复制代码

分析:这点大家应该很清楚了,就是当前页面的菜单导航.

缺陷:每一个菜单定义了宽度width:6em;,那么如果我们每个菜单的字数不一样的话,就可能造成整体看起来有一些参差不齐.

建议:将宽度设置为auto,调整margin的左右边距,比如设置margin的属性为0 10px;,这样子每个菜单的两边都是统一的,看起来效果应该会好一点把.

3./*您的位置导航*/

1. #navigation { padding: 1.2em 0; }
   
2. 
   
3. #navigation p { margin: 0;}
   
4. 
   
5. #navigation p a, #navigation p strong { margin: 0 0.5em; }
   
6. 
   
7. #searchform { float: right; }
   
8. 
   
9. #searchform * { vertical-align: top; }
   
10. 
    
11. #searchform button { margin-left: 0.5em; }
    
12. 
    
13. /*简单页面的位置导航*/
    
14. 
    
15. #navigation.simplepage { padding: 0; border-top: 3px solid #86B9D6; border-bottom: 1px solid #86B9D6; height: 26px; line-height: 30px; overflow: hidden; background: #EFF5FF url(../images/title_icon.gif) no-repeat 10px 6px;; margin-bottom: 1em; }
    
16. 
    
17. #navigation.simplepage p { float: right; margin-right: 0.5em; }
    
18. 
    
19. #navigation.simplepage h1, #navigation.simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 32px; }

复制代码

分析:这个就是本页菜单栏下边的导航哦,显示您的位置的定义.

缺陷:暂无.

建议:暂无.

4./*布局*/

1. .content, .contentL, .contentR { width: 100%;}
   
2. 
   
3. /*\*/ * html .content, * html .contentL, * html .contentR { height: 1%; } /**/ *>.content, *>.contentL, *>.contentR { overflow: hidden; }
   
4. /*侧边样式*/
   
5. .sideL { width: 210px; float: left; overflow: hidden; }
   
6. .sideR { width: 190px; float: right; overflow: hidden; }
   
7. /*中间部分样式*/
   
8. .mainarea { margin: 0 4px; width: 362px; float: left; }
   
9. 
   
10. .contentL .mainarea { margin: 0 0 0 4px; width: 556px; }
    
11. 
    
12. .contentR .mainarea { margin: 0 6px 0 0; width: 574px; }

复制代码

分析:这个部分大家需要了解清楚哦,在默认的ss风格里,是分成左中右三栏的,而左栏是.sideL,中栏是.mainarea.右栏是.sideR.

缺陷:中间的宽度是否可以不定义呢?另外,命名上,出现了大写字母,并不是不可以,而是尽量不用,这里不用大写也是完全可以的哦.

建议:各位在调整这个宽度的时候一定要注意宽度的准确性,稍微多出1px可能就掉下去了哦.大家也可以试下把中间的宽度去掉,会不会错乱哦.

5. /*图片列表*/

1. .imgthumblist { margin: 0; padding: 0; list-style: none; padding-bottom: 6px; }
   
2. 
   
3. /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
   
4. 
   
5. .imgthumblist li { float: left; display: inline; background: #FFF; text-align: center; width: 123px; height: 135px; w\idth: 115px; he\ight: 125px; overflow: hidden; border: 1px solid #EEE; padding: 3px; margin: 6px 0 0 4px; }
   
6. 
   
7. .imgthumblist p { margin: 0; line-height: 22px; }
   
8. 
   
9. 
   
10. .imgthumblist div { line-height: 90px; font-size: 90px; height: 106px; display: table; background: url(../images/dotline_h.gif) repeat-x bottom; }
    
11. 
    
12. .imgthumblist div a { display: table-cell !important; display: block; width: 115px; vertical-align: middle; }
    
13. 
    
14. .imgthumblist div img { vertical-align: middle; max-width: 100px; max-height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true); font-size: 10px; }
    
15. 
    
16. @media all and (min-width: 0px){ .imgthumblist div img { width: 100px; height: 100px; } } /*for Opera Only*/
    
17. 
    
18. 
    
19. li.smallthumb { width: 88px; height: 105px; w\idth: 81px; he\ight: 97px; border-color: #DFDFDF; margin: 0 0 6px 4px; }
    
20. 
    
21. li.smallthumb div { line-height: 65px; font-size: 65px; height: 80px; }
    
22. 
    
23. li.smallthumb div a { width: 80px; }
    
24. 
    
25. li.smallthumb div img {
    
26. max-width: 75px; max-height: 75px; width: expression(this.width >75 && this.height < this.width ? 75: true); height: expression(this.height > 75 ? 75: true); }
    
27. 
    
28. 
    
29. @media all and (min-width: 0px){ li.smallthumb div img { width: 75px; height: 75px; } } /*for Opera Only*/

复制代码

分析:这个是图片的列表哈,大家应该蛮清楚的把.

缺陷:调用的图片显示的是缩略图,应该有时候缩略的并不好看把,能否想办法截取一部分呢?

建议:同样,这个自己在调整宽度的时候要注意精确的计算.

6. /*综合设置*/

1. * { word-break: break-all; } /*在IE中实行强制换行*/
   
2. body { margin: 0; padding: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   
3. #wrap { margin: 0 auto; text-align: left; width: 778px; padding: 0 4px; w\idth: 770px; }

复制代码

分析:这个是整体的定义,也就是说整个页面在#wrap里边.

缺陷:定义的宽度在以后可能会越来越感觉小啦,在宽屏下我们的页面会有较多的空白,yahoo的页面都已经有所扩容了,我们是不是也应该适当加宽呢?

建议:如果大家要修改这个宽度的话,页面内很多地方都需要改了哦,需要大家精确的计算哦,稍有不慎,可能就会错乱的哦.

其实,在css文件里边都有一些注释,大家应该很容易就可以看懂了的,这里主要分析了一小部分css代码,给各位提出了一点点建议,纯属个人的想法哦,大家如果还有更好的建议或者不懂的地方,不妨说出来哦,和大家一起分享.

我坐 南之恋 沙发

:)

好东西顶一下！:)

本人不得不在此留个脚印

那些算不上缺陷吧

:) :) :)

www.discuzpro.com

:)
感谢分享

前排支持！

  good

楼主，数你强了！
你可是为了我们鞠躬尽瘁啊！
顶起来！