杨琪琪

超链接还可以向浏览者指出有关文档中某个主题的更多信息。例如，“如果你想了解更详细的信息，请参阅某某页面。”。作者可以使用超链接来减少重复信息。例如，我们建议创作者在每个文档中都签署上自己的姓名。这样就可以使用一个将名字和另一个包含地址、电话号码等信息的单独文档链接起来的超链接，而不必在每个文档中都包含完整的联系信息。

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用标签标记的，可以用两种方式表示。锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记，该标记可以被超链接引用。

还有一些与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。

锚的补充：

锚的这两种类型都使用同样的标签；也许这就是它们拥有同样的名称的原因。但是我们发现，如果将它们区分开，把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”，那么您将更容易理解这两种类型的锚。

符号的英语名称与解释

admin — Thu, 09 Feb 2012 06:24:02 +0000

_      underscore, underline, underbar下划线
@      at, accent sign
¯      overline, overscore, overbar 上划线（例如 0,1̅）
        文字加删除线    line-through, strikethrough, strikeout
~      tilde 波浪线
        reverse solidus or back slash
/      slash
-      dash 破折号， hyphen 连字符，minus (sign), opposite sign, negative sign, break sign
#      电话键盘上念pound 乐谱上念sharp (升半音) 号码 sharp (后跟数字) 或number
|      pipe, vertical bar
^      caret
*      asterisk, star (sign)
§      section; division 分节号
→      arrow 箭号；参见号

.      period, dot, full stop
?      question mark
...    ellipsis, etc
!      exclamation mark（感叹号）, caution sign（警示标志）, factorial sign阶乘符号（数）
,      comma
:      colon
;      semicolon
( )    brackets, round brackets, parentheses, left bracket, right bracket
[]     brackets, square brackets, left square bracket, right square bracket
{}     brackets, curly brackets, left curly bracket, right curly bracket
<>     angle brackets 尖括号

+      plus (sign), cross sign, positive sign
$      dollar (sign), currency sign
%      percent (sign)
&      and
=       equals, sign of equality
'       quotation marks, single quotation mark, single quotes, apostrophe
"       quotation marks, quotation mark, quot(es)
>       greater than
<       less than
∑      (sigma) summation of 总和

web标准入门必备

admin — Wed, 08 Feb 2012 10:05:59 +0000

1）有HTML和CSS基础

学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。

2）转变观念

在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。

所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。

3）多动手、多动脑

说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。一定要自己多做实验，这样能更快掌握。

XHTML CSS知识小汇

admin — Tue, 07 Feb 2012 05:39:50 +0000

这篇文章是介绍xhtml css基础的相关知识点，对于一些简单的语法与概念在这里不作为讨论范围。首先说一下我们要讨论的内容：

文档类型
语言编码
html标签
css样式
css优先级
css盒模型组成

1）文档类型

当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01 中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码

接下来我们还会发现这样一句话：

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

3）html标签

html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。

成对的标签：

{…}
{…}

{…}

{…}

{…}

……

单一的标签：

…….

还需说明一点的是按xhtml规范，标签必须用小写。

4）css样式

加载css样式有以下四种

外部样式
内部样式
行内样式
导入样式

外部样式形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。例如——

内部样式是以结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。例如——

行内样式是在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

内部样式

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个 global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。

@import url("/css/global.css");

5）css优先级

id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

6）css盒模型组成

css盒模型是这里的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS 排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。

css中文字体（中英对照）

admin — Mon, 06 Feb 2012 07:25:10 +0000

在写一个网站的样式表的时候，都会不可避免地用到一些中文字体，比如说微软雅黑、黑体等，除非是做英文站。在 CSS 中写入中文字体的方法一般采用 font-family:"微软雅黑","黑体";这样类似的表达方式，但是对于像 WordPress 这样需要 UTF8 编码平台来说，一个不注意没有转换编码就会导致中文字体无法按照希望的字体表形出来。所以我们可以通过英文、unicode 这种形式来表达中文，比如说刚才的 font-family:"微软雅黑","黑体";就可以写成 font-family:"Microsoft Yahei","SimHei"; 这样看起来是不是也可以统一一点呢。

中文字体与英文、unicode 对应的太多，背也背不下来，就搜集了一张表格收藏记录一下，希望也是你想要的：

中文名	英文名	Unicode
Mac OS
华文细黑	STHeiti Light [STXihei]	534E65877EC69ED1
华文黑体	STHeiti	534E65879ED14F53
华文楷体	STKaiti	534E658769774F53
华文宋体	STSong	534E65875B8B4F53
华文仿宋	STFangsong	534E65874EFF5B8B
丽黑 Pro	LiHei Pro Medium	4E3D9ED1 Pro
丽宋 Pro	LiSong Pro Light	4E3D5B8B Pro
标楷体	BiauKai	680769774F53
苹果丽中黑	Apple LiGothic Medium	82F9679C4E3D4E2D9ED1
苹果丽细宋	Apple LiSung Light	82F9679C4E3D7EC65B8B
Windows
新细明体	PMingLiU	65B07EC6660E4F53
细明体	MingLiU	7EC6660E4F53
标楷体	DFKai-SB	680769774F53
黑体	SimHei	9ED14F53
宋体	SimSun	5B8B4F53
新宋体	NSimSun	65B05B8B4F53
仿宋	FangSong	4EFF5B8B
楷体	KaiTi	69774F53
仿宋_GB2312	FangSong_GB2312	4EFF5B8B_GB2312
楷体_GB2312	KaiTi_GB2312	69774F53_GB2312
微软正黑体	Microsoft JhengHei	5FAEx8F6F6B639ED14F53
微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
Office
隶书	LiSu	96B64E66
幼圆	YouYuan	5E7C5706
华文细黑	STXihei	534E65877EC69ED1
华文楷体	STKaiti	534E658769774F53
华文宋体	STSong	534E65875B8B4F53
华文中宋	STZhongsong	534E65874E2D5B8B
华文仿宋	STFangsong	534E65874EFF5B8B
方正舒体	FZShuTi	65B96B6382124F53
方正姚体	FZYaoti	65B96B6359DA4F53
华文彩云	STCaiyun	534E65875F694E91
华文琥珀	STHupo	534E6587742573C0
华文隶书	STLiti	534E658796B64E66
华文行楷	STXingkai	534E6587884C6977
华文新魏	STXinwei	534E658765B09B4F

不过，即使有这张字体清单作为对照还是无法满足不了有着人手一个规则的浏览器大军，就算是举着完美支持 CSS 大旗的 Firefox，也有不尽如人意的地方，因为 Firefox 居然不支持以上别名，对它来说 "Microsoft Yahei" 并不是微软雅黑，只能反馈出浏览器默认字体的的结果。

增强样式表可读性的技巧

admin — Sun, 05 Feb 2012 10:58:03 +0000

A.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。这里就不展开描述。

B.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

C.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

D.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

E.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

F.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

G.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class=update

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class=update将被使用，因为class比p更近。

H.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

I.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

Item 1

Item 1

Item 1

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

Item 1

Item 1

Item 1

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

J.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(images/***.gif) #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

K.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

L.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

M.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这两种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，到底哪一种方法更适合你就要看具体的情况，这里不再展开论述。

N.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。

O.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

P.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

Q.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。例外，空格和换行特别有助作者阅读文件。

CSS HACK——针对ie6,ie7,ie8以及firefox

admin — Sat, 04 Feb 2012 04:47:21 +0000

浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢？

第一种方法：

应用微软提供的代码：

把这段代码放到里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了

background:#ffc; /* 对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */

说明：

firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:#ffc，看到的是黄色；

ie7前两短都能认，以最后的为准，所以最后解析是background:#ccc，看到的是灰色；

ie6三段都能认，而且“_”这个只有ie6能认，所以最后解析是_background:#000，看到的是黑色

这已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。

ie8的那段兼容7的代码我也测试过了，在我现在的windos 7 测试版所带的ie8是没问题的，以后ie8正式版出来还管不管用就不知道了。

ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看之前的内容是不是这样的标准写法

这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。

第二种方法：

要求苛刻的朋友是不愿意在页面头部增加这样一句代码的，因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。在之前发布的“全面兼容的css透明滤镜 ”文章中，可能当时测试的疏忽，IE8的兼容性没有解决好，现在这个问题也可以解决了。

以下是兼容IE6/IE7/IE8/FF的写法，注意下面的顺序不可颠倒

margin-bottom:40px;       /*ff的属性*/
margin-bottom:140px9;    /* IE6/7/8的属性 */
color:red;              /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的属性*/

下面以一个实例的形式表现，大家可以运行代码查看一下效果——

针对ie6,ie7,ie8,ff的CSS HACK写法

FF下蓝边

IE6下红边

IE7下绿边

IE8下黄边

杨琪琪

wordpress模板——美食餐饮网站必备主题下载

Pluto Fullscreen Cafe and Restaurant

FoodMe Restaurant Business Theme

The Restaurant

Feast!

Palazzo Di Sole

Bon Apetit

Monmarthe Cafeteria

Sofa Restaurant

wordpress主题模板——超人气下载

1. Pacifico – Fullscreen wp theme with motion effect

2. HER – Premium WordPress Theme

3. Royale’ Creative WordPress Theme

4. Shutter – Photography & Portfolio WordPress theme

5. Music: Musicians theme & Facebook app

6. Vue Responsive WordPress Theme

7. Zeences

8. Angus – All purpose theme

9. Audiology Responsive WordPress Audio Theme

大气漂亮的全屏WP主题模板

1. Rhea For Photography Creative Portfolio

2. JR Photography WordPress Theme

3. Photox – Creative Photography Theme

4. PhotoPharm: Premium Photography and Blog Theme

5. This Way WP Full Video/Image Background with Audio

6. Nevo – Premium Fullscreen Portfolio WP Theme

7. Photolux – Photography Portfolio WordPress Theme

8. Mass – Ajax & Fullscreen Background Slider Theme

9. SideWindr Full AJAX WordPress Theme

10. WordPress Zoom Portfolio + Blog

超文本的含义