专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » CSS Form Example:带有小图标的清爽CSS表单设计! »正文

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

来源: 发布时间:星期四, 2009年2月12日 浏览:52次 评论:0


  表单制作是在进行CSS网页布局时候经常会遇到同时表单制作也是项比较头疼问题我们今天学习个CSS表单例子我个人认为效果挺不错www.52css.com原创转载请注明出处
  看下面效果:

\"\"/

  首页我们进行整体规划:

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

  我们形成如下xhtml代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"\">
    <h1id=\"title\">UserLogin</h1>
    <h2id=\"login\">请输入您用户名和密码</h2>
    <p=\"formt\">Username</p>
    <p><inputname=\"Username\"type=\"text\"=\"username\"></p>
    <p=\"formt\">Password</p>
    <p><inputname=\"Password\"type=\"password\"=\"password\"></p>
    <pid=\"forget\"><ahref=\"http://www.52css.com/\"target=\"_blank\">ForGetPassword?</a></p>
    <pid=\"button\"><inputtype=\"image\"src=\"http://www./Files/BeyondPic/2007-5/24/0752416083419404.g\"=\"imgbutton\"/></p>
</div>


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

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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#title,.formt{width:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-ser;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白色www.52css.com原创转载请注明出处

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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#login{width:208px;height:24px;padding-top:11px;background:url(warning.g)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;}


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

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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.username,.password{
    background:#fff;
    border:1pxsolid#ccc;
    color:#000;
    font-family:verdana,tahoma,sans-ser;
    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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.username{background:url(username.g)no-repeat2px2px;}
.password{background:url(password.g)no-repeat2px2px;}


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

  下面我们定义忘记密码链接和表单按钮图片www.52css.com原创转载请注明出处

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#forgeta{width:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-ser;font-size:10px;color:#f60}
#button{width:208px;height:28px;}
.imgbutton{margin-top:7px;margin-left:132px;}


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

  我们来看完整CSS代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
*{margin:0;padding:0;}
#{width:208px;margin:50px;}
#title,.formt{width:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-ser;font-size:10px;background:#ddd;}
#login{width:208px;height:24px;padding-top:11px;background:url(warning.g)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;}
.formt{display:block;font-weight:800;background:#fff;}
.username,.password{
    background:#fff;
    border:1pxsolid#ccc;
    color:#000;
    font-family:verdana,tahoma,sans-ser;
    font-size:12px;
    width:196px;
    height:22px;
    margin-left:6px;
    padding-left:20px;
    line-height:20px;
}
.username{background:url(username.g)no-repeat2px2px;}
.password{background:url(password.g)no-repeat2px2px;}
#forgeta{width:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-ser;font-size:10px;color:#f60}
#button{width:208px;height:28px;}
.imgbutton{margin-top:7px;margin-left:132px;}


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

  我们看最终运行效果:www.52css.com原创转载请注明出处

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


  
标签:
0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: