原文地址：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下的外观，否则它的尺寸会缩水很多。
现在，这张页面的浏览效果如下：
