虹梅路3338弄:- html/css & we...
来源:百度文库 编辑:九乡新闻网 时间:2024/04/29 03:12:54
大家在上网的时候会发现很多网站做的很公整,很漂亮,而我们自己的小站却糟糕的很,这是为什么呢,其中很大的关键在于表格的运用,当然也包括色彩,今天我们就来说一说其中的玄机!先发几种效果,大家看一下。网上应用最多的也无非就是这几种!
当然大家如果又发现了其他漂亮表格,可以来这里咨询和讨论!呵呵
[ 本帖最后由 寅生 于 2006-4-24 09:44 AM 编辑 ]
附件: 您所在的用户组无法下载或查看附件
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
沙发 大 中 小 发表于 2006-4-24 08:55 只看该作者
我们先说第一种效果
代码如下: 复制内容到剪贴板 代码:
这里的奥秘有三点:
1、这是两个表格嵌套。
2、色彩的设置,外面一层表格的背景设置为0099FF,在效果中会是外框颜色,外面表格的单元格背景设置为FFFFFF,效果中就是内外表格中间的白色间隙,内部表格单元格的背景色仍然设置为0099FF。
3、内外两个表格的cellspacing值都设为1,边框border设为0
好了,注意这几个要点,举一反三,效果就是这样实现的。呵呵
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
板凳 大 中 小 发表于 2006-4-24 09:12 只看该作者
第二个表格我们会用到样式
源代码如下: 复制内容到剪贴板 代码:
关键点:
这里用到了样式style。两次设置border的样式。
第一次border:1px solid #7AA9DF。这是左边一个单元格的边框,粗细为1像素,颜色为7AA9DF。
第二次border-bottom:1px solid #7AA9DF,这是右边单元格,只设置边框的底边border-bottom。
[ 本帖最后由 寅生 于 2006-4-24 09:27 AM 编辑 ]
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
地板 大 中 小 发表于 2006-4-24 09:15 只看该作者
第三个表格
源码如下: 复制内容到剪贴板 代码:
要点如下:
1、跟上面效果最大的区别就是这里的边框border值为1,表格之间的间隙cellspacing值仍然为1
2、在这里如果大家看代码的很明显bordercolorlight,bordercolordark主要是用这两个属性。顾名思义,他们分别为边框颜色亮的部分和暗的部分。
3、注意这里这两个颜色的设置,表格的这两个颜色值都为白色,单元格的值分别为000000,eeeeee
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
5# 大 中 小 发表于 2006-4-24 09:35 只看该作者
第四个表格效果
源码如下: 复制内容到剪贴板 代码:
这个效果是表格嵌套中的经典,简单美观,现在很多人在模仿这个效果。
关键点:
1、表格的嵌套
先建一个3*2的表格,cellspacing值设为6。然后合并第二行的两个单元格,分别在第一行很第三行的单元格里再插入2*1表格。
2、单元格颜色的设置可以看源码!
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
6# 大 中 小 发表于 2006-4-24 09:43 只看该作者
第五个表格
先看一下源码: 复制内容到剪贴板 代码:
这是网页中标准的内容块。显著的标题和内容区分,简洁大方。
关键点:
表格cellspacing值为1,效果中的边框线,背景颜色设为0099FF。下面内容块单元格的颜色设为白色。效果就出来了。是不是很简单,呵呵
好了这五种表格效果都讲完了,大家可以举一反三。
如果上面有什么纰漏,希望朋友们指正。有什么不明白的可以贴出来研究一下。
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
clear
酷MM
青铜长老
个人空间
发短消息
加为好友
当前离线
7# 大 中 小 发表于 2006-4-24 09:55 只看该作者
好好学习
一切皆有可能!
UID
19876
帖子
980
精华
0
积分
5117
金币
1747 枚
威望
0
热心度
79
阅读权限
60
来自
广东省东莞市厚街
注册时间
2006-3-9
查看详细资料
TOP
Biglin
支柱会员
个人空间
发短消息
加为好友
当前离线
8# 大 中 小 发表于 2006-4-26 23:04 只看该作者
学习~
当然大家如果又发现了其他漂亮表格,可以来这里咨询和讨论!呵呵
[ 本帖最后由 寅生 于 2006-4-24 09:44 AM 编辑 ]
附件: 您所在的用户组无法下载或查看附件
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
沙发 大 中 小 发表于 2006-4-24 08:55 只看该作者
我们先说第一种效果
代码如下: 复制内容到剪贴板 代码:
这里的奥秘有三点:
1、这是两个表格嵌套。
2、色彩的设置,外面一层表格的背景设置为0099FF,在效果中会是外框颜色,外面表格的单元格背景设置为FFFFFF,效果中就是内外表格中间的白色间隙,内部表格单元格的背景色仍然设置为0099FF。
3、内外两个表格的cellspacing值都设为1,边框border设为0
好了,注意这几个要点,举一反三,效果就是这样实现的。呵呵
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
板凳 大 中 小 发表于 2006-4-24 09:12 只看该作者
第二个表格我们会用到样式
源代码如下: 复制内容到剪贴板 代码:
关键点:
这里用到了样式style。两次设置border的样式。
第一次border:1px solid #7AA9DF。这是左边一个单元格的边框,粗细为1像素,颜色为7AA9DF。
第二次border-bottom:1px solid #7AA9DF,这是右边单元格,只设置边框的底边border-bottom。
[ 本帖最后由 寅生 于 2006-4-24 09:27 AM 编辑 ]
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
地板 大 中 小 发表于 2006-4-24 09:15 只看该作者
第三个表格
源码如下: 复制内容到剪贴板 代码:
bordercolorlight="#000000" bordercolordark="#eeeeee" height="20"> | bordercolorlight="#000000" bordercolordark="#eeeeee"> |
bordercolorlight="#000000" bordercolordark="#eeeeee" height="20"> | bordercolorlight="#000000" bordercolordark="#eeeeee"> |
要点如下:
1、跟上面效果最大的区别就是这里的边框border值为1,表格之间的间隙cellspacing值仍然为1
2、在这里如果大家看代码的很明显bordercolorlight,bordercolordark主要是用这两个属性。顾名思义,他们分别为边框颜色亮的部分和暗的部分。
3、注意这里这两个颜色的设置,表格的这两个颜色值都为白色,单元格的值分别为000000,eeeeee
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
5# 大 中 小 发表于 2006-4-24 09:35 只看该作者
第四个表格效果
源码如下: 复制内容到剪贴板 代码:
这个效果是表格嵌套中的经典,简单美观,现在很多人在模仿这个效果。
关键点:
1、表格的嵌套
先建一个3*2的表格,cellspacing值设为6。然后合并第二行的两个单元格,分别在第一行很第三行的单元格里再插入2*1表格。
2、单元格颜色的设置可以看源码!
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
寅生
版主
乐于助人
个人空间
发短消息
加为好友
当前离线
6# 大 中 小 发表于 2006-4-24 09:43 只看该作者
第五个表格
先看一下源码: 复制内容到剪贴板 代码:
这是网页中标准的内容块。显著的标题和内容区分,简洁大方。
关键点:
表格cellspacing值为1,效果中的边框线,背景颜色设为0099FF。下面内容块单元格的颜色设为白色。效果就出来了。是不是很简单,呵呵
好了这五种表格效果都讲完了,大家可以举一反三。
如果上面有什么纰漏,希望朋友们指正。有什么不明白的可以贴出来研究一下。
快乐学习!
UID
11700
帖子
5400
精华
3
积分
33930
金币
7468 枚
威望
5
热心度
5339
阅读权限
100
注册时间
2005-7-1
查看详细资料
TOP
clear
酷MM
青铜长老
个人空间
发短消息
加为好友
当前离线
7# 大 中 小 发表于 2006-4-24 09:55 只看该作者
好好学习
一切皆有可能!
UID
19876
帖子
980
精华
0
积分
5117
金币
1747 枚
威望
0
热心度
79
阅读权限
60
来自
广东省东莞市厚街
注册时间
2006-3-9
查看详细资料
TOP
Biglin
支柱会员
个人空间
发短消息
加为好友
当前离线
8# 大 中 小 发表于 2006-4-26 23:04 只看该作者
学习~
- html/css & we...
HTML以及CSS在线转换工具
html、php、asp、CSS、Rss等名词的定义
CSS JS实现的选项卡效果(html组件)-网页陶吧-CSS-天极Yesky
使用CSS固定html:text 和html:password的宽度 - 技术博客 - 博客大巴
CSS
css
html、php、asp、CSS、Rss等名词的定义 - 留阳旭日的日志 - 网易博客
发现一个特给力的编写HTML/CSS的插件——Zen Coding
20个高品质的 Photoshop 网页设计教程 | 高品质 HTML+CSS 制作服务 ...
在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示
HTML
html
HTML
html
We 3
美女we
CSS教程
CSS属性.
常用CSS
CSS教程
css兼容性问题
CSS精要
CSS TEST