Re: [問題] CSS使用DIV排版方式的問題

看板Web_Design作者TKirby ( ^-^)時間19年前 (2005/11/13 18:10)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串9/9 (看更多)

我試做了一下，借你參考 http://www.csie.ntu.edu.tw/~b88039/archive/testCol/css/layout/ 另外台大資訊系的網頁做的剛好是你想要的樣子他的 css 檔在 http://www.csie.ntu.edu.tw/css/main.css 主要 layout 的部份則是 #main, #header, #left, #center, #right, #footer 這些地方你可以參考一下 ※ 引述《LokiCjn (我的征途是星之海)》之銘言： : 我想把我的做法貼出來好了 : 看看還沒有沒地方可以再做修正 : (很長一串 = =) : IE和Firefox確定可以正常顯示 : (CSS部份) : #main { : position: relative; : margin-left:auto; : margin-right:auto; : margin-top:10px; : width:970px; : text-align: left; : } : #side { : width:200px; : float:left; : margin-right:10px; : } : .sideHead { : background-image:url(../images/sideHead_back.png); : width:200px; : height:20px; : float:left; : clear:left; : border:1px solid #CCCCCC; : border-bottom: 0px solid #F6F6F6; : } : .sideContent { : width:200px; : float:left; : clear:left; : margin-bottom:10px; : border:1px solid #CCCCCC; : background-color:#F6F6F6; : } : #content { : width:600px; : margin-left:auto; : margin-right:auto; : float:left; : border:1px solid #EEEEEE; : background-color:#FFFFFF; : } : #edge { : width:140px; : float:right; : margin-left:10px; : } : .edgeHead { : background-image:url(../images/sideHead_back.png); : width:140px; : height:20px; : float:right; : clear:right; : border:1px solid #CCCCCC; : border-bottom: 0px solid #F6F6F6; : } : .edgeContent { : width:140px; : float:right; : clear:right; : border:1px solid #CCCCCC; : background-color:#F6F6F6; : } : (HTML部份) : <div id="main"> : <div id="side"> : <div class="sideHead"> Side Head 01 </div> : <div class="sideContent"> Side Content 01 </div> : <div class="sideHead"> Side Head 02 </div> : <div class="sideContent"> Side Content 02 </div> : </div> : <div id="content"> Content </div> : <div id="edge"> : <div class="edgeHead"> Edge Head </div> : <div class="edgeContent"> Edge Content </div> : </div> : </div> -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.112.30.52 ※ 編輯: TKirby 來自: 140.112.30.52 (11/14 15:13)