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>之前，我对此有所保留。

干杯，

凯文