原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC
本教程涉及素材打包下载：
1.9 – 设置一些简单的样式
真的是巨简单，如下：
/*
Block-Styles
*/
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
}
在.block样式中我们简单的定义了边框及下边界，然后在.block_inside中设置白色边框、填充及溢出属性，并横向平铺一张带有渐变效果的背景图像。因为在block_inside中我们有图片和文本两个浮动元素，所以设置了overflow:auto ，我一度很习惯的会再添加一个用于清除浮动的div ，但有人建议说即使不这么做也不会影响效果，而且去掉的话代码会简洁很多…所以我又采纳了。咦，为什么我要说”又”呢？
现在我们得到的浏览效果如下:
1.10 – 设置文本样式
文本的样式在网页中有着相当大的重要性，可能你觉得之前的效果截图看起来还可以，那是因为我使用的是火狐浏览器，它的默认字体是Sans-Serif，而IE中的默认字体是Serif，效果看起来就不怎么样了。所以现在我们要很明确的定义文本的样式，在样式表中添加如下CSS代码：
body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
/*
Text-Styles
*/
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
p {
margin: 0px 0px 15px 0px;
}
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}
所以（懒得再说”又”了）：
1.首先我在BODY标签中定义了文本的字体、颜色、大小以及行高；
2.接着为H2标签定义边界值，并设置Helvetica字体；
3.同时我们也定义了一个small作为子标题样式；
4.还包含了链接及其link:hover样式；
5.对p标签的边界margin进行了重新设定；
6.最后是按钮样式的设定，注意我这里使用的选择符是a.button，意思就是所有应用了类样式. Button的链接标签a。为什么我不直接使用.button呢？因为之后我们还要为input中的按钮设置样式，在选择符上下点功夫可以有效的避免混淆；
7.在.Button中我们设置了若干个属性，如填充、边框、背景图像、大小写转换以及行高…行高？是的，设置行高是为了修正按钮在IE下的外观，否则它的尺寸会缩水很多。
现在，这张页面的浏览效果如下：
