探秘Eclipse 4的CSS切换主题功能

2023-02-21 02:00:02html-css09

探秘Eclipse 4的CSS切换主题功能,第1张

Eclipse 计划刚出现的时候从事Eclipse各个项目的团队和开发者就Eclipse未来下一步该怎么走进行了激烈讨论而随着Eclipse SDK中的CSS主题功能得到明显改善 Eclipse RCP技术越来越成熟特别是我们进行动态主题转换时更为简单方便这些讨论渐渐地平息了本文载自一个外国专家Kai的blog 全文如下

如果你想要实现一个CSS主题转换只需扩展你的Eclipse 路径如下 eclipse e ui css swt theme

这里有一个在Eclispe 下进行双模板声明的示例可以参考

<extension

point= eclipse e ui css swt theme >

<theme

basestylesheeturi= css/dark gradient css

id= ntacts themes darkgradient

label= Dark Gradient Theme >

</<span>theme>

<theme

basestylesheeturi= css/bright gradient css

id= ntacts themes brightgradient

label= Bright Gradient Theme >

</<span>theme>

</<span>extension>

然后需要做的就是指定一个程序来切换实际的主题这里是选择dark gradient主题的全部代码

public class DarkThemeHandler {

@Execute

public void execute(IThemeEngine engine) {

engine setTheme( ntacts themes darkgradient )

}

使用工作台模型来将我们的转换程序绑定到目录或工具栏下面的两幅效果图就展示了黑色主题和明朗主题之间的动态转换

黑色主题

明亮主题

lishixinzhi/Article/program/Java/hx/201311/26905

表格边框探秘table 及如何快速实现细线表格一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到标签中都有 rules。它有三个参数(cols,rows,none)，当 rules=cols 时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当 rules=rows 时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none 时，纵向分隔线和横向分隔线将全部隐藏。二、表格边框的隐藏普表通格这是一普通的表格不怕下雨只显示上边框下起雨来该怎么办只显示下边框上不着天下不着地只显示左、右边框两边走开老子姓王只显示上、下边框左右为难只显示左边框左右为难只显示右边框光秃秃全脱了不显示任何边框表格边框的显示与隐藏，是可以用frame 参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。只显示上边框

只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

三、表格边框普表通格这是一普通的表格

普表通格细表线格表格加上了漂亮的细线 (利用 cellspacing1 像素间隙和表格与单元格背景的不同) 细表线格细表线格这和上面那个可不一样，它用的是 CSS，效果却一样。 (对单元格border 的定义) 细表线格细表线格再进一步，把边框变成虚线，同样是CSS 的神奇作用。细表线格细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。立表体格立体感的表格 (简单的亮暗边框设置，注意只有IE 支持这种效果) 立表体格无名表格给表格加上一个表头 (应用和标签) 无名表格表中表效果Ⅰ 给表头再加个框 (用CSS 为定义一个边框) 表中表效果Ⅰ 表中表效果Ⅱ 看起来和上面的一样，可是这个才是真正的表中表哦。 (在中插入一个表格) 表中表效果Ⅱ 这一节要靠你自己去发现了，因为这样学到的东西才是真正属于自己的（我的一个偷懒的借口）。我已经在每个表格的下面写出了重点，并在右边给出它的源代码，你可以对照着看。下面还有一个边框会自己变颜色闪动的表格，有兴趣也研究研究吧 ^o^ 下面来讲讲如何来快速的实现细线表格拉。。其实很简单啊。。只要在标题那边嵌入一段小小的CSS 就可以实现啦。虽然只能实现细线表格。。但是一目了然。嘻嘻这边你也可以定义背景为图片啦。不一样的图片会产生不一样的边框样式哦这边的表格结构是不是很清楚啦。。其中关键的是要设置cellspacing 为"1"还有就是定义它的class 为"table1"。。关键的俩个千万不能忘了哦，不然效果出不来的哦。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>新疆行知书</title>

</head>

<body>

<ul>

</ul>

<br>

</div>

<ul>

<li>乌鲁木齐雷阵雨 20℃-31℃</li>

<li>吐鲁番多云转阴 20℃-28℃</li>

<li>喀什阵雨转多云 25℃-32℃</li>

<li>库尔勒阵雨转阴 21℃-28℃</li>

<li>克拉马依雷阵雨 26℃-30℃</li>

</ul>

<br>

</div>

<ul>

</ul>

<br>

</div>

<ul>

</ul>

<br>

</div>

<ul>

<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>

</ul>

<br>

</div>

</div>

<ul>

</ul>

<br>

</div>

<ul>

<li><a href="#">美丽华大饭店</a></li>

<li><a href="#">海德大饭店</a></li>

<li><a href="#">银都大饭店</a></li>

<li><a href="#">鸿福大饭店</a></li>

<li><a href="#">友好大酒店</a></li>

</ul>

<br>

</div>

</div>

</body>

</html>

css为：

body{

background-color:#2286c6

margin: 0px

padding:0px

text-align:center

font-size:12px

font-family:Arial, Helvetica, sans-serif

}

#container{

position:relative

margin:0px auto 0px auto

width:780px

text-align:left

}

div br{

display:none

}

#globallink{

margin:0pxpadding:0px

}

#globallink ul{

list-style:none

padding:0pxmargin:0px

}

#globallink li{

float:left

text-align:center

width:78px

}

#globallink a{

display:block

padding:9px 6px 11px 6px

background:url(button1.jpg) no-repeat

margin:0px

}

#globallink a:link, #globallink a:visited{

color:#004a87

text-decoration:underline

}

#globallink a:hover{

color:#FFFFFF

text-decoration:underline

background:url(button1_bg.jpg) no-repeat

}

#left{

float:left

width:200px

background-color:#FFFFFF

margin:0px

padding:0px 0px 5px 0px

color:#d8ecff

}

#left div{

background-color:#5ea6eb

margin:0px 5px 0px 5px

}

#weather{

background:url(weather.jpg) no-repeat -5px 0px

margin:0px 5px 0px 5px

background-color:#5ea6eb

}

div#left #weather h3{

font-size:12px

padding:24px 0px 0px 74px

color:#FFFFFF

background:none

margin:0px

}

div#weather ul{

margin:8px 5px 0px 5px

padding:10px 0px 8px 5px

list-style:none

}

#weather ul li{

background:url(icon1.gif) no-repeat 0px 6px

padding:1px 0px 0px 10px

}

#left div h3{

font-size:12px

padding:4px 0px 2px 15px

color:#003973

margin:0px 0px 5px 0px

background:#bbddff url(icon2.gif) no-repeat 5px 7px

}

#today{

padding:0px 0px 10px 0px

}

#today ul{

list-style:none

margin:-5px 0px 0px 0px

padding:0px

}

#today ul li{

text-align:center

}

#today ul li img{

border:1px solid #FFFFFF

margin:8px 0px 0px 0px

}

#today ul li a:link, #today ul li a:visited{

color:#d8ecff

text-decoration:none

}

#today ul li a:hover{

color:#FFFF00

text-decoration:underline

}

#middle{

background-color:#FFFFFF

margin:0px 0px 0px 2px

padding:5px 0px 0px 0px

width:400pxfloat:left

}

#middle div{

margin-left:5px

margin-right:5px

position:relative

}

#middle h3{

margin:0pxpadding:0px

height:41px

}

#middle h3 span{

display:none /* 文字去掉，换成图片 */

}

#beauty{

margin:15px 0px 0px 0px

padding:0px

}

#beauty h3{

background:url(picture_h1.gif) no-repeat

}

#beauty ul, #route ul{

list-style:none

margin:8px 1px 0px 1px

padding:0px

}

#beauty ul li{

float:left

width:97px

text-align:center

}

#beauty ul li img{

border:1px solid #4ab0ff

}

#route{

clear:bothmargin:0px

padding:5px 0px 15px 0px

}

#route h3{

background:url(route_h1.gif) no-repeat

}

#route ul li{

padding:3px 0px 0px 30px

background:url(icon1.gif) no-repeat 20px 7px

}

#route ul li a:link, #route ul li a:visited{

color:#004e8a

text-decoration:none

}

#route ul li a:hover{

color:#000000

text-decoration:underline

}

#right{

float:left

margin:0px 0px 1px 2px

width:176px

background-color:#FFFFFF

color:#d8ecff

}

#right div{

position:relative

margin-left:5px

margin-right:5px

background-color:#5ea6eb

}

#right div h3{

font-size:12px

padding:4px 0px 2px 15px

color:#003973

margin:0px 0px 5px 0px

background:#bbddff url(icon2.gif) no-repeat 5px 7px

}

#map{

margin-top:5px

}

#map p{

text-align:center

margin:0px

padding:2px 0px 5px 0px

}

#map p img{

border:1px solid #FFFFFF

}

#food{

padding-top:10px

}

#food ul, #life ul{

list-style:none

padding:0px 0px 10px 0px

margin:10px 10px 0px 10px

}

#food ul li, #life ul li{

background:url(icon1.gif) no-repeat 3px 9px

padding:3px 0px 3px 12px

border-bottom:1px dashed #EEEEEE

}

#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{

color:#d8ecff

text-decoration:none

}

#food ul li a:hover, #life ul li a:hover{

color:#000000

text-decoration:none

}

#life{

padding-top:10px

padding-bottom:5px

margin-bottom:5px

}

#footer{

background-color:#FFFFFF

margin:1px 0px 0px 0px

clear:both

position:relative

padding:1px 0px 1px 0px

}

#footer p{

text-align:center

padding:0px

margin:4px 5px 4px 5px

background-color:#5ea6eb

}

#footer p a{

color:#FFFFFF

text-decoration:none

}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：关于Java的AES加密问题

# 下一篇：nodejs 怎么引入css文件

推荐阅读

热门文章

最新发布

标签列表

探秘Eclipse 4的CSS切换主题功能

给您推荐相同类型的内容：