DIV+CSS兼容IE6、IE7、Firefox方法探究(3)

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS兼容IE6、IE7、Firefox方法探究(3)

編輯：CSS詳解

◆DIV+CSS三行三列布局（兼容各種浏覽器）

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHtml4.01//EN"  
 
"http://www.w3.org/TR/Html4/strict.dtd"> 
<Html> 
<HEAD> 
<TITLE>DIV布局測試</TITLE> 
<styletypestyletype="text/CSS"> 
 
DIV  
{  
height:150px;  
}  
DIV.left  
{  
width:20%;  
float:left;  
clear:right;  
background-color:#eeeeee;  
}  
 
DIV.center  
{  
width:50%;  
float:left;  
clear:right;  
background-color:#CCCCCC;  
}  
 
DIV.right  
{  
width:30%;  
float:left;  
clear:right;  
background-color:#808080;  
}  
DIV.both  
{  
width:100%;  
clear:both;  
background-color:#696969;  
}  
 
</style> 
</HEAD> 
 
<BODY> 
<DIVclassDIVclass="left">左側</DIV> 
<DIVclassDIVclass="center">中側</DIV> 
<DIVclassDIVclass="right">右側</DIV> 
 
<DIVclassDIVclass="both">全行</DIV> 
 
<DIVclassDIVclass="left">左側</DIV> 
<DIVclassDIVclass="center">中側</DIV> 
<DIVclassDIVclass="right">右側</DIV> 
</BODY> 
</Html>

上一頁:IE7、IE8、Firefox中實現DIV自動適應高度
下一頁:DIV+CSS兼容IE6、IE7、Firefox方法探究(2)

CSS詳解

Div+CSS布局入門教程(三): 三、頁面頂部制作(1)　　當我們寫好了頁面大致的DIV結構後，我們就可以開始細致地對每一個部分進行
css常用:CSS常用總結: CSS索引一.CSS樣式選擇器 21. 通用選擇器——{font-family:宋體; decla
CSS模塊化的理解: 我沒有看過CSS模塊化的相關書籍，所以我下面說的不一定正確，但是在工作中，我會用我理解的模塊化方式

DIV CSS 佈局教程網

相關文章