思维 » css

用Photoshop设计一个小型、现代的产品主页并由psd转换成XHTML/CSS模板

笑谈 — Fri, 11 Dec 2009 01:17:41 +0000

这个Photoshop web设计的教程中，我们将学习设计一个整洁的具有现代气息的web站点。这是设计和HTML/CSS模板转换系列教程的第一部分。

第一部分: 用Photoshop设计一个小型、现代的产品主页

预览

以下是我们将要一些设计的页面预览，点击图片可以放大。

建立一个新的Photoshop文档

1 首先在Photoshop中新建一个文档（Ctrl+N），大小为1200 x 1200像素，背景设为透明。

设置头部背景

2 使用矩形选定工具在透明的背景上画出一个矩形，矩形大小：1200px ×120px

3 使用油漆桶工具（G）用任意颜色填充头部刚才选定区域。点开图层样式对话框，用以下设置来增加一个渐变叠加效果。

完了，应该出现以下效果：

创建内容部分的背景图层

4 现在我们将要创建图层内容区域的第二部分背景。把前景色设为#00315C，背景色设为#001B32。选择矩形框选定工具（M）选定剩下的透明图层；选定后，选择渐变工具（G）,然后设置渐变类型为径向渐变。

5 设定好渐变工具（G）后，从顶部的中间垂直的拖动到画布的4/1大小左右。

添加参考线

6 现在我们需要一些参考线保留出宽度为850px的中间内容部分。选择视图 > 新建参考线。在新建参考线对话框中输入175px，取向选择垂直。这样一个画布左边的参考线就做好了。

7 重复6的步骤，创建另外一条垂直参考线，不过这次输入1025px (175px + 850px = 1025px)。这样一个850px宽、居中的区域就做好了。

设计头部区域

8 选择横排文字工具（T），然后对其左边参考线边沿添加上页面标题和标语。

9 在标题文本图层下面创建一个新图层，选定矩形选框工具（M），在头部选取出一个区域。宽度必须填满1200px，高度大概在60px左右。

10 用白色（#FFFFFF）填充（G）选定区域，然后在图层面板中设置透明度为25%。效果如下。

创建导航

11 选择横排文字工具（T），字体大小设定为11-12px左右。然后在标题和标示右边加入导航文字；没菜单项之间留出等宽的边距。

12 在每个菜单项之间使用矩形选框工具（M）做一个1px宽的分割线；长度跨越整个头部。用#CECECE颜色填充（G）这1px的线条。效果如下图。

13 现在，我们在每个菜单项中加入鼠标悬停动态效果（hover）。我已经给其中一个菜单项加入颜色表示鼠标悬停时的效果。使用多边形套索工具（L）按住shift，创建一个三角形，以保证每条线都是直的。

14 用#00315C这个颜色填充选定的三角形区域

创建欢迎区域

15 选择横排文字工具（T）,加入一些欢迎标语；同样左边距紧贴左参考线，然后在上面的页面标题和下面的欢迎文本中留出一定的空间。文本下面加入4个蓝色的列表图标。这个图标是 Function Icon Set 里面的（文件名是circle_blue.png）。

16 在欢迎文本的右边将插入一个欢迎图片；我这里使用的是Six Revisions网站界面裁图。裁剪你的图片，去掉不需要的部分。图片准备好之后，通过编辑 > 变换 > 透视改变图片的视角。

17 选择椭圆选框工具，然后在欢迎图片下方画一个椭圆。

18 用黑色（#000000）填充（G）椭圆选定区域。

19 然后设置区域图层透明度为35%。

20 然后使用滤镜 > 模糊 > 高斯模糊这个椭圆，设定模糊半径为1到2px。

21 把欢迎图片和下面的阴影再复制一份，然后把它们拖动到原图片的下面。

22 位置拖动好之后，使用高斯模糊下面的裁图，半径为1px。

创建水平3D分割线

23 选择矩形选框工具（M）层叠的创建两个1px的线条；宽度为850px，从左参考线到右参考线。你可以将两个线条放在同一个图层。

24 分别使用颜色#000D19和#003461填充这两个线条。

25 选择椭圆选框工具（M）然后在分割线上面画出一个椭圆。

26 使用黑色（#000000）填充（G）选定区域，加上2到3px的高斯模糊。然后使用矩形选框工具删掉分割线上半部分，这样就剩下了半个椭圆。

27 将这两个图层合并（Ctrl+E），然后添加一个图层蒙版（点击图层面板上的“添加图层蒙版”按钮）来合并图层。

28 使用渐变工具（G）,渐变类型为对称渐变，前景色设为白色（#FFFFFF）,背景色设置黑色（#000000）。

29 拖动对称渐变，从分割线中间向两边拖动，从而产生中间向两边淡入效果。

设计内容区域

30 选择横排文字工具（T）在3D分割线下方，右分割线的左边加入任意的文字标题和段落。

31 使用圆角矩形工具（U）在内容文本区域的左边创建一个圆角矩形；半径设为10px（默认情况下背景是10px）。

32 路径画好之后，选择钢笔工具（P），右击矩形内部，选择建立选区。

33 设置前景色为#00315C，背景色为#001B32 ，然后选择渐变工具（G），渐变类型为径向渐变。

34 从顶部把渐变拖动到中间，和我们绘制背景方法相同。效果如下图。

35 现在需要给圆角矩形图层加入投影、内阴影和描边的图层样式（双击图层面板上面的图层，打开图层样式对话框）。设置如下。

36 使用多边形套索工具（L），然后在矩形上面做一个三角形的选区。

37 剪切并复制选区到一个新图层，一般这样做将会丢失掉选取的图层样式，所以在这之前我们必须给右下角图层重复添加一次样式。

38 通过编辑 > 变换 > 旋转给边角图层翻转180度；

39 加入一些任意文字以完成内容框的绘制。

创建页脚区域

40 选择圆角矩形工具（U）在也叫拖动出一个圆角矩形。

41 使用任意颜色来填充这个圆角矩形选区，选区加入如下样式的渐变叠加效果。

42 最后，加上页脚信息就大功告成了。

完成

第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板

点击下面的图片将会看到本次制作的 demo 的效果。

创建文件结构，准备文件

1 在桌面上创建新的空目录，取名portfolio。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的标签加入对styles.css的链接。可以使用如下代码：


href="styles.css" rel="stylesheet" type="text/css" />

页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。

HTML代码如下：



id="container">

	
	id="top">

	
	

	
	id="welcome">

	
	

	
	id="sidebar">

	
	

	
	id="content">

	
	

	
	id="footer">

模板背景切片

7 在我们把各个div转成代码之前，我们首先在页面中加入背景。用Photoshop打开PSD文件，用矩形选框工具（M）选定头部/导航和背景的一点区域；选定的宽度可以只有1px

（因为我们将会在后面使用css来水平重复它）。

8 在选定区域的底部，用滴管工具（I）记录下色彩的16进制值。

9 选定好之后，点编辑 > 合并拷贝，创建一个新Photoshop文件（Ctrl+N），然后将选定区域复制到新文档中。通常新建Photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他

们是一致的。

10 在新Photoshop文档中，点文件 > 另存为 web 和设备所用格式（Alt+Shift+Ctrl+S），选择PNG-8格式，保存文件为background.png，保存在images目录下。

将背景转成代码

11 现在我们已经将背景图片从Photoshop中切片出来，我们可以开始写代码了。打开CSS文件（styles.css），然后写入以下代码：


* {
	margin: 0px;
	padding: 0px;
	border: none;
}
body {
	background-image: url(images/background.png);
	background-repeat: repeat-x;
	background-color: #001b32;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #c8c8c8;
}
#container {
	margin: auto;
	width: 850px;
}

让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin，padding，border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。

接下来，我们样式化 body 元素；我们将 background.png 设置为背景，通过 repeat-x 使它水平重复。同样把背景色设置为深蓝（#001b32）。

最后，我们把#container的margin设置为 auto 让布局居中，并且设置宽度为850px。

Logo和站点名的切片

12 现在我们接着制作模板的logo和站点标题。使用矩形选框工具（M），选定站点的标题和标示文本（以下图为参考）。

13 就像处理 background.png 一样，复制这个区域到新文档，然后保存为title.png放在images目录。

和站点名转换成代码

14 我们转到HTML文档中，在#top这个div里面我们创建一个新div，ID为title。

15 在#title div里面，加入

元素来放置我们的站点名；同样需要创建一个超链接（）链接到站点主页。对于这个模板，我们仅把href属性的值设为#，如果需要在实际中使用这

个模板，你可以用反斜杠（/）来代替#。

HTML代码如下：



id="top">

	
	id="title">
		href="#" title="Your Website Name">Your Website Name

16 现在我们转向样式表。样式化#top区域元素。代码如下。


#top {
	float: left;
	width: 850px;
	height: 119px;
}
#title {
	float: left;
	width: 278px;
	height: 74px;
	padding-top: 45px;
}
#title h1 {
	display: block;
	float: left;
	width: 278px;
	height: 74px;
	text-indent: -9999px;
}
#title h1 a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(images/title.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边，然后给定一个固定的宽度和高度。

宽度应该和#container等宽，850px，高度应该和浅灰色区域等高，119px。

接下来，我们使用一种CSS背景图片替换的技术使用text-indent方法。我们将#title h1

里面的文字向左缩进-9999px，将文字推出了浏览器的可视区域。这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

导航转换成代码

17 在#top里面，#title下面我们创建一个ID为navigation的div。在#navigation里面增加一个无序列表，class值设为nav-links。以下

是#navigation的代码段。



id="navigation">
	
		href="#" title="home">home
		href="#" title="about">about
		href="#" title="portfolio">portfolio
		href="#" title="contact">contact

给无序列表设定一个nav-links的类主要目录是为了在链接CSS的时候不会影响到页面上的其他无序列表。需要注意的是，最后一个列表项加入borderx2的类，意为“边框乘2”；因为导航中的列表项都有一个分割线，我们需要给最后一样的左右都加上一个1px的边框（也就是边框乘2）。

悬停指示器切片

18 在给导航加入CSS样式之前，我们得首先把小小的悬停三角形切片。到Photoshop中使用矩形选框工具（M）选定这个三角形，复制透明背景的新文档，保存为images目录下的

nav_hover.png。

导航样式化

19 现在该是给导航加入CSS代码的时候了。使用以下代码。


.nav-links li a {
	float: left;
	width: 120px;
	height: 68px;
	text-decoration: none;
	text-transform: capitalize;
	color: #666666;
	font-size: 12px;
	text-align: center;
	padding-top: 51px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #cecece;
}
.nav-links li a:hover {
	color: #00284a;
	background-image: url(images/nav_hover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
li.borderx2 {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #cecece;
}

首先，为了让列表项挨个的显示，我们将它们向左浮动。然后给他们固定的宽度高度，使他们之前的空间均衡。然后通过给text-decoration值none来去掉超链接默认的下划线。

然后给每个列表项一个1px、灰色的左边框。

然后通过:hover伪类来样式化悬停效果。当鼠标悬停时，我们将列表项的背景设为nav_hover.png。

最后解决最后一个列表项右边没有分割线的问题，需要给.borderx2类声明一个border属性。

创建欢迎区域

欢迎区域会被分割成两个部分，左边(#welcome-text)和右边(#welcome-image)。

20 在index.html的#welcome div中加入两个新的div，一个ID为welcome-text，一个ID为welcome-image。我们会在切片完成后将两个div填充上内容。

欢迎图片的切片

21 转到PSD文件，关闭除了有渐变效果深蓝背景的其他所有图层（点击图层左边的眼睛图标）。

22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

23 将这个深蓝背景转成web图片content_background.png，放在images目录下。使用同样的方法，关闭除了欢迎图片图层的其他图层，切片蓝点和欢迎图片（见一下参考）。

新区域的HTML类似如下。



id="welcome">

	
	id="welcome-text">

	
	

	
	id="welcome-image">
		src="images/welcome_image.png" alt="Welcome..." />

24 在#welcome-text div中文名增加一些欢迎文字。使用

标签给欢迎文字增加标题，然后在以下添加无序列表。

25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。

合起来，HTML代码如下。



id="welcome">

	
	id="welcome-text">
		welcome to yourwebsite!
		Lorem ipsum dolor sit amet, consectetur[...]
		Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.
		
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
		
	
	
	
	
	id="welcome-image">
		src="images/welcome_image.png" alt="Welcome..." />

样式化欢迎区域

26 现在样式化欢迎区域。复制以下代码到CSS中，后面有对代码的解释。


#welcome {
	float: left;
	width: 850px;
	background-image: url(images/content_background.png);
	background-repeat: no-repeat;
	height: 326px;
	padding-top: 40px;
}
h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 16px;
	margin-bottom: 15px;
}
.heading-color2 {
	color: #9a9a9a;
}
#welcome-text {
	width: 406px;
	line-height: 18px;
	padding-top: 50px;
	float: left;
	text-align: justify;
}
#welcome-text {
	margin-bottom:10px;
}
.list li {
	text-decoration: none;
	background-image: url(images/bullet.png);
	background-repeat: no-repeat;
	list-style-type: none;
	float: left;
	width: 180px;
	padding-left: 20px;
	margin-top: 10px;
	background-position: left center;
}
#welcome-image {
	float: right;
	height: 326px;
	width: 427px;
}

让我们来详解一下上面的代码。首先，我们通过background属性（content_background.png）给#welcome加入渐变背景，并且是不重复的

（repeat: no-repeat）。让后给这个div一个固定的宽度高度；宽度为模板内容宽度（850px）,高度为欢迎图片的高度（236px）。

通过text-transform属性让

内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。

无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。

最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固

定的宽度高度值。

3D分割线切片

27 对于3D分割线，我打算通过加入类为separator的div，可以实现复用。使用矩形选框工具（M）选定区域宽度不能大于850px，高度不能超出3D分割线本身的大小。

28 用之前的方法将选区存为images目录下的separator.png。

3D分割线转换成代码

29 对于分割线的HTML和CSS相当简单。在index.html中#welcome下面插入div。将放入.separator的div中。

30 CSS文件中加入如下代码。


.separator {
	background-image: url(images/separator.png);
	background-repeat: no-repeat;
	float: left;
	height: 17px;
	width: 850px;
	margin-top: 20px;
	margin-bottom: 20px;
}

我们将.separator的background-image设定为separator.png。给定宽度850，然后向左浮动。height值等于separator.png的高度。然后给顶部和底部

margin设为20px，让它们彼此之间有一定的间歇。

侧边栏切片

31 对于侧边栏，我们仅需要侧边栏框。这个教程中侧边栏框大小是固定的，但是如果需要可以很容易的扩展（这部分叫给大家自己完成）。使用矩形选框工具（M）选定这个侧边栏框；我的

选定范围是259 x 259px.

32 存为images目录下的contentbox.png。

33 使用矩形选框工具，设定宽度为1px，高度为2px。选定文字之间的分割线部分。

32 和往常一样，存为images目录下的divider.png 。选定很小是因为下面将通过CSS将其水平重复。

编写侧边栏HTML代码

35 在.separator层下面，是我们的#sidebar，将

作为侧边栏标题。然后给无序列表加入类sidebar-list使样式可以自定义。



id="sidebar">
	lorem ipsum dolor
	
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...

通过CSS样式化侧边栏

36 CSS中加入如下代码


#sidebar {
	float: left;
	height: 209px;
	width: 219px;
	background-image: url(images/contentbox.png);
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}
h3 {
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	margin-bottom: 20px;
	font-size: 12px;
}
.sidebar-list li {
	list-style-type: none;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(images/divider.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，保证内容居左。同样设定background-image为contentbox.png。

通过text-transform将h3文字大小，通过text-align让文字居中。

最后通过list-style-type取值为none去掉.sidebar-list列表项的默认圆点，然后设定background-image为divider.png，水平重复

(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。

内容区域转换为代码

37 内容区域相对简单，因为只包含了一些段落和标题。在#content层中，加入二级标题(

)，然后通过span.heading-color2给第二部分的文字添加不同

的颜色。填充段落可以用lorem ipsum无意义文本。HTML代码如下。



id="content">
	welcome to yourwebsite!
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.

内容区域样式化

38 #content层加入以下代码。


#content {
	float: right;
	width: 550px;
	text-align: justify;
}
#content p {
	margin-bottom: 10px;
}

为了让#content在右边显示，我们将其向右浮动，然后给定一个固定的宽度。不给定一个固定的高度的原因是我们想通过内部文本来控制高度。然后给

加入顶部

和底部margin让它们之间留有空间（因为之前我们已经将它们都归零了，这步是必须的）。

页脚切片

39 就快要结束了，让我们继续！使用矩形选框工具，大小850px × 60px将也叫背景图片选定。

页脚转换成代码

40 页脚很好转换成代码：我们之需要之前创建的#footer。在#footer层中，我们使用

加入一些版权文字。代码如下：



id="footer">
	Copyright © Six Revisions - Design By Richard Carpenter

将页脚样式化

41 加入如下代码。


#footer {
	float: left;
	width: 850px;
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
	height: 60px;
	margin-top: 40px;
	padding-top: 25px;
	text-align: center;
}

我们将#footer层的background-image属性设置为footer.png；向左浮动；通过no-repeat保证背景图的不重复。#footer宽度高度大小和footer.png相

等。然后在顶部通过margin给出一定空间。

完成！

我们做完了！谢谢阅读本教程，我很期待大家的评论和问题！如果大家做的不错，最终效果应该像这样：

（点击图片查看在线demo）

CSS Sprites + 圆角

笑谈 — Tue, 02 Jun 2009 02:07:11 +0000

初步介绍

当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

看一下演示 | 下载 css sprites + 圆角

您还可以参考一下文章：

43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤

我们将怎样来处理?

我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:

是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?

通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.）这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!

第一步: 创建我们的 Sprite

为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
切割并且导出圆角到本地临时位置 (我们将会在之后用到).
新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。
合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.
导出合成图片，sprite 也就大功告成了。

第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox

类 :

class="roundedBox">

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。

class="roundedBox">
     My content in roundedBox Type 1
     class="corner topLeft">
     class="corner topRight">
     class="corner bottomLeft">
     class="corner bottomRight">

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。 哈?! – 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）

让我们先来定义下所有的圆角

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px.

.corner {
position:absolute;
       width:17px;
       height:17px;
}

如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。

现在开始定义 div 容器样式:

.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。

圆形盒模型 1 (蓝色)

HTML 代码

class="roundedBox" id="type1">
    My content in roundedBox Type 1
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。

CSS 代码

首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

好了，我们的第一个圆角矩形大功告成了！预览圆角矩形模型1 (蓝色).

圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。

模型 2 (绿色)

HTML 代码

class="roundedBox" id="type2">
    My content in roundedBox Type 2
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(../images/corners-type2.gif);}

预览圆角矩形模型2 (绿色).

模型 3 (紫色)

HTML 代码

class="roundedBox" id="type3">
    My content in roundedBox Type 3
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}

预览圆角矩形模型 3 (紫色). 都学会了吗？好，现在我们再进一步学习

模型 4 (红色边框)

模型4 跟模型1、2、3又有什么区别呢？边框和颜色，让我们来解决这些因素吧。

HTML 代码

class="roundedBox" id="type4">
    My content in roundedBox Type 4
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使 .roundedBox 类的背景及边框融合 sprite。)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p

模型 5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

修改上下边角的高度 (由渐变度决定(depending on your gradient))。
修改上下边角的背景图定位 (由渐变度决定)。
通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。
值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。

让我们开始吧。

HTML 代码 (跟之前的一样)

class="roundedBox" id="type5">
    My content in roundedBox Type 5
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:

我的div中的背景图片是这样的:

1px 的宽度，它的确是存在的。我的下边角有一条实心颜色，刚好可以匹配div的背景色。少说话多行动。我们来继续定义容器 div :

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}

最后，我纠正下下边角的背景图定位:

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! – 预览圆角矩形模型 5 (垂直渐变).

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。

摘自：http://www.yeeyan.com/articles/view/seasun/40032?tag_related

12个针对网页设计师的非常便利的CSS框架、模板和摘录网站

笑谈 — Tue, 02 Jun 2009 01:34:37 +0000

如果您经常性地需要建立和开发新的网站，那么您就应该考虑使用模板创建，收集有用的代码片段等等。为了加快开发的进程，您就应该这样做，在需要的适合您可以使用、修改并优化这些模板文件；如果是作为商业用途的您应该检查下许可条款。然而，到目前为止，这是从最榜的站点中挑选出来的最好的站点的普通清单。好好地使用它们吧！

除此之外，您也可以参考下这些文章：

八种布局方案改善你的设计
 IE不支持的10个非常有用的CSS属性
 CSS处理大背景图片
 五种方法让CSS实现垂直居中
 针对IE8正式版的CSS hack

1. CSSTidy

CSSTidy 一个开源的CSS解析器和优化器。它可以作为可执行文件 (Windows, Linux 和 Mac 中是有效的) 控制每个命令行和作为PHP脚本 (这两个功能几乎相同).
相反，大多数其它的CSS解析器都没有使用正则表达式，而CSSTidy则完全支持CSS2且具有更高的可靠性。”

贴上它们的信息，因为它们说的比我说的要强多了。

某些人可能会有个疑问 – 为什么您需要优化自己的CSS代码? 仅仅因为，如果您想要更清洁的代码，更快的载入速度，这样，你们俩 – 您跟访问者都将得以与此！

这里获取可执行文件 or use 在线优化!

2. Clean CSS

您也可以使用这个非常类似的在线优化版本，但我是个反复无常的人，所以我用这个网站要更多一些。这就要求挑选一个您喜欢的吧！

3. Blueprint CSS

“Blueprint 是一个 CSS框架, 其目的是减少你的CSS开发时间。在您项目的顶部预置它会给您的CSS打下坚实的基础。非常易于使用网格、合理的排版甚至是用样式进行打印。”

非常有用的模板文件，帮助您不是反复地从零开始编写代码 – 现在您可以花费更多的时间来天下新的特征和考虑如何设计，然后是反复的过程。

4. Code-Sucks

收藏了许多非常好的，如CSS布局、代码段 (CSS, JavaScript, PHP), 网站模板等。这使web的发展进程变得敏捷。良好的使用使用这些吧。

5. Snipplr

Snipplr是存储和组织很多代码片段的非常有用的地方 (Javascript, HTML, PHP, CSS, Ruby)。随着您的发展进程会经常使用。并且每个人都可以分享和添加它们的片段，当然，这部分中热门代码段无疑就是代表最佳的和经常被大家使用的。

6. MaxDesign

7. MeyerWeb CSS Reset

Eric Meyer CSS reset 非常受还有。您应该使用重置来消除浏览器之前默认风格的不同。同时，Eric也指出，这仅仅是个起点，但非常好用。

8. YUI Library

“每个YUI库中的组件都有300个一些列的例子来说明它的实施。这些例子可以作为您研究YUI的出发点，如，获取代码段作为您编程的开始，或者只是作为您开发各种互动模式灵感的源泉。”

非常有用的模板文件，出发点非常好，并且收藏了很好的例子以满足于几乎所有的网页设计师。

9. 960 Grid System

这个网格系统正在变得很受欢迎 – 他们提供常用尺寸, 基于 960 像素的宽度，提供 12 列跟 16 列网格系统。设计师们使用网格是为了使它们的网站看起来更为和谐和精准。当您下载了该网格系统，会得到几个模板文件跟mockups，它会是您的得力助手。

Download / Demo

10. Sensible Standards CSS Framework

这个框架也是基于 Eric Meyer reset 系统, 当然也有许多新的基础样式特征，没有任何双重重置和更多，到它的首页查看更多的细节吧。

11. CSS 圆角

我猜测，您肯定听到过不少关于圆角实现的争论和如何创建它，从这里您可以快速地在线获得圆角跟样式。

12. 内容与风格

良好的框架集有助于您迅速快捷开发新的网站，使您更加关心图形设计而不是代码的编写。

我希望这些参考网站有助于提升您的技能并加速您的发展进程！我相信除了这些网站之外还有许多，如果您知道一些，那么请您留下链接地址，感激不尽！

摘自：http://www.yeeyan.com/articles/view/seasun/44063

CSS网页布局ID和Class类的命名介绍

笑谈 — Wed, 27 May 2009 08:30:28 +0000

关于CSS网页布局id与class命名或许成为大家比较头疼的问题，在webjx.com中早已有相关的介绍，但还是不能满足大家对知识的渴求。

一、用class_name方式写类名。

以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。

二、样式都用class而不用id。

有三个理由。
1，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。
2，id的优先级太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。
3，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。

三、margin和padding，尽量省略最后一个值。

比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。

四、按标准写css，再针对特定浏览器作hack。

比如，通常我们会遇到如下的写法：
.side_col_webjx {
float:left;
display: inline;
margin-left: 20px;
}
而我的写法会是：
.side_col_webjx {
float: left;
margin-left: 20px;
}
* .side_col_webjx {
_display:inline; /*hacked for IE 6*/
}
看明白了么？不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:left与display:inline写在一起没事。嗯，它们俩确实没事儿，但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的，比如FF。这就要求你对css标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。
此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。可能过段时间我就不这么用了，呵呵。

五、记得加空格。

.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空格（如果你写This is a pen.That’s a pencil.句点后面不加空格， word里面会有错误提示）。所以既然css是外国人发明的，应该按他们的格式来写。类似的，在JS里var a = b + c;里面的空格也应该都要加。

六、适当的层叠（Cascading)或缩进以定义css的“作用域”。

啥叫“css的作用域”？其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：
.nav .search {}
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：
.login_box {}
.forgot_pwd{}
缩进，是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。