10个超漂亮的HTML/CSS模板免费下载

当我们打算做个新网站时,总会想去一些提供免费模板的网站瞅一眼,看有啥新发现不。

下面这十个模板可能对你有点儿作用。除了感谢祖国外,还要感谢网页设计师和和开发人员,是他们投入大量精力和技能,制作出了不起的网页模板。

1) Particle Websites

Free Download

2) Fruit Art

Free Download

3) Photographer

Free Download

4) Corporate

Free Download

5) Enterprise Solutions

Free Download

6) Fashion Blog

Free Download

7) Lily Pads

Free Download

8 ) Skipopia

Free Download

9) Farm


Free Download

10) Jean Website

Free Download

原文链接:Top 10 Html/CSS Web Templates Of March 2010 For Free Download

揭穿“史上最强反谷歌网站”戏法

昨天在diglog上看到有文章介绍“史上最强 真正的反谷歌网站!!!”。初看十分惊讶,以为全用图片完成的,再看不是图片,是文字,甚至连地图结果都能翻过来,推测非人力之所为。
今天想起来,发现在FF里这个网站不“反”了,想到CSS的兼容性,看了一下这个网站的HTML代码,再查了CSS手册,戏法揭穿。

我也如法炮制,做了一个“反谷歌”和“反百度”页面,大家来欣赏吧。

CSS:
filter :progid:DXImageTransform.Microsoft.BasicImage (mirror=bMirror)
属性:
mirror :可选项。布尔值(Boolean)。设置或检索是否反转显示对象内容。0 | 1
1 : 反转显示对象内容。
0 : 默认值。正常显示对象内容。

兼容性:IE5.5+(firefox不支持)

在蓝色链接中显示红色的下划线

在蓝色带链接的文字里为了突出某个词,需要使用红色显示,同时要求这个词的下划线也是红色的。

以前的实现方法:

<!–body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#FB4402; text-decoration:underline} –>
<a href=”#”>看今年<span style=”color: red;”>高考作文题</span>之偏,叹当今莘莘学子之苦</a>

现在流行样式和内容分离嘛,要抛弃font标签。所以重新写了一下:

<!– body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#0000FF; text-decoration:underline} .key{color:#fb4402;} –><a href=”#”>看今年<span>高考作文题</span>之偏,叹当今莘莘学子之苦</a>

这样出来后,红字的下划线是蓝色的…

一时之间没有想出原因,去CSSER求助,得到BC的指点。

underline的颜色是跟color一样的,keywod的下划线继承了上一级color的颜色。

现在给keyword增加下划线的定义,keykord的下划线就跟随自身color的颜色。

<code><!– body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#0000FF; text-decoration:underline} .key{color:#fb4402;text-decoration:underline} –>
<a href=”#”>看今年<span>高考</span>作文题之偏,叹当今莘莘学子之苦</a> </code>

定义标题的最好方法

定义标题的最好方法
作者:阿宏 2005-4-15 20:45:18

  • 原文:What is the Best Way to Mark up the Title of a Document?
  • 说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号:ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
  • 原作者:Dan Cederholm
  • 翻译:阿宏

一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

方法一: 有意义吗?


<span class=”heading”>文章标题</span>

虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个CSS规则,分配其一个heading class,使其文字象标题一样显示。

.heading {

font-size: 24px;

font-weight: bold;

color: blue;

}

ok,现在所有的标题都用heading class标记成了大号的粗体字体,并且为蓝色。太棒了!但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会怎样呢?

举个例子,如果我们设置的这个外部样式表的规则不被老版本的浏览器支持,会怎样?又或者有视觉障碍的人用屏幕阅读器来阅读这个页面,又会怎样?一个访问者通过这些途径所看到(或听到)的应该和这个页面上正常的文本没有任何区别。

尽管class=”heading”为这个标签增加了一点意义,但<span>仍然只是一个普通的标签,可以被大多数浏览器的缺省样式所修改掉。

搜索引擎检索这个页面时会略过<span>标签,就好象它不存在一样,不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。

最后,由于<span>标签是一个内嵌元素,我们可能需要把它嵌套在一个额外的块级元素中,比如<p>标签或<div>标签,为的是使它能够形成单独的行,这会进一步被非必要的
代码弄乱你的标签。而这些额外增加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。

方法二:<p>和<b>组合

<p><b>文章标题</b></p>

使用一个段落标签,将会给我们带来块级的显示,<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时,我们面对的是同样无意义的结果。不象方法A,<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样,搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。

难以设计样式

用普通的<p>和<b>的组合,也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题,来使页面内容更清晰更具结构,但是用这个方法只能使其显示成粗体。

方法三:样式加实质

<h1>文章标题</h1>
恩,多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们,<Hn>就能为页面内容提供灵活的、可索引的、以及可样式化的结构。

这也是聪明的定义方法,你会发现它很简单。不再需要额外的标签,你可以说,这仅仅比另外两个方法节省了一点点的字节,可以忽略不计,但节省一点是一点。
<h1>一直到<h6>,代表了标题的六个级别,从最重要的(<h1>)到最次要的(<h6>)。
他们本身就是块级的,不需要增加其它元素来使其单独成行。简单,有效——就是好工具。
轻松定制样式
因为我们使用<h1>标签是唯一的,而<b>或<p>标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来样式化。

更重要的是,尽管完全不用样式,一个标题标签也能明显的表示出一个标题!可视化的浏览器把<h1>显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构,用适当的标题标签来传达意思。

屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白,碰到一个标题标签时该做的事情,正确的处理,比页面上的普通文本更重视的来对待。而使用<span>标签,那些不支持CSS的浏览器就不会特别的对待它。

讨厌的默认样式
以往,由于浏览器默认的缺省值非常的丑陋,设计者们也许会避免完全的使用标题标签。或者,因为缺省值的巨大尺寸而避免使用<h1>或<h2>,取而代之的是用更高数值的标题标签来实现更小的尺寸。

然而,需要重点强调的是,我们可以很简单的用CSS来改变这些标题标签——举个例子,一个<h1>并非一定是占满大半屏幕的巨大标版。在后面,我将证明用CSS来样式化标题标签是多么的简单,希望可以帮助你减轻巨大的恐惧。

对搜索引擎友好的

这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面,一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题,只需要你的
一点点努力,然而却让搜索引擎更容易的检索到你的页面,让人们最终能找到它们。
搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到<title>和<meta>,它们会顺着标题标签往页面下面查找。如果你不使用这些标签,那么包含在里面的关键词将不会被认为是有价值的,从而被忽略掉。

所以只要付出一点点的努力,你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错,不是吗?

关于标题的次序

在范例中,这个特别的标题是页面中最重要的,因为它是文档的标题。因此,我们使用最重要的标题标签,<h1>。顺应W3C的规范,一些人认为跳过数个标题级是个不好的使用。举个例子,想象我们在下面的页面:
<h1>文章标题</h1>
我们接下去的标题(如果不是用另一个<h1>重复的话)应该是<h2>,然后是<h3>,等等。你也许不应该在<h1>后面跳过一级,直接跟上<h3>。我倾向于同意以上的观点,顺着行文保持级别的连续性,来构造一个排版结构。这样的话,给一个已经存在的页面添加标题和样式就更容易了,你会减少因使用超出的数字而导致的错误。

前面提到的,设计者也许会用<h4>来标签一个页面上最重要的标题,仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住,先结构,后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

原文地址:http://www.w3cn.org/article/translate/2005/111.html

CSS相关链接

CSS相关链接
作者:网页设计师
本CSS 相关资源链接来自CSSVault.com

文章

CSS+JavaScript

演示

思想理论

兼容技巧

图象处理

布局

列表处理

导航

定位

指南

工具

教程

常用CSS缩写语法总结

作者:阿捷 2005-4-8 15:28:00
转自:网页设计师

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

颜色
16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下:

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;
可以缩写为一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句:list-style:square inside url(image.gif);