CSS 循序渐进(三)样式“表”秀

2024-02-11 01:38

本文主要是介绍CSS 循序渐进(三)样式“表”秀,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS 循序渐进(三)样式“表”秀

转自:动态网制作指南 www.knowsky.com

  不知道大家看完前面两篇以后是否对用style已经有了一点心得,其实前文所说的不过是样式表最基本的运用。笔者这里想问一问,读者们有没有感觉到html中所规定的那些标准形式的表格(table)和表单(form)样子过于呆板,而风格又时常与自己网页格格不入呢?而且,对于一个大信息量和交互式的网页而言,表格和表单是需要大量运用并且占有很重要的位置的。现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话,您是否会兴奋得跳起来呢?其实,如果恰当的运用style,甚至可以做出比作图更好的效果来。

  先给大家说说关于定制表格的一些细节。在第一章里的那个例子里,大家应该看到了许多运用定制表格的地方。应该说定制表格并不复杂,主要的也就是对背景(background)和边框(border)进行定义。用的也不过是这两方面的属性。

块参数(Block-Level Formatting Properties)

参数

含义

举例

Left-margin,right-margin

留的空白

长度值,百分比值

Padding-top…

内容边框间距

长度值,百分比值

Border-width

边框宽度

长度值

Border-style

边框风格

Solid,double,groove

Border-color

边框颜色

颜色值

Width

宽度

长度值,百分比值

Float

对齐

Left,right

颜色参数(Color and Background Properties)

参数

含义

举例

Color

前景色彩

颜色值(red, #FF0000)

Background-image

背景文件

文件地址

Background-color

背景颜色

颜色值

background-attachment

背景是否依附

scroll(随内容滚动)和fixed(固定位置)

background-repeat

背景重复格式

repeat-x(水平重复)

,repeat-y(纵向重复),no-repeat(不重复)

  说起来这些属性在上次介绍文字排版的时候也用过了,不过您这次再看看它在表格里的表现,它们在这里扮演的角色非常重要,笔者决非是简单的老调重弹。需要说明的是所有的边框属性都是分位置的,也就是说,可以对外观的上、下、左、右四个方向分别作设定,也就是说,对于每一项边框属性,都有border-left-width,border-right-width,border-top-width,border-bottom-width这样的四个分属性,也可以在某个属性后面连带四个值,分别表示对top、right、bottom、left的定义。这一点很有用,我们就可以运用它,做出类似光影的效果。而另外一个属性,所谓风格(style)就很难定义了。有些说法,比如说solid(实心),double(双层)很好理解。但是有些效果恐怕要您用过以后才能明白是怎么回事。这里笔者把它们全部列举如下:

   dotted、dashed、solid、double、groove、ridge、inset、outset。

  下面有一个专门的关于表格的例子,大家看看,效果如图一

  源码如下:

< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; 
charset=gb2312">
< style type="text/css">
< !--
table {  font-family: "宋体"; font-size: 9pt; color: 
#000033; text-decoration: none; background-color: 
#FFCCCC; padding-top: 4px; padding-right: 3px; padding-
bottom: 2px; padding-left: 2px; border: #CCCCFF; 
border-style: groove; border-top-width: thick; border-
right-width: thick; border-bottom-width: thick; border-
left-width: thick}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< table width="75%" border="1" cellspacing="1" 
cellpadding="1" align="center">
< tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
< td>一< /td>
< td>二< /td>
< td>三< /td>
< td>四< /td>
< /tr>
< tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
< td>a< /td>
< td>b< /td>
< td>c< /td>
< td>d< /td>
< /tr>
< tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
< td>甲< /td>
< td>乙< /td>
< td>丙< /td>
< td>丁< /td>
< /tr>
< tr bgcolor="#CCFFCC" bordercolor="#0000CC" 
valign="middle" align="center"> 
< td>A< /td>
< td>B< /td>
< td>C< /td>
< td>D< /td>
< /tr>
< /table>
< /body>
< /html>

  至于表单,由于网页的交互性越来越被人们重视,表单的运用也越来越多。可是HTML本身所制定的那些标准形式的表单件的样子实在让人不敢恭维。文本框一律是内部深陷的长条,而按钮又全是那种灰灰的块块,放在一个精致的网站中实在不成样子。所以可以说适当的调整边框大小、颜色,做出符合网站个性的表单也是网站成功的一环吧。

  大家要看效果的话可以借鉴一下fanso的打开音乐(http://music.fanso.com)的例子。(也可以看图二)大家注意看它右边的一排输入框,其实它是将输入框做到最小了,但是味道却反而足了。

  用到的定义语句其实很简单:

.input1 {
BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM: 
#a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid; 
BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8 
1px solid; FONT-SIZE: 9pt
}

  大家应该可以看到,表格和表单的定制最重要的地方其实在于边框与颜色的选择与搭配,这个是其外观效果的关键。

这篇关于CSS 循序渐进(三)样式“表”秀的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/698513

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽