手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >用CSS实现表单form布局
用CSS实现表单form布局
摘要:出处:http://blog.donews.com/dodo/archive/2005/06/18/434979.aspx在TABLE布局中...

出处:http://blog.donews.com/dodo/archive/2005/06/18/434979.aspx

在TABLE布局中设计Form,一般都是用2个td来布局,如果不用table,用CSS怎么做呢?看看下面的代码

<style type="text/css">

label{

float: left;

width: 80px;

}

form{margin:0px}

input{

width: 180px;

border:1px solid #808080

}

textarea{

width: 250px;

height: 150px;

}

#sbutton{

margin-left: 80px;

margin-top: 5px;

width:80px;

}

br{

clear: left;

}

</style>

<form action="" method="post">

<label for="user">姓名:</label>

<input type="text" id=user name="user" value="" /><br />

<label for="email">邮件:</label>

<input type="text" id=email name="email" value="" /><br />

<label for="comment">备注:</label>

<textarea id=comment name="comment">

</textarea>

<br />

<input type="submit" id="sbutton" value="确定" /><br />

</form>

【用CSS实现表单form布局】相关文章:

CSS浮动布局基础

CSS实现绝对底部

CSS实现样式布局的锦囊妙计22招

用CSS实现表单form布局

DIV+CSS表单布局的五个小技巧

CSS实现左图右文混排布局的方法

CSS实现图片圆角化处理

纯CSS实现漂亮tab选项卡切换特效

用css实现十字的布局示例代码

纯CSS代码实现翻页

精品推荐
分类导航