CSS打造色块标题标识

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

      这种风格的特点是色彩变化丰富、应用Flash动画合理、结构新颖，最明显的特点就是表格或标题栏常会加上一条横或竖的色带，如图中圈起来的地方就是这样:
　



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



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



　　 然后将Background标签中的Background Color设置为“#BAEE66”，在你要应用这种风格的表格上添加这个CSS效果就OK了。
　　 应用这种方法，大家可以做出各式各样美观且访问速度很快的表格来，下图是笔者试做的几种风格，大家可以根据border的设定再结合表格的设计来做出各式各样的效果来。

赞 (0)

相关推荐

  • CSS打造色块标题标识

    CSS打造色块标题标识

    不少网站开始采用韩式风格来建站.一般人都会想到用Photoshop等软件来完成这样的效果,但如果网页上这类图片太多,或是较大时,会给访问带来一定的困难.这里就给大家讲一讲如何用CSS来做这样的风格,因为用CSS只是对颜色的定义,少了图片的应用,所以基本不会影响速度.       这种风格的特点是色彩变化丰富.应用Flash动画合理.结构新颖,最明显的特点就是表格或标题栏常会加上一条横或竖的色带,如图中圈起来的地方就是这样: 首先,在Dreamweaver MX 2004中为页面添加一个CSS效果

  • 超强推荐CSS打造经典鼠标触发显示选项

    css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>> 高级搜索 分类搜索 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用CSS打造多彩文字链接

    CSS打造多彩文字链接 td { font-size : 12px; font-family : 宋体; } a { font-family: "宋体"; font-size: 9pt; text-decoration: none} .t1{ color: #CC0000;text-decoration: underline } .t2{ text-decoration : none; color:#006699; } .t3 { color: #006600; text-decora

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

  • 推荐css打造经典鼠标触发显示选项

    看到了 分享:绝对经典的滑轮新闻显示(javascript+css) 这个帖子,都是css+js的控制经典,其实单css就可以搞定了,只不过是为了兼容那垃圾的 IE 才不得做个js , 以下的代码如果去掉js部分地话,在Opear和Firrfox都能正常的,但是IE下就不行了. 大家有兴趣的可以测试一下.也希望能帮到有需要的人. css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>

  • 用jquery与css打造个性化的单选框和复选框

    用jquery与css打造个性化的单选框和复选框

    上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 纯CSS打造的导航菜单(附jquery版)

    纯CSS打造的导航菜单(附jquery版)

    方式一:直接编写代码实现 效果如下: 代码如下: 复制代码 代码如下: <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ m

  • 用CSS打造 抽屉菜单

    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 宜广宣传广告 #leftside{ float:left; background-color:#00468C; width:150px; margin:0 auto; text-align:center; padding:10px 0;} #leftside.show_about p.about{

  • JS+CSS实现实用的单击输入框弹出选择框的方法

    本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • JS+CSS实现可拖动的弹出提示框

    本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

随机推荐