论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSSFormExample:带有小图标的清爽CSS表单设计!

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:47

  表单的制作是在进行CSS网页布局的时候经常会碰到的,同时表单的制作也是一项比较头疼的问题,我们今天学习一个CSS表单实例,我个人认为效果挺不错。
  看下面的效果:


  首页我们进行整体的规划:

  建立一个容器main将表单元素及其它相关元素一起扔进去。
  设置标签h1,放置User Login。
  设置标签h2,放置“请输入您的用户名和密码”。
  设置“Username”与“Password”表单提示文字的容器。
  设置表单输入框。
  设置密码找回的文字链接。
  最终我们设置提交表单的按钮图片。

  我们形成如下的xhtml代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id="main">
<h1 id="title">User Login</h1>
<h2 id="login">请输入您的用户名和密码</h2>
<p class="formt">Username</p>
<p><input name="Username" type="text" class="username"></p>
<p class="formt">Password</p>
<p><input name="Password" type="password" class="password"></p>
<p id="forget"><a href="http://www.21shipin.com/" target="_blank">ForGet Password ? </a></p>
<p id="button"><input type="image" src="loginin.gif" class="imgbutton" /></p>
</div>

  下面我们开始进行CSS代码的编写,实现这一款表单效果。

  我们发现h2元素title与表单提示文字的类formt,除了背景色不同,其它的属性是相同的,我们将它们合并起来编写,在后面我们单独定义类formt与title的不同之处,进一步简化代码。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
.formt { display:block; font-weight:800; background:#fff;}

  title与的formt共同属性:
   高度与宽度为208px、26px。
   行高26px,文字缩进5px。
   定义了字体及文字大小。
   设置背景色为#ddd浅灰色。
  类.formt进行单独定义:
   设置为块元素,文字加粗。
   由于title是h1标签,浏览器默认为加粗,所以不必再单独定义。
   设置formt的背景色为#fff白色。

接下来我们设置h2“请输入您的用户名和密码”

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}

  高度与宽度为208px、24px。进行上填充的调整,设置背景图片,文字缩进,以及字体加粗为100等。

  同上面的情况类似,表单输入框类.username和类.password除了小图标的不同,其它的属性是相同的,进一步简化代码我们也将它们合并编写。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}

  背景色为#fff白色,边框1px、实线、#ccc灰色。
  设置文字颜色,字体及大小。
  设置输入框的高度与宽度196px、22px。
  由于想要与提示文字左对齐,我们设置左边距为6px。
  为了给小图标留下足够的空间,我们内容左填充为20px。
  输入框input内的文字可能与小图标不能水平对齐,我们预调行高为20px。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}

  上面的代码分别给类.username和类.password定义小图标。需要你注重的是背景图片为不重复,定位在距左、距顶均为2px的地方。由于我们在上面的代码中,已定义了左填充为20px,小图标有足够的空间显示出来,而不用担心输入表单的文字会遮盖它。

  下面我们定义忘记密码的链接与表单的按钮图片。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }

  关于忘记密码的链接,进行简单的定义就可以了,当然,你也可以完善它,定义链接的hover属性。
  我们设置按钮图片的容器button宽度和高度208px、28px。
  表单提交按钮我们在xhtml中,是这样编写的:input type="image" src="loginin.gif"
  这样编写的好处在于,我们输入完用户名和密码以后,除了可以用鼠标点击提交,直接按回车就可以提交表单。增强用户的易用性。
  类imgbutton对表单按钮进行了设置,让它处在合适的位置,顶边距与左边距设置一下就可以了。

  我们来看完整的CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* { margin:0; padding:0;}
#main { width:208px; margin:50px;}
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
.formt { display:block; font-weight:800; background:#fff;}
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }

  我们完成了这个表单的xhtml与css代码的编写。从这个小实例中,你应该能够把握背景图片的灵活运用,这种应用的方式在CSS网页布局中是非常重要的,有很多效果是通过这种方式来实现的。

  我们看最终的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058