设置CSS表格与CSS表单的样式

开发 前端
CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版;而CSS表单则作为与用户交互的窗口,时刻都扮演着信息获取和反馈的角色。

本文和大家重点讨论一下如何设置CSS表格与CSS表单的样式,CSS表单作为与用户交互的窗口,时刻都扮演着信息获取和反馈的角色。这里围绕CSS表格和表单介绍CSS设置其样式的方法,以及利用CSS实现各种特效的技巧。

设置CSS表格与CSS表单的样式

CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。而CSS表单则作为与用户交互的窗口,时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法,以及利用CSS实现各种特效的技巧。

1.控制表格

CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了,使用没有边框的表格来排版,也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法,包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容:

表格中的标记

表格的颜色

表格的边框

2.CSS表格实例一:隔行变色

当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。本例最终效果如图所示。

隔行变色

3.CSS表格实例二:鼠标经过时变色的表格

对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。

4.CSS表格实例三:日历

日历是日常生活中必不可少的东西,而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性,可以很轻松的实现各种日历的效果。我们在这里通过简单的实例,进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。

日历

5.CSS表单

CSS表单是网页与用户交互所不可缺少的元素,传统的HTML中对表单元素的样式控制很少,仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍,包括表单中各个元素的控制,与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容:

CSS表单中的元素

像文字一样的按钮

七彩的下拉菜单

6.综合实例一:直接输入的Excel表格

作为公司、单位的各种年度报表,往往数据量都很大,如果也都像普通表单一样逐项填写,势必造成网页的冗长。而Excel表格在本地机器操作时一直广受好评,通过CSS控制,结合CSS表格和CSS表单,便能轻松实现类似的效果,如图所示。

直接输入的Excel表格

7.综合实例二:模仿新浪网民调查问卷

门户网站上的新闻、事实往往都伴随着各种各样的调查问卷,包括事实的评论、舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。本例通过简单的模拟新浪的调查问卷,进一步熟练CSS控制表格、表单的方法。

这个图是新浪网上关于姚明的热点调查,本例通过简单的CSS表格、表单的配合,模拟该调查问卷的效果。
 

【编辑推荐】

  1. 专家推荐 DIV CSS表单布局的五个小技巧
  2. 畅谈DIV排版和table排版的区别
  3. 14大CSS工具提高网页设计效率
  4. DIV CSS表单布局的几种技巧
  5. 鼠标经过时改变DIV背景颜色的三种途径

 

 

责任编辑:佚名 来源: aa25.cn
相关推荐

2022-03-30 14:34:21

鸿蒙HarmonyOScss

2010-09-14 14:23:08

DIV+CSS

2017-07-20 11:11:39

前端CSS书写规范

2010-08-26 11:01:00

ulliCSS

2010-09-16 10:29:47

DisplayVisibilityCSS

2010-08-31 12:42:22

CSS a标签

2023-07-14 07:52:37

CSS优先级Design

2022-12-28 08:16:30

CSS新规范样式

2010-09-07 15:31:21

DIV CSS表单

2022-12-06 23:32:47

CSS语言LCH

2010-08-16 15:32:06

DIV+CSS

2015-07-07 10:20:47

WebCSS框架

2010-08-26 15:18:27

CSS样式

2010-08-23 10:30:05

CSS超链接

2022-11-28 08:45:56

前端CSS

2010-08-31 09:39:17

CSS样式表

2009-07-01 16:36:40

CSS样式工具Visual Stud

2020-10-23 08:51:55

CSS

2010-08-23 10:43:21

DIVCSS

2010-09-01 10:09:32

CSS样式
点赞
收藏

51CTO技术栈公众号