Html CSS问题-960.gs

我已经决定将表格从我的Web UI中释放出来，但是我突然发现CSS有很多问题

我已经侵入了一点，我制作了自己的网格，只有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>

电子邮件


密码

格栅，05号，盒子，h2
网格，_05，框，内容
格栅，_03，盒子，h2
网格

_03

盒子

内容

格栅，05号，盒子，h2
网格，_05，框，内容
格栅，_03，盒子，h2
网格

_03

盒子

内容

我该怎么做…

看起来更像这样？特别是，我如何更改黄色框的位置和顶部的登录表单

---

提前感谢您的所有意见

既然您只是在学习CSS，我建议您放弃框架，从头开始编写代码

你真幸运，我工作无聊，无事可做：）我为你把整件事都编好了。你可以在

标记：

<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-->

#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; }

电邮：
密码：

和CSS:

<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-->

#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; }

#容器{宽度：960px；边距：1em自动；背景色：EEEEEE；填充：20px 20px 0；}
#head、#login、#body{/*这些元素都包含浮点数*/
溢出：隐藏；/*这将清除包含的浮动。“自动”也起作用*/
宽度：100%；/*在IE中触发hasLayout，需要清除浮动*/
}
#头h1{
浮动：左；
保证金：0；
宽度：500px；
高度：80px；
背景：#000000URL（./img/logo.gif）无重复；/*我们使用CSS将HTML文本替换为图像，而不是使用标记。这对搜索引擎优化有好处*/
位置：相对位置；
}
#头h1 a{
位置：绝对位置；
显示：块；
顶部：0；左侧：0；
宽度：100%；高度：100%；
文本缩进：-9999px；/*隐藏文本。以上属性使整个文本成为链接*/
溢出：隐藏；
}
#登录{float:right；宽度：320px；填充：1em 0；}
#登录标签，#登录输入{float:left；display:block；margin:0 5px 5px 0；}
#登录标签{文本对齐：右；清除：左；宽度：80px；}
#登录输入{宽度：150px；}
#登录#提交{宽度：自动；}
#主{浮点：左；宽度：620px；右边距：20px；}
#主#蓝{背景色#000080；边距：20px 0；最小高度：300px；}
#初级#黄色{背景色：#FFFF66；}
#列{float:right；宽度：320px；}
#列#绿色{背景色：#008040；}
#列#红色{背景色：#800000；}
#黄色、绿色、红色{最小高度：200px；边距：20px 0；}

请询问是否需要我为您解释一下：）

另外，虽然我在本例中没有使用它，但我推荐Eric Meyer的reset.css。谷歌

请注意，我所做的唯一折衷是没有将“login”按钮对齐到右边缘，因为这需要将所有这些元素向右浮动，并且标记中的

必须在

之前，我对此有所保留

干杯

---

凯文

非常感谢你，凯文！我将研究您提供的代码，但是现在我必须说，我已经读了一些关于960.gs的内容，我真的希望继续使用网格系统。我是否可以进行任何更改，以获得与您存档的结果相同的结果？