CSS轻松实现色块标题标识- HTML/XHTML教程

当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS轻松实现色块标题标识

HTML/XHTML教程: HTML表格标记教程(4):边框色属性BORDERCOLOR; HTML表格标记教程(1):制作表格; HTML表格标记教程(2):表格的边框属性BORDER; HTML教程,简单学习HTML语言(2); HTML表格标记详细讲解(适合初学者); 网页制作解惑:图象文件的路径; HTML教程,简单学习HTML语言; HTML基础:HTML的基本结构; HTML教程,认识optgroup元素; 网页输入框的样式触发效果; HTML教程,HTML默认样式; 超链接打开目标(target)的测试; XHTML教程,简单认识XHTML基础知识; HTML表格标记教程(35):跨列属性COLSPAN; HTML表格标记教程(33):单元格的垂直对齐属性VALIGN; HTML表格标记教程(34):跨行属性ROWSPAN; HTML表格标记教程(31):单元格的宽度和高度属性WIDTH、HEIGHT; HTML表格标记教程(32):单元格的水平对齐属性ALIGN; HTML表格标记教程(30):单元格的暗边框色属性BORDERCOLORDARK; HTML表格标记教程(28):单元格的边框色属性BORDERCOLOR

技术文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 32 ::

收藏到网摘: n/a

　　不少网站开始采用韩式风格来建站，这种风格的特点是色彩变化丰富、应用动画合理、结构新颖，最明显的特点就是表格或标题栏常会加上一条横或竖的色带，如图1中圈起来的地方就是这样。

　　一般人都会想到用Photoshop等软件来完成这样的效果，但如果网页上这类图片太多，或是较大时，会给访问带来一定的困难。这里就给大家讲一讲如何用CSS来做这样的风格，因为用CSS只是对颜色的定义，少了图片的应用，所以基本不会影响速度。

　　首先，在 MX 2004中为页面添加一个CSS效果类，具体设置如图2。

　　点击OK后，会弹出具体的效果设置，打开其中的border标签，进行如图3的设置。

　　然后将Background标签中的Background Color设置为“#BAEE66”，在你要应用这种风格的表格上添加这个CSS效果就OK了。

　　应用这种方法，大家可以做出各式各样美观且访问速度很快的表格来，图4是笔者试做的几种风格，大家可以根据border的设定再结合表格的设计来做出各式各样的效果来。