CSS引用方式
（1）使用Embed（嵌入样式单）排版样式：
即将CSS代码直接插入每个页面的HTML的<head>区。使用<style>…</style>标签。例如：
<style type="text/css">
<!–
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
–>
</style>
（2）使用“link（外部样式单）排版样式”
即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件（一个扩展名是css的文本文件）将设定你所有网页的规则。如果你改变样式单文件中的某行，所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多，则这项功能就非常方便了。
Read more…
对我而言，这些都是布局参照及素材提供站点。只是功能性的内容没办法Copy…不过那正是鄙人的努力方向。期待我更好的扒窃作品及早问世。
Read more…
ICON在网站上被越来越多的使用，人们总想让自己的网站变的有趣美观，所以为了迎合这些设计者的需求，专门提供ICON下载的网站也越来越多，本文要为你介绍的就是这些精心挑选的免费下载高质量的ICON网站，你只需要猛击下面的网站缩略图去寻找适合你口味的图标就可以了。
Read more…
February 28th, 2010
Bruce
十个常用的CSS技巧
CSS在书写代码的时候有很多技巧，掌握这些技巧不仅可以使代码看起来更整洁，还能对CSS起到压缩优化的作用。下面列举10个比较常用的技巧，如果你是CSS初学者，这些对你是相当有用的。
1.CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
Read more…
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中，
IE 不行，IE需要设定body居中，
首先在父级元素定义text-algin: center;
这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位,
若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了
解决方法是
改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
<!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
</style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状，
hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,
而在IE中只有margin默认有值,
所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
Read more…
前面提到过通过纯css实现圆角矩形，但是代码过分赘余。而且一但页面元素稍有变动，在同一页面重复使用时，代码就更是赘余的一塌糊涂！css3更是不知猴年马月才普及……所以在这里能否寻找到代码相对较为精简的方法呢？考虑了一下，参考相关资料，我尝试这样来操作：
首先，通过FW画一个圆圈，圆角矩形的四个角就是四分之一个圆。通过半径的大小来控制弧度！假设我们画了一个半径为4px的圆作为素材命名为corner.gif 相应的html代码可以这样来写：无论是html代码还是css代码都减少了大概三分之一！
Read more…
本文旨在向你说明CSS Sprites的含义以及它的应用方法！
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。
按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。
当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。
加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。
Let’s start with the basics. What are CSS sprites?
Read more…
初学DIV+CSS应该理解HTML标签的语义。
如今Web标准都被通俗的叫做“div+css”或者“层布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区：即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到）。
HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由<p>进行分段而不是<br />，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。
为什么要这样做？一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
我下面详细的列举一下我对一些标签的语义的理解：
Read more…
