用CSS制作圆角框的方法二

上篇文章介绍了简单的CSS圆角框技术一,但它只能纵向伸展而不能横向扩宽,本篇文章将在原有的基础上介绍一个可自由伸展的CSS圆角框制作技术

可伸展的CSS圆角框制作方法要比固定宽度圆角框麻烦得多,由于它的可伸展性,需要多个Div和背景图片嵌套才能完成。

首先,准备圆角背景图片,将它分成四个部分,如图一所示。将四个圆角背景图分开保存成tl.gif、tr.gif、bl.gif和br.gif四个图片文件,应用于不同位置的四个Div。

相对应的Html代码如下:

<div>
<div>
<div>
<div>内容</div>
</div>
</div>
</div>

CSS代码如下:

.box {
width:202px;
background:#ecf1f5 url(bl.gif) no-repeat left bottom;
}
.br {
background:url(br.gif) no-repeat right bottom;
padding-bottom:9px;
}
.tl {
background:url(tl.gif) no-repeat left top;
}
.tr {
background:url(tr.gif) no-repeat right top;
padding:9px;
}

以上的Html代码结合CSS代码的解释:

1.名为box的Div在最外面,它的底图是tl.gif,而且背景颜色和底图颜色,这样可以很好的完成无限伸展,如果把box的CSS属性中宽度去掉,它照样是个完美的圆角框。

2.名为br的Div背景为br.gif,它的作用是使box可向右下方伸展,加上9像素的内补丁,是为了让圆角不被其它背景色和元素遮挡。

3.名为tl的Div背景为tl.gif,它的作用是使box左上方的圆角固定。

4.名为tr的Div背景为tr.gif,它的作用是使box右上方的圆角固定,并可向右伸展,加上9像素的内补丁,可以让圆角不被其它背景色和元素遮挡。

如果去掉box的宽度,这个圆角仍然可以正常显示,这就说明它是一个无懈可击的可延伸圆角框技术。不知道您试验成功了没有。

用CSS制作圆角框的方法一

本文转自网络http://dreamweaver.abang.com/od/divcss/a/circle-corner1.htm

 

CSS产生之初,只能制作直角边框,虽然可以制作圆角的CSS3已经问世,但还不普及。曲线设计在网页中的广泛应用,使圆角成为了时髦的CSS技术之一。

    创建圆角的方法有很多种,每种要根据实际情况应用。下面我介绍一个最简单的圆角边框制作方法——固定宽度的圆角框

    顾名思义,固定宽度的圆角框的宽度是固定的,而高度是可伸展的,如图一的效果,这样的圆角框只要两张图片即可制作完成。一张图片用于顶部、一张用于底部图片,如图二中所示。

    如果要制作图一中的效果,它的Html代码如下:

<div>
<div>
<div>内容</div>
</div>
</div>

两张背景图片则如图二中所示,名为top的div用top.gif作为背景置于顶部,名为box的div用bottom.gif作为背景置于底部,名为body的div使用背景和边框效果即可,无需使用背景图。

    CSS代码如下:

.box {
width:200px;
background:url(bottom.gif) no-repeat left bottom;
padding-bottom:9px;
}
.top {
background:url(top.gif) no-repeat left top;
padding-top:9px;
}
.body {
background:#ecf1f5;
border-left:1px solid #a9a9a9;
border-right:1px solid #a9a9a9;
padding:0 10px;
}

这种圆角效果对可宽度固定、内容不固定的元素起到作用,如果遇到宽度和高度都不固定的元素,就需要用到其它方法了,在这里买个关子,请关注下篇文章。

WordPress代码高亮插件指南[译文]

本文转载自网络

我曾经抱怨过我多么需要一个代码高亮插件但是却没有收到好的建议…我亲自测试审核了一些我在插件目录找到较为的流行插件。这些被我列出的插件满足下列的要求:
支持WordPress 2.7.1
在2009年有过更新

我寻找代码高亮插件的标准除了以上两点上还有:
代码在切换可视化模式和HTML代码模式后没有变化
下载后立即可以使用,不需要配置或者少量的配置即可

SyntaxHighlighter Evolved

上次更新: 2009-5-4 (Version 2.1.0)
标记: 可视化的. Eg/

[/php]

,

[/javascript]

SyntaxHighlighter Evolved 的一个功能是它有一个漂亮的工具栏在代码快的转角处,允许你使用下列功能:在一个弹出窗体内查看代码、复制代码到剪贴板和打印代码。出于某些原因Syntaxhighter Evolved喜欢去掉我的代码里缩进(空格)(译者按:这可能是WordPress自带TinyMCE在FireFox下的Bug)。如果我尝试在HTML模式保存,我会收到PHP警告同时我的代码在我的文章中消失。总之,这个插件不是我想要的。

p06-syntax-highlighter-evolved

p06-syntax-highlighter-evolved-02

Syntax Highlighter Plus

上次更新: 2009-2-11 (Version 1.0b2)
标记: 可视化的. Eg/

[/sourcecode]

就像Syntax Highlighter家庭的其他插件,这款插件也有一个工具条,并且和Syntax Highlighter Evolved一样,它也因为在我尝试保存到HTML模式时候丢失了我代码的缩进而失败。

p06-syntax-highlighter-plus

Google Syntax Highlighter for WordPress

上次更新: 2007-8-14 (Version 1.5.1)
标记: HTML. Eg/

尽管它已经快2年没有更新了,Google Syntax Highlighter似乎还是博主们的流行选择,所以我决定把它放到测试中来。Google Syntax Highlighter 有一个文本化的工具栏,没有Syntax Highlighter家族那么花俏但是却功能一样。这个插件在代码行比较长时候会遇到样式的问题,不过没什么大关系。直到我在切换可视模式和HTML模式时候失败了,又是一位让人失望的候选者。

p06-google-syntax-lighlighter

p06-google-syntax-lighlighter-02

WP-Chili

上次更新: 2008-7-24 (Version 1.1)
标记: HTML. Eg/

WP-Chili 是另外一位比较特殊的候选者,它在another WordPress syntax highlighter review进行过评测,我依然给它一个测试机会。和之前的几位候选者不同的是,它需要手动字符转义。我使用Elliot’s postable script (推荐)来完成这个工作。它的样式有些简单,可能需要一些调整(比如说修正长换行、附加背景和边框颜色以便从正常的段落中区分出来)。WP-Chili可以可视模式和HTML模式切换下工作,遗憾的是代码缩进在数次保存之后丢失了……难道没有一个插件接受我的空格缩进?!

p06-wp-chili

Code Colorer

上次更新: 2009-1-27 (Version 0.7.3)
标记:可视化的&HTML . Eg/ <code lang=”php”>, [cc lang=”php”]

我在插件目录找到了一个新的插件。由于某些原因,我不能正确获取代码,尽管使用Firebug能查看到HTML代码。(译者按:我之前有使用过Code Colorer,在切换也存在问题,但能正常显示)

p06-code-colorer

Dojox WordPress Syntax Highlighter

上次更新: 2009-1-27 (Version 0.7.3)
标记: HTML. Eg/ <pre><code class=”php”>

Dojox 是第一个通过测试的插件:代码在数次不同模式切换下仍然保存。Dojox使用双重标记并且需要手动编码转义。虽然背景颜色也许需要修改一下来适应博客的主题,但除此之外,最终这是一个可以工作的插件。

p06-dojox

Syntax Highlighter and Code Colorizer for WordPress

上次更新: 2009-5-5 (Version 2.0.296)
标记: HTML. Eg/ <pre class=”brush:php”>

很显然这款插件也称作代码美化插件。代码美化默认自动执行,同时作为Syntax Highlighter家族的成员它也会会有一个工具栏在右上角。不同于这个家族其他成员,它的确能够正常使用!无论在切换可视化或者HTML模式时候都没有问题。当然,你得自己手动转义你的代码。

p06-code-colorizer

WP-SynHighlight

上次更新: 2009-1-27 (Version 0.91)
标记: 可视化的. Eg/ [codesyntax lang=”php”]

这是我能找到的唯一一个使用可视化标记并且在不同模式之间切换还能工作的插件。一旦你在可视化模式粘贴代码,不需要加上转义字符,这是在可视化编辑模式下的优势。但是当我使用它自带的例子时,不管我怎么做,我都没有办法通过WP-SynHightlight为代码着色。

p06-wp-synhighlight

结论

Syntax Highlighter and Code Colorizer for WordPress 赢的了我的评选,它简单强大而且确实在工作。这个插件是现成的,意味着我不需要在CSS中修改为他重新着色以保证和我主题匹配。我知道我会享受我的选择的。

SyntaxHighlighter Evolved代码高亮显示

刚用wordpress博客,看见别人的博客上,插入的代码特别漂亮,所以我就研究别人的博客修饰代码的css文件,结果我发现这是可以在网上找插件然后即可,代码高亮显示插件
在网上找了很多相关的插件,有一篇文章介绍了很多插件代码高亮显示插件,我不敢苟同,特原文转载过来,原文地址 http://www.xxtime.com/blog/?p=32

 
呵呵,文章写的还不错,就是太片面了,今天我就适用了下SyntaxHighlighter Evolved 发现 并不像作者说的那么糟糕 而作者推崇的 Syntax Highlighter and Code Colorizer for WordPress  也没有预料中的那么好 事实上  经过我的测试 SyntaxHighlighter Evolved   功能非常强大 而且支持个性设定 而且经过我的实验 和 Syntax Highlighter and Code Colorizer for WordPress  比对也没出现什么问题

第一点 插入代码时候要比  Syntax Highlighter and Code Colorizer for WordPress  方便
第二点 SyntaxHighlighter Evolved 支持功能自定义
不多说了,看个效果显,代码显示效果如下

<html>

<body>

<?php

$d=date("D");

if ($d=="Fri")

{

echo "Hello!<br />";

echo "Have a nice weekend!";

echo "See you on Monday!";

}

?>

</body>

</html>

2010年9月的开始

自学了很多年的网页开发设计,一直都想自己做点,曲曲折折,又一次刚刚开始….

筹划了很久的右岸酷网终于要见面了,其实域名是我去年拿下的,主机服务商问题很大,备案问题,种种原因耽误着我的进度

昨天刚刚买了个空间,今天就马上架上了博客系统,其实还是很快,曾几何时互联网只认识html的时候,网络编程对人们来说是一块很高深的领域,那个时候我还小什么都不懂,现在懂了,可惜错过了黄金时间,如今的互联网各种人才各种技术层出不穷,作为后起之者想做大做好必然不是一件容易的事,但是爱好者们会一如既往不折不扣不屈不挠的匍匐向前

我们一直都在努力着….

                                                                                                              Joe Chu