| 网站首页 | 模板 | 资料 | 源码 | 工具 | 开发 | 设计 | 安全 | 项目 | 网络 | 图片 | 系统 | 数据库 | 博客 | 会员中心 | 小说 | 
MYFTP 精品资料下载
网络学院
学习资料
源码模版
您现在的位置: 精品下载 >> 开发 >> 网站开发 >> CSS技术 >> 文章正文 用户登录 新用户注册
用CSS布局表单实例(抛弃表格)            【字体:
用CSS布局表单实例(抛弃表格)
作者:佚名    文章来源:不详    点击数:    更新时间:2007-12-18

  这是一个学习WEB标准的例子,我们在不使用标准之前为表单布局一般都使用表格,在这个例子中我们抛弃表格,来使用CSS为表单进行布局。


CSS设置代码:

<style type="text/css">

label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}

</style>

HTML代码:

<form>

<label for="user">Name</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>

  在这个例子中用 "label" 标签来布局表单的左部,即表单的提示内容,使表单显示的效果明显分为左右两部分,左部的宽度我们可以使用 "label" 标签来控制。

文章录入:chqnet    责任编辑:chqnet 
  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    点击单选框就直接激活链接的
    CSS让网页中的内容自动换行的
    用css实现文字的自动隐藏
    在CSS样式表里使用JavaScrip
    CSS实现导航条图片的翻转菜单
    CSS样式表:链接好还是嵌入好
    CSS自动实现网页打印版本
    使用html表格和CSS进行混合网
    常用CSS缩写语法总结
    认清CSS的类class和标识id选
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)