CSS問題 - 960.gs

Question

我決定讓我的Web用戶界面出來，但我突然遇到了很多CSS問題。

我砍死一點點進入960.gs，我已經做了我自己的網格，只有8列，那就是：

.grid { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
} 
.grid ._01, 
.grid ._02, 
.grid ._03, 
.grid ._04, 
.grid ._05, 
.grid ._06, 
.grid ._07, 
.grid ._08 { 
    display: inline; 
    float: left; 
    margin: 10px; 
    position: relative; 
} 
.grid ._01 { 
    width: 100px; 
} 
.grid ._02 { 
    width: 220px; 
} 
.grid ._03 { 
    width: 340px; 
} 
.grid ._04 { 
    width: 460px; 
} 
.grid ._05 { 
    width: 580px; 
} 
.grid ._06 { 
    width: 700px; 
} 
.grid ._07 { 
    width: 820px; 
} 
.grid ._08 { 
    width: 940px; 
} 
.grid .clear { 
    clear: both; 
    display: block; 
    height: 0px; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0px; 
} 

這裏是HTML：

<div class="grid"> 
    <div class="_05"> 
     <img src="../logo.png" alt="" width="450" height="60" vspace="50" /> 
    </div> 
    <div class="_03" align="center"> 
     <form id="form1" name="form1" method="post" action=""> 
     <p> 
      <label>Email 
      <input type="text" name="textfield" id="textfield" style="margin-right: 0;" /> 
      </label> 
     </p> 
     <p> 
      <label>Password 
      <input type="text" name="textfield2" id="textfield2" /> 
      </label> 
     </p> 
     </form> 
    </div> 
    <div class="clear"></div> 
    <div class="_05"> 
     <div class="box"> 
      <h2>grid, _05, box, h2</h2> 
      <div class="content">grid, _05, box, content</div> 
     </div> 
    </div> 
    <div class="_03"> 
     <div class="box green"> 
     <h2>grid, _03, box, h2</h2> 
      <div class="content"> 
       <p>grid</p> 
       <p>_03</p> 
       <p>box</p> 
       <p>content</p> 
      </div> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="_05"> 
     <div class="box yellow"> 
      <h2>grid, _05, box, h2</h2> 
      <div class="content">grid, _05, box, content</div> 
     </div> 
    </div> 
    <div class="_03"> 
     <div class="box red"> 
      <h2>grid, _03, box, h2</h2> 
      <div class="content"> 
       <p>grid</p> 
       <p>_03</p> 
       <p>box</p> 
       <p>content</p> 
      </div> 
     </div> 
    </div> 
    <div class="clear"></div> 
</div> 

我怎樣才能讓這個...

bogus UI http://i33.tinypic.com/148md76.png

看起來更像這樣嗎？特別是，如何更改黃色框的位置和頂部的登錄表單？

mockup UI http://i36.tinypic.com/2upptua.png

在此先感謝您的所有輸入！

Answer 1

由於您剛剛學習CSS，我建議您拋棄框架並從頭開始編寫代碼。

對你來說很幸運，我無聊的工作:)我爲你編碼整個事情。您可以在http://kevinvancrawford.com/temp/test.html

看到它的標記：

<div id="container"> 
<div id="head"> 
    <h1><a href="./test.html">Site Banner</a></h1> 

     <form id="login"> 
     <label for="email">Email:</label> 
      <input type="text" name="email" id="email" /> 

      <label for="password">Password:</label> 
      <input type="password" name="password" id="password" /> 

      <input type="submit" value="Login" id="submit" /> 
     </form> 
    </div><!--head--> 

    <div id="body"> 
    <div id="primary"> 
     <div id="blue"></div> 

      <div id="yellow"></div> 
     </div><!--primary--> 


     <div id="column"> 
     <div id="green"></div> 

      <div id="red"></div> 
     </div><!--column--> 
    </div><!--body--> 
</div><!--container--> 

而且，CSS：

#container { width:960px; margin:1em auto; background-color:#EEEEEE; padding:20px 20px 0; } 

#head, #login, #body { /* these elements all contain floats */ 
overflow:hidden; /* This will clear the contained floats. "auto" works too */ 
width:100%; /* Triggers hasLayout in IE, needed to clear floats */ 
} 

#head h1 { 
float:left; 
margin:0; 
width:500px; 
height:80px; 
background:#000000 url(./img/logo.gif) no-repeat; /* Instead of using an <img> tag, we used CSS to replace the HTML text with an image. Good for SEO */ 
position:relative; 
} 
#head h1 a { 
position:absolute; 
display:block; 
top:0; left:0; 
width:100%; height:100%; 
text-indent:-9999px; /* Hides the text. The properties above make the whole <H1> a link */ 
overflow:hidden; 
} 

#login { float:right; width:320px; padding:1em 0 0; } 
#login label, #login input { float:left; display:block; margin:0 5px 5px 0; } 
#login label { text-align:right; clear:left; width:80px; } 
#login input { width:150px; } 
#login #submit { width:auto; } 

#primary { float:left; width:620px; margin-right:20px; } 
#primary #blue { background-color:#000080; margin:20px 0; min-height:300px; } 
#primary #yellow { background-color:#FFFF66; } 

#column { float:right; width:320px; } 
#column #green { background-color:#008040; } 
#column #red { background-color:#800000; } 

#yellow, #green, #red { min-height:200px; margin:20px 0; } 

請詢問您是否想我解釋一下它的任何適合你:)

此外，雖然我沒有在這個例子中使用它，我推薦Eric Meyer的reset.css。去谷歌上查詢。

請注意，唯一的折衷辦法是我沒有將「登錄」按鈕對齊到右邊緣，因爲那樣會需要將所有這些元素都浮動到右邊，並且<input>必須去在標記中的<label>之前，我對此有所保留。

乾杯，

凱文