分类目录归档:前端随笔摘记

记一段圆角阴影效果的CSS

代码如下:

.book{background:#fff;border-radius:5px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.3);margin:20px auto;overflow:hidden;}

效果如下

当然为了能够让人看的清晰一点,阿福把它调大一点好吧,这个看起来没效果?看看http://union.flydon.net 的效果吧,背景效果。非常的不错。

下面让我们来看看这段CSS各句的功能吧:

border-radius:5px;这句就是css3中的圆角特性,5个px的圆角,是不是看到演示效果中的圆角了呢~

box-shadow:0 5px 20px rgba(0, 0, 0, 0.3); 这句呢就是写的盒子中的阴影效果,看到演示里面的效果了么,就是这句完成的~

margin:20px auto;这句呢就是控制上下左右边距的margin了。老实说,阿福在想这个是不是偷懒之举呢,反正这个写着20px的margin是上下的,左右的被auto给取代了,意思是居中(不过貌似效果中不是居中的)

overflow:hidden这句呢是最简单的,隐藏溢出,反正有事没事加上这句总没错~

WP函数的摘记之上一篇previous_post_link 下一篇next_post_link

previous_post_link()和next_post_link() 这两个函数是阿福下午在测试别人给我的单本小说主题的时候看到的,本来是想看看使用键盘箭头链接下一页的JS的,结果就看到这个东西,既然看到了,那么就顺便来查查看。原来上一章和下一章居然是酱紫的。解释如下:

 

函数名称 previous_post_link():

函数用法:

<?php previous_post_link($format, $link, $in_same_cat = false, $excluded_categories = ''); ?>

format(string)链接的格式. 这个上一页链接显示的格式. ‘%link’将会被替换成 ‘链接’ . ‘Go to %link’ 将会创建 “Go to <a href=…” >…</a>这种格式的链接. 默认为 ‘&laquo; %link’.link (string) 显示链接文字. 默认为文章的标题 (‘%title’).in_same_cat (boolean) 上一篇文章是否为同一分类。如果设置为TRUE,只显示当前分类的上一篇文章。选项 :

  • TRUE
  • FALSE (Default)

excluded_categories (string) 需要排除的分类,用分类id.多个分类用and隔开; 如:’1 and 5 and 15′. 没有默认值。
默认用法

默认用法

将上一篇(按照发表文章的时间顺序)文章的标题作为链接文本,文本后带有一个向左的尖箭头(<<)。默认情况下,该标签的工作方式类似于previous_post()。
« Previous Post Title

<?php previous_post_link(); ?>

以粗体的文章标题作为链接文本

以由“strong”标签包围(通常会将文本显示为粗体)的上一篇(时间顺序)文章标题作为链接文本。

« Previous Post Title

<?php previous_post_link('<strong>%link</strong>'); ?>

在同一分类目录下,显示文章标题外的其它文字为链接文本

自定义文字,将其作为同一分类目录下当前文章的上一篇文章链接。不使用文章标题作为链接文本。本例中假设“Next post in category”(XX分类中下一篇文章)为自定义文字,你也可以使用自己喜欢的内容作为自定义文字。

« Previous in category

<?php previous_post_link('%link', 'Previous in category', TRUE); ?>

在同一分类目录下,除某一个分类目录外

只要分类目录ID不为13,则显示该分类目录下当前文章的上一篇文章链接。你可以将13替换为任何你希望排除的分类目录ID。如果要排除多个分类目录,请用 ” and “分隔各分类目录ID。

« Previous in category

<?php previous_post_link('%link', 'Previous in category', TRUE, '13'); ?>

准备逐渐修改wordpress的默认主题

RT,准备修改成为一个非常华丽的主题。嗯,现在得先修改背景图片。

CSS代码如下:

background-attachment: fixed;/*这是用来锁定位置的,也就是说背景不会随着网页的拉动而移动 */
background-color: #000000;/* 用来定义背景的颜色是灰色,是灰色吗?你自己看看吧*/
background-image: url(http://rffan.com/wp-content/uploads/2013/03/bj1.jpg);/*加载背景图片,千万不要用阿福的图片!阿福的流量不多! */
background-repeat: no-repeat;/* 定义背景图片不重复*/
background-position: center top;/* 定义背景图片在中间*/

效果就是阿福博客中的背景图了。

CSS的区块定位

CSS中的区块中有很多的区别。当然阿福最关注的还是区块的定位。因为阿福多少还知道区块啥的。而阿福不知道的就是如何定位区块。曾经阿福也搞过类似的麻烦事情。就是改了代码,直接将主题给改残了。

所以自己的看了一番书,然后就发觉原来这个东西如此简单。事实上,学一些东西,一定需要实践。最主要的自己感兴趣。。。阿福曾经也看过书,但是很可惜的是,看了N久还是没有看会。不过这次,居然一次居然就会了!

给自己设置一个qq邮箱订阅

QQ作为现在最流行的IM工具(在中国,没有之一)。是的而QQ邮箱,则将作为QQ的附属品,是非常的广泛的。那么订阅到QQ邮箱,是非常有必要 的。

那么如何达到呢?

很简单,只需要一段代码就OK了,代码如下

<a href=”http://mail.qq.com/cgi-bin/feed?u=http://rffan.com/feed” title=”立即订阅”><div >订阅到QQ邮箱</div></a>

呵呵,只需要将上面代码中的阿福的网址,替换为你的网址就OK了~~当然这是没有样式的,要样式?好吧阿福目前还不会~~现在看看阿福的侧边栏?嘿嘿嘿