简单静态HTML网页设计作业用CSS实现表单form布局

更新时间:2020-03-02   文章分类:网页技术课堂

在网页设计作业制作过程中,很多时候我们遇到Form表单,左边是文字标题,右边是表单input空,对于新手来说是非常麻烦的事,接下来STU网页设计教大家用CSS实现表单form布局。

HTML示例
<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代码示例
<style type="text/css"> 
<!-- 
label{float: left;width: 80px;line-height:25px;} 
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> 

另外CSS代码中还可以根据自己的要求美化表单框及按钮。
STU网页公众号

STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...

qq code back_top

微信扫码咨询