OnlyGrape葡提子,英文建站博客英文网站建设，用户体验设计，前段技术研究，seo网站推广

WordPress插件Meta Slider幻灯片播放

@import url语法css导入样式表

@import这种方式通常会在CSS文件中使用，即是导入样式表。这样做的好处是，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可。

示例
@import url(“foo.css”) screen, print;
@import “print.css”;
@import url(print.css);

@import与link 相比的几个问题
1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况[……]

css自适应多终端响应式布局设计

首先设置允许网页宽度自动调整
在网页代码的头部，加入一行viewport元标签。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaquer[……]

网站首页加入收藏功能

加入收藏功能目前只支持ie浏览器，其他浏览器智能给出提示“您使用的浏览器不支持此功能，请使用Ctrl+D进行添加”

代码：

<script type=”text/javascript”>
function AddFavorite()
{
var sURL = ‘http://blog.onlygrape.com’;
var sTitle = ‘网站标题：Onlygrape’;
try
{
window.external.addFavorite(sURL, sTitle);//IE浏览器加入收藏夹
}
catch (e)
{
try
{
wind[……]

HTML mate标签X-UA-Compatible设置浏览器兼容模式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

meta元素：可提供有关页面的元信息，<meta>标签位于文档的头部，不包含任何内容，<meta> 标签的属性定义了与文档相关联的名称/值对。
http-equiv：为名称/值对提供了名称
content：提供了名称/值对中的值。该值可以是任何有效的字符串。
X-UA-Compatible：此名称在 ie6、ie7 下面不识别，仅ie8以上版本识别，此属性值设置ie模式为兼容模式
IE=edge：此值的意思是以最新的I[……]

css3 first-child和last-child选择器使用方法

first-child
选择属于其父元素的首个子元素的每个 例： <p> 或 <li>等元素，并为其设置样式：

写法
p:first-child {background-color:yellow;}

last-child
选择属于其父元素的最后一个子元素的每个 例： <p> 或 <li>等元素，并为其设置样式：

写法
p:last-child {background-color:yellow;}
<p> 中的首个 <i> 元素并设置其样式
p:first-child i {background[……]

wp文章编辑框添加字体大小等按钮

用wordpress编辑文章，调整一个字体的大小，wordpress默认的设置里面是没有显示的，这就需要把编辑框的一些按钮打开

打开用的模版文件中的functions.php文件

在后面插入
function add_editor_buttons($buttons) {
$buttons[] = ‘fontselect’;
$buttons[] = ‘fontsizeselect’;
$buttons[] = ‘cleanup’;
$buttons[] = ‘styleselect’;
$buttons[] = ‘hr’;
$buttons[] = ‘del’;
$[……]

360卫士CDN驱动的常用前端公共库以及Google公共库&字体库调用方法

运用wordpress建站，因Google Fonts导致WordPress加载速度缓慢问题，查了几种解决方案

前面的文章——WordPress一直加载的fonts.googleapis.com将字体禁止或者本地化

同时也关注到了360卫士推出的的常用前端公共库CDN服务以及Google公共库&字体库调用方法

网址：http://libs.useso.com/

提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库&字体库的调用方法。包括：常用的JavaScript前端库、Google提供的前端公共库了、Google提供的免费字体库的替代方案[……]

WordPress自定义页面模板

使用wordpress建立新的页面文章的时候，可以不局限page页面的页面格局样式，自己来新建一个页面，个人感觉就类似于自己建了一个主题页面，随意设计布局，有能力的话随意调取不同分类的文章来组合

先说一下位置在哪，在新建页面右边“页面属性”里面

如何新建一个模板
1.通过ftp工具在你的主题目录下新建一个php文件。比如：special.php（名字随意）
（简单的方法就是直接复制一个page文件，改下名字）

2.关键是这句，编辑这个新建的文件，在文件头部加上这段代码。

<?php
/*
Template Name:专题
*/
?>

3[……]

wordpress限制标题字数

在调用不用分类文章的时候，想直接就输出一定字符的标题，可以采用修改functions文件的形式，添加一个新的title函数，特殊的地方调用这个函数就可以
一般文章标题的显示方式为：

<?php the_title(); ?>

在主题的模板函数 (functions.php)中添加以下代码

<?php
function specialtitle($max_length) {
$title_str = get_the_title();
if (mb_strlen($title_str,'utf-8') > $max_length ) {
$title_str[......]