我决定将表格从我的Web界面中删除,但我在CSS方面遇到了很多问题。
我已经对960.gs进行了一些修改,并制作了自己的网格,仅包含8列,如下所示:
我已经对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>
我怎样才能做到这个...
看起来更像这样吗? 特别是,我怎么改变黄色框的位置和顶部的登录表单?
提前感谢您的所有输入!