简单form标准化实例——整体布局(3)
作者:blank 发布时间:2007-05-11 17:04:00
3、使用dl、dt、dd来布局
此属于发挥,练习的方法,当然图一的设计图还可以用其他更多的方法来布局,用dl、dt、dd来布局只为抛砖引玉。
dl:代表HTML自定义列表
dt:代表HTML自定义列表组
dd:HTML自定义列表描述
虽然说dl、dt、dd在语义上并不能很好的表现图一,但dl、dt、dd的布局特点依旧可以用来进行图一的布局,而且效果还不错,呵呵……
dt主要放label部分,dd主要放input或其他。
注意:和label布局一样,有IE的3px BUG。
下面我们具体来对图一的设计图进行整体布局:
XHTML部分:
<form id="demoform" class="democss" action="">
<dl>
<dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt>
<dd><input type="text" id="fname" value="" /></dd>
<dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt>
<dd><input type="text" id="lname" value="" /></dd>
<dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt>
<dd><select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt>
<dd><select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt>
<dd><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd>
<dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt>
<dd><input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</dd>
<dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt>
<dd><input type="password" value="" id="pw2"/></dd>
</dl>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
input,select {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.required {
font:0.8em Verdana !important;
color:#f68622;
}
.explain {
color:#808080;
}
.b {
font-weight:bold;
font-size:12px;
}
.democss {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss dl {
width:420px;
}
.democss dt {
width: 110px;
float: left;
padding:4px;
padding-top:8px;
text-align:right;
}
.democss dd{
margin:0 0 0 118px;
padding:4px;
text-align:left;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}
具体演示:
运行代码框
对于dl,dt,dd的布局好像有个小BUG,有兴趣的朋友可以实验一下。给dd添加他的宽度属性,我们可以根据相关数据算出dd的宽度为294px,添加上这个宽度属性按理论上是没有问题的,在FF下实验也没有问题,但在IE6下,就惨不忍睹了!
相关阅读(很不错的,强烈推荐):
设计类:
《浅议 Web 表单设计》:
http://www.blueidea.com/design/doc/2007/4471.asp
制作类:
《轻松玩转花样表单 》:http://www.blueidea.com/tech/web/2003/377.asp
《熟悉常用表单格式的五点技巧 》:http://www.blueidea.com/tech/web/2003/929.asp
《重新认识表格和一个访问无障碍的数据表格例子》:http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=60
《用css制作表单并体验亲和力 》:http://www.blueidea.com/tech/site/2006/3359.asp
猜你喜欢
- 第一种情况是返回的游标是某个具体的表或视图的数据,如:SQL-Code:CREATE OR REPLACE P
- 核心提示:VB读取MP3文件帧的信息比特率,采样频率,播放时间Private Sub Command1_Click()On Error Go
- 现在公布方法:替换editor.js 函数 // Toolbar button onmouseup
- 如果你看过YUI的RAW源码,会发现很多跟javadoc语法类似的注释。据说(via)是使用JSDoc这个工具。但我探索了一遍,发现YUI多
- 往往我们在建立一个较为大型的网站的时候会有很多的副页面框架模式甚至一些小的细节元素都是相同的,但是令人困扰的是在更新它们时却要费些周折,要一
- 1.怎么样查看数据库字符集 [A]数据库服务器字符集select * from nls_database_parameters,其来源于pr
- master库对于SQLServer来说,是很重要的系统数据库,保存着所有Sqlserver的用户信息、数据库信息等,当数据库崩溃时,mas
- 简介单例模式是创建型对象的一种,用于如何优雅的创建对象。让一个类最多产生一个对象。场景只需要一个对象就能解决并且要使用多次的场景,比如框架的
- 当你需要一个简单易用的导航菜单得时候。CSS Menu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当
- 最近要做数据库同步,如果网上找了例子,成功,记录下来,下回再看。这个是网上找的一编文章。以下配置在本机上已经成功:实现功能:A为主服务器,B
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> &nbs
- 什么是JSON http://www.json.org/json-zh.htmlJSON(Javascript Object Notatio
- MySQL安全性指南(2) 作 者: 晏子2.1.3 数据库和表权限下列权限运用于数据库和表上的操作。ALTER允许你使用ALTER TAB
- 这篇论坛文章(赛迪网技术社区)根据网友的个人实践扼要的讲解了将MySQL 5.0下的数据导入到MySQL 3.23中的具体方法及步骤,详细内
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- asp之家注:长文章分页算是asp编程中一个比较经典单位问题,怎么分页,什么时候分页.方法挺多,有的是人为的加入分页标志,有的是程序自动加分
- 如何在ADSI中查询用户属性?看看下面这个返回用户可用属性的代码实例,基本上返回了大部分可用的用户属性:<%Dim x&nb
- 代码如下:--CAST 和 CONVERT 函数 Percentage DECLARE @dec decimal(5,3), @var va
- 一个申请单可以包含N个项目,添加申请单时就需要动态加入代码了。 动态Table表格 <table border="0&quo
- 本文通过实例解析了 SQL Server 数据库扩展存储过程,实现远程备份与恢复的方法和步骤实例说明: 环境:win2k+sqlserver