CSS轻松实现色块标题标识

2016-01-29 12:46 186 1 收藏

CSS轻松实现色块标题标识,CSS轻松实现色块标题标识

【 tulaoshi.com - Html 】

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

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

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

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

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

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

来源:https://www.tulaoshi.com/n/20160129/1487500.html

上一篇：使用Flex结合Webservice完成域名查询
下一篇： Nhibernate的数据分页技术（续）

看过《CSS轻松实现色块标题标识》的人还看了以下文章更多>>

DBGridEh实现单击标题栏排序方法

标签：编程语言网络编程

1.添加引用:DBClient 2.置DBGridEh控件属性: 设置dghAutoSortMarking属性为true 设置希望排序的Column的TitleButton属性为true 3.//表格排序过程 procedure OrderGrid(dataSet:TClientDataset;orderField:string); var i:integer; begin if dataSet.IndexFieldNames'' then ...

在VB中实现闪动标题栏

标签：编程语言网络编程

摘要在你的应用程序中，你可能会希望将应用程序的标题栏进行闪动，以提醒用户进行某种操作，本文介绍了如何使一个窗口的标题栏进行闪动。闪动标题栏闪动一个窗口的标题栏意味着改变它的标题栏的外观，例如它从活动变为不活动，或是从不活动变为活动等等。只要你能在VisualBasic中得到窗口的句柄，你就可以使用Windows应用程...

javascript实现轮显新闻标题链接

标签： Web开发

用两个div嵌套链接文字，最外面的div设置 overflow:hidden，并用js动态控制它的width，实现伸展与收缩。 !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" head meta&...

纯CSS代码实现翻页

标签： Web开发

!DOCTYPE a href="/keys/html/index.html" target="_blank"html/a PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" head profile="http://www.w3.org/2000/08/w3c-synd/#" meta http-equiv="content-language" content="z...

用css实现图片替换

标签： Web开发

style h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;} .box2{} .box2 img{display:block; padding:2px; border:0;} .box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;} .box2 a span{display:...

查看更多精彩>>