div+css常见问题整理

DIV布局整理:

1、对于布局要使用DIV+CSS,使页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中

2、对于要显示数据，特别是表格的列表形状数据的地方可以使用表格,此时用DIV可能更不好.

3、CSS里多使用Class少使用id(对于特定元素可以使用ID)

4.对于门户型(163.com)，访问量大的地方(比如首页)CSS直接写在页面上(JS脚本也如此),而不是包含一个CSS文件。

5.对于CSS文件的大小要控制,不能太大.可以对页面进行分类,来选择要包含的.CSS文件.

6.DIV布局,宽度如果设置了百分比而不是绝对值,那要考虑页面被人为变小的时候,布局是否会发生混乱.

7.DIV布局要考虑浏览器兼容的问题,要保证主流浏览器都支持,比如ie6和firefox

CSS使用整理:

(1).AA{}表示伪类,使用的时候使用class="AA"
(2)Table{} 表示为表格设置默认样式
(3)table.table1{} 表格样式使用的时候,在元素里 class="table1" 在其他HTML标签里不可用.(4)div#Search 表示为ID为Search的div设置样式 使用的时候该DIV不需要设置class属性
(5)div#HeadTop li 表示为id为HeadTop的DIV里的
元素设置样式,该元素无须设置class属性
(6)div#HeadTop li.left表示为id为HeadTop的DIV里的class="left"的
元素设置样式
(7).rightContent li a,.rightContent h3 a {color:#1f3a87; } 表示为CLASS="rightContent"的元素里的
里面的设置颜色属性; class="rightContent"元素的
元素里的的颜色属性亦如此.(8).rightContent .theTip{ clear:both; padding:9px 0 0;} 表示为calss="rightContent" 里的子元素中class="theTip"设置样式.
(9)div#Head ul#GlobalNav div.NavAll li a:hover{}表示为id为Head的DIV元素里的id为GlobalNav里的UL元素里的id为NavAll的div元素里的的Li元素设置a的样式.(10)#ListPathLinks ul{float:left;} 表示为id为ListPathLinks里的ul元素设置样式.(11)#dl_centerlist {}表示为ID="dl_centerlist"的元素设置样式
(12)div#dl_centerlist和#dl_centerlist的区别:DIV元素指定了id="dl_centerlis";如果存在"div#dl_centerlist" 则该样式起作用,否则#dl_centerlist的样式将起作用.(13)标签潜套层次不能很深
(14)显示大文本块的话使用P
(15)使用CSS简写.
如:
border-width:1px;
border-style:solid;
border-color:#000; 
可简写为
border:1px solid #000;
(16)CSS元素是支持继承的,所以要减少CSS里的冗余样式.减少CSS文件的大小.
如body里面的样式在很多HTML标签里是默认被继承的.
(17)使用子选择器和组选择器,这样可以减少Class的定义原来的冗余:
"subnav">

"subnavitem"> "http://gss:7000/pages/editpage.action#" class="subnavitem">Item 1
>
"subnavitemselected"> "http://gss:7000/pages/editpage.action#" class="subnavitemselected"> Item 1 

"subnavitem"> "http://gss:7000/pages/editpage.action#" class="subnavitem"> Item 1 



CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 新的:
"subnav">
 "http://gss:7000/pages/editpage.action#"> Item 1 

"sel"> "http://gss:7000/pages/editpage.action#"> Item 1 

 "http://gss:7000/pages/editpage.action#"> Item 1 


CSS定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }


		
		
		                                   
            
            

              

			  
			  
				


				
			  
              阅读(1207) | 评论(0) | 转发(0) |
			                

            
            
            

              
0
              
上一篇：我的极品论坛
              
下一篇：OUTLOOK看不到已发送邮件-小小的误会
    
            
            
          
          		  
        
      
      

		
给主人留下些什么吧！~~
				
				
		

        		
		
        

          
评论热议
		  		 
        

          
 请登录后评论。
            
登录 注册
          
        
       
		
        
        

            
        
      
    
  
  






  
  

    
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册
      
Copyright  2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有 
      
感谢所有关心和支持过ChinaUnix的朋友们
        
16024965号-6