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

wordpress Upgrade 按钮样式学习

样式如下：

html代码：

<span class="buy-button-wrapper">
<a href="http://go.siteorigin.com/snapshot-premium" class="buy-button">
<span>Buy Upgrade</span><em>$9</em>
</a>
</span>

css代码：

/* Buy Button */

.buy-button-wrapper {
background:[......]

viewport meta 标签在移动平台的应用

只要是想说一下网页在ipad平台下的显示问题

网页的设计：设计了一个背景自适应的网站，就是每一栏横条的宽度都是100％，横条里面的内容的宽度是1000px，浏览器居中显示

问题：在ipad Safari浏览器下面每条横栏压缩到980px宽 ，留出一块空白

网上查了下发现

在移动版的 Safari（iOS平台）中定义了 viewport meta 标签，它的作用就是创建一个虚拟的窗口（viewport），而且这个虚拟窗口的分辨率接近于桌面显示器，Apple 将其定位为 980px

我是这样理解的，在ipad物理屏幕上——视觉窗口（visual viewpor[……]

HTML特殊字符编码对照表

寻找这个比较精致的一个箭头指向 » 在google顶部导航“更多 »”里面发现了

查到了这个HTML特殊字符编码对照表，收藏一下

css3 圆角渐变颜色按钮样式写法

脱离以前渐变需要用图片来铺的写法，全用css3代码些出来，优点是可以根据字体的大小伸缩。当填充和字体大小发生变化时，这些按钮的大小可以容易地适应。这种方法最好的部分就是能被应用于任何HTML元素，比如 div, span, p, a, button, input, 等等。

主要是border，border-radius, text-shadow, box-shadow，CSS Gradient的应用

按钮的主要几部分构成

按钮的样式

按钮的相关代码

.logbar input[type="button"] {
	background-color: #[......]

jQuery Mega Menu多栏下拉菜单小工具——JQuery Mega Menu Widget

首先了解一下Mega Menu，Mega英文是超级的意思，Mega Menu可译为超级菜单，最近比较流行的一种菜单做法。

Mega Menu是多栏下拉菜单，通常下拉菜单只显示一栏，如果项目多了就会很长，Mega Menu下拉列表中将菜单显示成多栏，用一级下拉菜单表现二级下拉菜单的内容。一级下拉里面可以分成几列，每列是下级分类的内容，还可以有列标题。这样整体一目了然，用户体验直观方便。还可以插入图片、简短文字甚至视频。

这里介绍的是wordpress 里面的一个插件 JQuery Mega Menu Widget

这个插件很简单，点击此处下载，下载后上传到目录/wp-con[......]

基于jQuery Lightbox效果弹出窗口插件

用到的几个Lightbox效果插件，在此做个收藏吧

先看一下Lightbox弹框效果

jQuery Lightbox Plugin

演示

基于jquery开发的类Lightbox插件FancyBox。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

Fancybox

演示

WordPress页面侧边显示不同的菜单

具体就是WordPress页面显示同个父页面中的子页面的链接

有一个父页面，然后它有一些子页面。当你打开父页面的时候，你想在 sidebar 显示它的子页面的链接。 当你打开子页面链接的时候，你还是想要显示同样一组链接。

函数代码及解决方法如下：

<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages("title_li[......]

zencart页面布局三栏布局修改成两栏布局

zencart网店系统，好多人会想把产品信息页面变成两栏的，找了好多方法，还是下面这个方法最简单实用

在这个页面的header_php.php去修改

比如:产品详细页面是products_info 就去改

includes\modules\pages\product_info\header_php.php

想关左边就加一句     $flag_disable_left = true;    关右边就是$flag_disable_right = true;

直接加在最后面就OK。

google浏览器chrome设置滚动条样式

在chrome浏览器下用过google reader的都知道，鼠标放在左边导航会有一个简洁的滚动条，自己也做了一个试一下
样图

代码：

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get[......]

HTML5的hidden属性用法及display:none和visible:hidden的区别

用法很简单：

<div hidden>
You can’t see me!
</div>

这个属性的表现类似css的display:none，用了这个属性后，元素会被隐藏，块级元素也会折叠起来不再占位，和visible:hidden不一样。

display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别：
visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到）
display:none属性会使这个对象彻底消失（看不见也摸不到）

对于不支持HTML5的浏览[……]