作者TKirby ( ^-^)
看板Web_Design
標題Re: [問題] CSS使用DIV排版方式的問題
時間Sun Nov 13 18:11:56 2005
我試做了一下，借你參考
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)