作者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)