葡提子，英文建站博客 OnlyGrape

css3 Transition 效果的使用

admin — Tue, 08 May 2012 08:13:41 +0000

今天看到一个英文的网站的链接鼠标经过状态是有一个过渡效果的，看了一下是用的transition属性，特地查了一下具体的使用先看一下在下面元素中的鼠标效果

transition css3

这里是a属性鼠标经过切换颜色的过渡效果

a:link,
a:active,
a:visited {
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	color:#690;
	outline: none;
	text-decoration:none;
}
a:hover { 
	color:#EBB73E;
}

效果：

Onlygrape

然后就是鼠标经过div宽度变化的过渡效果

.transition_div1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

.transition_div1:hover
{
width:300px;
}

效果：

万维网联盟的HTML5规范验证页面

admin — Mon, 16 Apr 2012 10:39:03 +0000

万维网联盟的HTML5规范验证页面Markup Validation Service(Check the markup (HTML, XHTML, …) of Web documents) 可以以此来验证下自己设计的页面是否符合标准。http://validator.w3.org/ address地址栏输入网址，check就可以看到你的网站是否很完美。

手动升级WordPress步骤

admin — Wed, 29 Feb 2012 09:36:35 +0000

由于服务器一直不支持ftp， WordPress的升级只能采用手动升级的方法了，网上看了好多方法，这个方法自己试了一下，还是很好用的，比较简单，步入正题： 手动升级WordPress步骤 第一步、备份程序文件和数据库。最好将你的网站所有文件备份以下。第二步、手动升级 WordPress 之前最好先登录后台关闭所有插件，当然不关闭影响也不大，不过全部关闭要好点。第三步、到 WordPress 官方网站下载最新的 WordPress 版本程序。第四步、解压安装包更新数据。将网站根目录下 wp-admin 和 wp-includes 两个目录中的文件换成最新下载的程序文件，或者将原来的文件删除后再拷贝新文件进去。wp-content文件夹内的内容不用更改，这里面放的是主题文件，插件文件等。第五步、替换根目录下除wp-config.php文件以外的文件。（wp-config.php文件是wp配置文件，包括数据库连接设置等）第六步、运行http://你的博客地址/wp-admin/upgrade.php，将你的博客地址填入路径中执行升级程序。很简单，完成上面六步就完成更新了。

WP-UTF8-Excerpt——wordpress首页自动显示摘要可保留文章格式

admin — Tue, 28 Feb 2012 02:34:26 +0000

这里推荐一个wordpress首页自动显示摘要并且可保留文章格式的插件WP-UTF8-Excerpt 主要特点： 1，支持多字节语言（如中文），不会产生乱码。 2，摘要可保留文章中的格式标签，如字体、颜色、链接、图片等（需保留的标签可在后台设置）。 3，首页每篇文章显示300字，存档页面每篇文章显示150字（字数可设置）。 安装： 1，解压到/wp-content/plugins/目录 2，在插件页面激活插件即可！如果不能工作，请检查主题的index.php文件，把改成注意：有些主题在the_content()中还有一些字，比如the_content(’Continue Reading »’)，这种要把整句话换掉。有些主题用了其他文件来控制存档页面，如category.php、archive.php等，如有必要，请对这些文件也做修改。启用插件后，在后台设置选项卡下会生成摘要选项，在这里可以设置摘要显示的文字数量等 问题： 想/不想在摘要中显示某些标签，比如图片、视频，怎么办？答：进入后台设置页面（Settings——Excerpt），修改Allow these HTML tags中的内容。默认设置显示图片，不想显示图片的话就把删掉。默认设置不显示视频，想显示视频的话就加入视频的标签，各个视频网站不一样，有可能是或或其他，查看插入视频的代码就知道了。其他标签以此类推。为什么某些文章还是输出全文了？答：因为你的全文太短了…… 摘要显示的优先级如下： 1. 如果用户手动设定了摘要，就显示手动设置的摘要，不管字数和标签。 2. 如果设置了，就输出之前的部分，不管字数和标签。 3. 如果原文长度小于用户设定的摘要字数，显示全部字数，但会按照用户设置的允许标签来过滤标签（以后可能会提供设置来决定是否过滤标签）。这种情况下不会显示[......]和“继续阅读”链接。 4. 其他情况，按照用户设置的字数和允许标签来显示摘要。为什么我的RSS Feed不显示全文？答：本主题没有动RSS Feed，你的Feed不显示全文，应该跟本主题无关。请查看你的后台——设置——阅读——Feed中每篇文章，是不是选成摘要了。我用了代码高亮插件，显示不正常？答：用代码格式化插件好像确实容易出问题。对于这种文章，暂时请大家先手动加摘要吧，我再想想办法。我讨厌那个“继续阅读”链接，怎么办？答：后台选项中可以设置“继续阅读”的文本，你可以改成“Read more”或其他任何东西。它的class为read-more，可以用CSS进行美化或隐藏。如果你实在讨厌它，请打开插件文件wp-utf8-excerpt.php，找到165行左右的

    $text .= "<p class='read-more'><a href='".get_permalink()."'>".$read_more_link."</a></p>";

删掉它，或者注释掉它（在行首加上//），这个链接就不会出现了。

css下拉菜单小三角形箭头的写法

admin — Fri, 24 Feb 2012 08:22:50 +0000

直接用css写出一个向下指的小三角行，以后就不用切图那么麻烦了主要代码就是：

border-color: #666 #fff #fff;
	border-style: solid;
	border-width: 4px;

具体的演示 如图显示代码：

.site {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site b {
	border-color: #666 #fff #fff;
	border-style: solid;
	border-width: 4px;
	position:absolute;
	top:7px;
}
<div class="site"> 这就是下拉的小三角形 <b> </b> </div>

同理一个向上指的三角形箭头

.site {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site b {
	border-color: #fff #fff #666;
	border-style: solid;
	border-width: 4px;
	position:absolute;
	top:3px;
}
</div class="site"> 这就是向上指的小三角形 <b> </b> </div>

在线生成 CSS3 圆角代码——Border Radius

admin — Mon, 20 Feb 2012 02:45:51 +0000

CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。 border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。例：border-radius: 10px 20px 60px 40px; 除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性： * border-top-left-radius * border-top-right-radius * border-bottom-right-radius * border-bottom-left-radius 在考虑到浏览器的兼容方面，IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。现在给大家介绍 Border Radius 是一款在线应用，可以很方便的生成 CSS3 圆角代码，即时显示效果，并提供 webkit ，Gecko 兼容代码。很方便使用

导航条固定置顶＋背景渐变＋投影的css代码

admin — Fri, 17 Feb 2012 09:13:18 +0000

实现效果导航条固定置顶，导航背景渐变，并且有个投影。今天看了qq for mac 界面的一个导航条固定置顶，并且背景颜色渐变，还有一个阴影，对于浏览器的兼容也做的不错，就copy下来了，留做备用。看效果：上代码：

.top {background:#fff;
	background:#FBFBFB;
	background:-moz-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
	/* FF3.6+ */

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(100%, #DADADA));
	/* Chrome,Safari4+ */

	background:-webkit-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
	/* Chrome10+,Safari5.1+ */

	background:-o-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
	/* Opera11.10+ */

	background:-ms-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
	/* IE10+ */

	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#DADADA',GradientType=0 );
	background:linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
	/* W3C */

	-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	position:relative;
    height: 25px;
	padding-top:4px;
    position: fixed;
    width: 100%;
    z-index: 999999;}

主要看以下渐变的语法

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */

-webkit-gradient(< type >, < point > [, < radius >]?, < point > [, < radius >]? [, < stop >]*)
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

解析一下渐变的类型? (linear) 渐变开始的X Y 轴坐标(0 0 – 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 开始的颜色? (from(red)) 结束的颜色? (to(blue))

css position属性relative相对定位与absolute绝对定位的区分

admin — Fri, 17 Feb 2012 08:46:44 +0000

w3school 对其值的描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。（记住这点就能明白相对定位）因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。下面是网上找到一段详解，应该是比较清楚一点的 Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。 Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

更改comment_form()函數表单顺序，名称，电子邮件，网站排序

admin — Wed, 28 Dec 2011 08:18:31 +0000

修改评论框上面，名称，电子邮件，网站与输入框的位置， WordPress 3.0 新增的表单生成函数 comment_form()来控制的，修改文件comments 是没有效果的。先用图片说明问题，先看原来3.0之前的评论样式：使用表单函数 comment_form() 生成的评论样式：从上面2个图片可以看出，昵称、邮箱、网址的标签跑到前面来了，对于很多主题来说不太雅观，其实可以用正则来“挪位” 下面是方法：把下面的 php 函数加在 <?php comment_form(); ?> 前面就能实现 input 挪到前面鸟，具体原理请看正则表达式和php的preg_replace函数，当然还有 comment_form() 的参数 $fields

<?php
	// This is stupid fields customization
	function zbench_comment_fields ($fields) {
		foreach ($fields as $name => $field) {
			$fields[$name] = preg_replace('/(<label(?:.*?)>(?:.*?)<\/label>)\s*(<span>\*<\/span>)?\s*(<input(?:.*?)\/>)/','\3\1\2',$field);
		}
		return $fields;
	}
	add_filter('comment_form_default_fields', 'zbench_comment_fields');
?>

最终效果：非常感谢ZWWoOoOo，为了修改评论框我也纠结了很长时间，在他那里找到了修改方法，撒花，原文请查看http://zww.me/archives/25314

wordpress后台添加摘要文本框

admin — Tue, 20 Dec 2011 07:49:16 +0000

安装wordpress 3.1正式版之后，添加新文章界面，少了许多选项，以前的添加摘要不见了。一直认为自己选的模板的问题，上网查代码，看了片文章才发现是版本隐藏了。升级到3.1 摘要没了是因为这个版本自动默认隐藏了，先点开后台侧栏的“添加新文章”，在这个编辑文章页面的右上部有个 “ 显示选项 ” ，打开，把“摘要”勾选出来即可。有些主题不支持摘要功能，即便你自己手工编辑好摘要，但保存后，首页的文章还是全文输出。同时wordpress 3.1的作者选项，自定义栏目选项由以前的可见，都设置成了隐藏，这里要注意下