代码 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 4 < head > 5 < meta content ="text/html; charset=utf-8" http-equiv ="Content-Type" /> 6 < title > three column layout </ title > 7 < meta name ="Generator" content ="缔友计算机信息技术有限公司 ,2010" /> 8 < meta name ="Author" content ="Geovin Du 涂聚文" /> 9 < meta name ="Keywords" content ="缔友计算机信息技术有限公司 ,2010,Cascading, Style, Sheets, CSS1, CSS2, CSS" /> 10 < meta name ="Description" content ="CSS ~ Cascading Style Sheets" /> 11 < style type ="text/css" > 12 13 html, body { margin : 0px ; padding : 0px ; background : #eee ; font-family : verdana ; font-size : 12px ; } 14 #main 15 { 16 width : 80% ; 17 margin-left : auto ; 18 margin-right : auto ; 19 } 20 /* The header and footer */ 21 .headfoot { display : block ; height : 70px ; background : #08a ; color : #fff ; text-align : center ; padding : 5px ; font-size : 30px ; } 22 23 /* This bit does all the work */ 24 #container { position : relative ; display : block ; background : #0ac ; border-left : 200px solid #aa8 ; border-right : 200px solid #a8a ; } 25 #inner { display : block ; margin-left : -200px ; margin-right : -200px ; padding : 5px ; } 26 #left { float : left ; position : relative ; width : 200px ; left : 0px ; } 27 #right { float : right ; position : relative ; width : 190px ; right : 0px ; } 28 #center { margin-left : 200px ; margin-right : 200px ; position : relative ; display : block ; height : 1% ; } 29 .clear { clear : both ; } 30 31 /* Just to extend each column */ 32 #inner a:visited, a { color : #000 ; text-decoration : none ; cursor : default ; } 33 #inner a span { display : none ; } 34 #inner a:active, #inner a:focus { color : #fff ; text-decoration : none ; background : transparent ; cursor : default ; } 35 #inner a:active span, #inner a:focus span { display : block ; } 36 37 a:visited, a { text-decoration : underline ; cursor : pointer ; } 38 a:hover { text-decoration : none ; cursor : pointer ; } 39 40 em { font-weight : bold ; } 41 </ style > 42 </ head > 43 44 < body > 45 < div class ="main" id ="main" > 46 < div class ="headfoot" > 兼容各浏览器 </ div > 47 48 < div id ="container" > 49 < div id ="inner" > 50 < div id ="left" >< a href ="#" >< em > CLICK </ em > here to make the left column the longest < span > this is the left column < br /> this is the left column < br /> this is the left column < br /> this is the left column < br /> this is the left column < br /> this is the left column < br /> this is the left column < br /> this is the left column </ span ></ a ></ div > 51 52 < div id ="right" >< a href ="#" >< em > CLICK </ em > here to make the right column the longest < span > this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /> this is the right column < br /></ span ></ a ></ div > 53 54 < div id ="center" >< a href ="#" >< em > CLICK </ em > here to make the middle column the longest < span > this is the middle column < br /> this is the middle column < br /> this is the middle column < br /> this is the middle column < br /> this is the middle column < br /> this is the middle column < br /> this is the middle column < br /></ span ></ a ></ div > 55 56 < div class ="clear" ></ div > 57 </ div > 58 59 60 </ div > 61 < div class ="headfoot" > 勝利は仕事部屋である貴方にご光来を賜ることを歓迎 < br /> NOTHING could be simpler...! </ div > 62 </ div > 63 </ body > 64 65 </ html > 66