Web标准:九、CSS表单设计

知识点:

1.改变文本框和文本域样式
2.用图片美化按钮
3.改变下拉列表样式
4.用label标签提升用户体验
 
1)改变文本框和文本域样式
文本框标签:<input type="text" value="" class="">
给这些文本框增加css样式,改变他们的样式:
最终显示效果如下:
 
文本域标签:<textarea id="" class="" rows="5" cols="30">网站建设教程</textarea>
rows设置显示的行数,cols设置显示的宽度
overflow:auto;是定义当内容不超过现在文本域高度时不出现滚动条。
resize:none;去掉文本域右下角的小三角,使它不能直接拉动。
outline: none;去掉选中文本域时边框变成黄色的效果。
 
2)用图片美化按钮
按钮标签:<input class="b1" type="button" value="提交">
用图片美化按钮,可以直接平铺一个图片,但是图片不要加边框,这样就可以自适应宽度。
 
 
3)改变下拉列表样式
下拉列表:
<select name="select" id="select" class="select">
     <option>请选择---------</option>
     <option>标准之路</option>
</select>
因为下拉列表对许多样式不生效,故而在页面中显示的很丑陋,而且在IE6下总在最上层,造成许多弹出层不能被他遮挡。
比如下拉列表CSS样式为在IE9和IE6下的显示如下:
IE9下的显示:
IE6下的显示:
解决方案:可以把被遮挡的浮层使用iframe,因为下拉列表不会跑到iframe上面去。更高的要求可以用div模拟来代替下拉列表。
 
4)用label标签提升用户体验
label标签:<label>姓名:</label>
这里做的主要是标签定位,点击标签后光标定位问题。
标签定位用的是for,for属性规定label与哪个表单元素绑定。
格式为<label for="value">姓名:</label>,value为要绑定的元素的id
代码如下:
显示界面如下:
 
注意:如果想实现单选框互斥的作用,即radio的互斥,只要给他们加上同样的name=""值就可以了。

Web标准:九、CSS表单设计的更多相关文章

  1. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  2. 33个与众不同的Web表单设计

    表单在web设计中很重要,因为它具有直接的用户交互.创新?有趣?富有色彩?设计一个交互,需要设计师关注登陆/注册表单的设计元素. 这里有33个与众不同的web表单设计,希望能使你获得设计灵感. 1. ...

  3. SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!

    纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...

  4. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  5. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  6. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  7. HTML表单设计(上)

    1,表单标记<form>...</form> <form>...</form>定义表单的开始位置和结束位置,表单提交时的内容就是<form> ...

  8. SNF软件开发机器人-子系统-表单-表单设计

    表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...

  9. UX设计秘诀之注册表单设计,细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

随机推荐

  1. 胖子哥的大数据之路(四)- VisualHBase功能需求框架

    一.引言 大数据在结构化数据存储方面的应用需求越来越明确,但是大数据环境下辅助开发工具的不完善,给数据库管理人员和开发人员带来的不变难以言表,基于此创建了开源项目VisualHBase,同时创建了Vi ...

  2. 【Spring实战-2】Spring4.0.4整合Hibernate4.3.6

    作者:ssslinppp      源程序下载:http://download.csdn.net/detail/ssslinppp/8751185  1. 摘要 本文主要讲解如何在Spring4.0. ...

  3. bzoj 2571: Getting Rid of the Holidays

    Description B国的国王Johnny在他在位的短短几年里制定了不少的节日(事实上没超过30个),这些节日是为了尊敬各种各样他所想到的东西而设立的.每过一段固定的时间,一个节日将会被举行(即节 ...

  4. python学习笔记--pycurl模块安装遇到的问题。

    1.用easy_install安装的时候 [root@idayuan ~]# easy_install pycurl Searching for pycurl Best match: pycurl A ...

  5. [转]IDEA 新建 JSP 项目时

    本文转自:https://www.vastyun.com/bloger/670.html 新建的 jsp 页面不像 eclipse 的页面一样有 <% String path = request ...

  6. Linux下查看系统版本号信息的方法(转载)

    原文出处  http://www.ha97.com/2987.html 1.cat /proc/version [root@localhost ~]# cat /proc/versionLinux v ...

  7. HTTP发包工具 -HTTPie

    原文: https://zm8.sm-tc.cn/?src=l4uLj8XQ0IuekZWWi5bRk5CZi5qN0ZyQktCPkIyL0M6cnMmcx8qdoM7PnMrIyMnI&u ...

  8. [UE4]崩溃的原因收录

    UTool tool; 这样声明可以编译通过,但是UE4 Editor会直接崩溃. 应该改成这样: UTool* tool;

  9. TCP阻塞模式开发

    在阻塞模式下,在IO操作完成前,执行的操作函数将一直等候而不会立刻返回,该函数所在的进程会阻塞在这里.相反,在非阻塞模式下,套接字函数会立即返回,而不管IO是否完成,该函数所在的线程将继续运行.阻塞模 ...

  10. Web 单元测试

    问题描述: The import org.junit.Test conflicts with a type defined in the same file 导入的org.junit.Test和一个相 ...