將PSD轉成一個靜態的html/css對一些朋友來說是一個很大的困擾。因此本教程通過對一個完整實例的詳細講解來教大家如何將psd轉成html/css，轉換後的html/css可兼容各種主流瀏覽器。
我們將設計頁面分成基本的5個部分，每一個部分都有自己的容器wrapper和內容。基本的流程是先編寫Html代碼，然後通過編寫CSS來還原psd設計稿。
點擊下載PSD文件
1.我們需要從PSD文件得到什麼？
如下圖，我們只需要從這個psd文件得到4個非常基本的東西。推薦內容(featured)的背景、底部背景、歡迎文字（Welcome）、推薦圖片的框（少女面部圖的白色透明邊框）。其餘的部分我們只需要通過CSS生成或者在html裏嵌入相應圖片。
下圖紅線圈起來的地方，就是我們需要從psd獲取的內容。本部分內容需要讀者具備一定的Photoshop的基礎知識和操作能力。
你可以藉助Photoshop的切片工具或者自己手動切片，並將其保存成相應的圖片格式。
2.設置站點
爲一個網站設置良好的開發環境是非常重要的，我已經創建了一個非常基本的文件夾結構來建立這個網站，下面是文件夾結構設置，也可稱之爲模板。
文件夾結構
下面這個文件夾結構是由html文件、CSS文件、js等文件組成，你可以根據自己的需要調整文件夾結構。
- 這是放置index首頁文件的地方
- 這是網站的頂級目錄
- 這是放置JS文件或者js框架jquery的地方
- 我們在這個教程用到的jquery插件Nivo-Slider（做推薦內容）也放在這個文件夾裏
- 這裏是存放css文件的地方，網頁所要用到的圖片放在另一個獨立的文件夾，圖片文件夾還包括兩個子文件夾:
- Images: 這是我們存放推薦內容部分的圖片以及網站展示的圖片的地方
- Template: 這是存放和網頁設計樣式相關圖片的地方，比如說底部背景圖
將index.html文件放置在根目錄，這個文件也是我們編寫html代碼的文件。
將jquery插件Nivo-Slider裏面的三個文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夾。
將兩個css文件，reset.css和global.css放到樣式文件夾。
這樣我們的文件夾結構設置就差不多完成了。
3.編寫HTML代碼
1）編寫首頁Html文件
將psd轉換成html/css的工作流程是先編寫出html文件，隨後再編寫css，並加入js動態效果。
下面我們會一步步講解html的編寫，先編寫出大概完整的框架，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Site Title -->
<title>PSD to HTML: A Photography Site</title>
<!-- Meta Data -->
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>2）編寫html文件的head部分
下面我們要開始爲剛纔的html文件添加細節。首先是head部分，在head部分我們要添加一些meta信息，這樣有利於搜索引擎讀取。
我們增加了keywords、authors、description、copyright等meta信息，並把語言編碼設置爲utf-8。代碼如下:
<meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
<meta name="description" content="Your company description.">
<meta name="author" content="TutToaster.com/authors/CodyRobertson">
<meta name="copyright" content="Copyright 2010 TutToaster.com">
<meta name="robots" content="follow, index">現在要開始在html載入一些必須js和css的文件，以便讓這些文件起作用，同時爲了考慮到瀏覽器的兼容性，還增加了一些相應的判斷條件。具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Site Title -->
<title>PSD to HTML: A Photography Site</title>
<!-- Meta Data -->
<meta charset="UTF-8" />
<meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
<meta name="description" content="Your company description.">
<meta name="author" content="TutToaster.com/authors/CodyRobertson">
<meta name="copyright" content="Copyright 2010 TutToaster.com">
<meta name="robots" content="follow, index">
<!-- Site Theme Styling -->
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/global.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="javascript/HTML5-Shiv.js"></script>
<![endif] -->
</head>
<body>
<!-- jQuery and Nivo Slider -->
<script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script>
</body>
</html>3）編寫html的body部分
body部分是html文件的主要部分，網頁上顯示主要是body部分的內容，我們會將這個網頁的佈局分成以下5個部分：header、featured、status、content、footer。我們爲每個部分增加一個div並在每個部分的內部加一個類名爲container的div。
<div id="header">
<div class="container">
</div>
</div>
<div id="featured">
<div class="container">
</div>
</div>
<div id="status">
<div class="container">
</div>
</div>
<div id="cotent">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>04）編寫#header部分
這個網頁的header部分主要由兩部分組成，一個是logo，另一個是導航欄。logo是簡單div，而導航欄則是列表ul。
</pre><pre name="code" class="html"><!-- Logo -->
<h1 id="logo">YourLogo</h1>
<!-- Navigation Menu -->
<ul id="menu">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PHOTOGRAPHY</a></li>
<li><a href="#">COMMERCIALS</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">EXPOSURE VIDEOS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>05）編寫#featured部分
網頁的#featured是我們放置推薦內容的部分，這部分也有兩部分組成，一個是歡迎文字（welcome），另一個滑動圖片Slider。
Welcome區域
welcome區域是一個id爲welcome的div，由標題文字和描述文字組成，標題文字h2的顯示用圖片來代替。描述的文字用p標籤包起來。
<div id="welcome">
<h2>Welcome</h2>
<p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
<p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
</div>Slider區域
slider區域由一個透明邊框和幾張滑動圖片組成。滑動圖片放在class爲slides的列表裏邊。
<div id="slider">
<div id="frame"> </div>
<ul class="slides">
<li><img src="style/images/slider-placeholder.png" /></li>
<li><img src="style/images/slider-placeholder2.png" /></li>
<li><img src="style/images/slider-placeholder.png" /></li>
<li><img src="style/images/slider-placeholder2.png" /></li>
</ul>
</div>完整的#featured部分的代碼
下面是完整的#featured部分的代碼，讀者可以參照對比查看。
<div id="featured">
<div class="container">
<!-- Welcome Text/Site Welcome -->
<div id="welcome">
<h2>Welcome</h2>
<p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
<p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
</div>
<!-- Nivo-Slider -->
<div id="slider">
<div id="frame"> </div>
<ul class="slides">
<li><img src="style/images/slider-placeholder.png" /></li>
<li><img src="style/images/slider-placeholder2.png" /></li>
<li><img src="style/images/slider-placeholder.png" /></li>
<li><img src="style/images/slider-placeholder2.png" /></li>
</ul>
</div>
</div>
</div>6）編寫#status部分
這部分非常簡單，由一段文字和一個按鈕組成。
<div id="status">
<div class="container">
<span>I am currently accepting new projects/appointmentsat this time.</span>
<button>Hire Me</button>
</div>
</div>7）編寫#content部分
在psd文件中，你可以看到#content部分的內容會比較多一點，所以我將它按上下分成兩個部分。
第一部分
在psd文件中，你可以看到，第一部分由兩塊區域組成，這兩塊區域各佔據了50%的寬度，一個區域是About Us，另一個區域是What others think，兩個區域都有一個標題和一些文字描述。
<div id="about_us">
<h3>A little about us...</h3>
<p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p>
</div>
<div id="others_say">
<h3>What others think...</h3>
<p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.
<br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite>
</p>
</div>第二部分
第二部分是由四個各佔據25%寬度的小區域組成，這些小區域是由一些預覽圖、標題和文字組成。
<ul id="services">
<!-- Photography -->
<li>
<img src="style/images/service_preview_1.gif" alt="placeholder" />
<h4>Photography</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Commercials -->
<li>
<img src="style/images/service_preview_2.gif" alt="placeholder" />
<h4>Commercials</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Sports -->
<li>
<img src="style/images/service_preview_3.gif" alt="plceholder" />
<h4>Sports</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Exposure Videos -->
<li>
<img src="style/images/service_preview_1.gif" alt="placeholder" />
<h4>Exposure Videos</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
</ul>8）編寫#footer部分
現在是#footer部分的編寫，包含一些聯繫信息和版權信息等。
<ul id="footer-widgets">
<li>
<h5>Contact Us</h5>
<ul>
<li>3352 Streetname rd.</li>
<li>Commerce Township, MI, 48382.</li>
<li> </li>
<li>Tell: (248)838-9823</li>
<li>Fax: (248)942-2342</li>
<li>Email: [email protected]</li>
</ul>
</li>
<li>
<h5>Services</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Commercials</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Exposure Videos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li>
<h5>About Johnny</h5>
<p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
</li>
<li>
<h5>About Amber</h5>
<p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
</li>
</ul>
<!-- Positioning Fix -->
<br class="clear" />
<br /><br />
<!-- Copyright -->
<div id="copyright">
<span>© Copywright 2010 TutToaster.com. All Rights Reserved.</span>
<a href="#">Back to top</a>
</div>Html最終顯示結果
下圖是我們編寫好的html文件的最終顯示結果，下面還有一份完整的html的代碼，方便讀者閱讀對比。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Site Title -->
<title>PSD to HTML: A Photography Site</title>
<!-- Meta Data -->
<meta charset="UTF-8" />
<meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
<meta name="description" content="Your company description.">
<meta name="author" content="TutToaster.com/authors/CodyRobertson">
<meta name="copyright" content="Copyright 2010 TutToaster.com">
<meta name="robots" content="follow, index">
<!-- Site Theme Styling -->
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/global.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="javascript/HTML5-Shiv.js"></script>
<![endif] -->
</head>
<body>
<div id="header">
<div class="container">
<!-- Logo -->
<h1 id="logo">YourSite Title</h1>
<!-- Navigation Menu -->
<ul id="menu">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PHOTOGRAPHY</a></li>
<li><a href="#">COMMERCIALS</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">EXPOSURE VIDEOS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div id="featured">
<div class="container">
<!-- Welcome Text/Site Welcome -->
<div id="welcome">
<h2>Welcome</h2>
<p>Welcome to Johnny Waller Productions! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
<p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
</div>
<!-- Nivo-Slider -->
<div id="slider">
<div id="frame"> </div>
<ul class="slides">
<li><img src="style/images/slider-placeholder.png" /></li>
<li><img src="style/images/slider-placeholder2.png" /></li>
</ul>
</div>
</div>
</div>
<div id="content">
<!-- Working Status -->
<div id="status">
<div class="container">
<span id="avalibility">I am currently accepting new projects/appointmentsat this time.</span>
<button>Hire Me</button>
</div>
</div>
<div class="container" id="main">
<!-- About Us/What They Say -->
<div id="about_us">
<h3>A little about us...</h3>
<p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p>
</div>
<div id="others_say">
<h3>What others think...</h3>
<p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.
<br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite>
</p>
</div>
<!-- Clear Fix -->
<br class="clear" />
<!-- Services -->
<ul id="services">
<!-- Photography -->
<li>
<img src="style/images/service_preview_1.gif" alt="placeholder" />
<h4>Photography</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Commercials -->
<li>
<img src="style/images/service_preview_2.gif" alt="placeholder" />
<h4>Commercials</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Sports -->
<li>
<img src="style/images/service_preview_3.gif" alt="plceholder" />
<h4>Sports</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
<!-- Exposure Videos -->
<li>
<img src="style/images/service_preview_1.gif" alt="placeholder" />
<h4>Exposure Videos</h4>
<p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
</li>
</ul>
</div>
</div>
<div id="footer">
<div class="container">
<!-- Footer Widgets -->
<ul id="footer-widgets">
<li>
<h5>Contact Us</h5>
<ul>
<li>3352 Streetname rd.</li>
<li>Commerce Township, MI, 48382.</li>
<li> </li>
<li>Tell: (248)838-9823</li>
<li>Fax: (248)942-2342</li>
<li>Email: [email protected]</li>
</ul>
</li>
<li>
<h5>Services</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Commercials</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Exposure Videos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li>
<h5>About Johnny</h5>
<p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
</li>
<li>
<h5>About Amber</h5>
<p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
</li>
</ul>
<!-- Positioning Fix -->
<br class="clear" />
<br /><br />
<!-- Copyright -->
<div id="copyright">
<span>© Copywright 2010 TutToaster.com. All Rights Reserved.</span>
<a href="#">Back to top</a>
</div>
</div>
</div>
<!-- jQuery and Nivo Slider -->
<script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script>
</body>
</html>4.爲HTML編寫CSS樣式
我們將css文件分成兩個，一個是css重置文件，css reset可以讓html元素在各個瀏覽器上有相同的顯示效果，有關於css的重置（css reset）讀者可以去查閱相關的資料，這裏的CSS reset文件的代碼主要來自於雅虎的YUI reset。另一個文件css文件是這個網頁的樣式。
1）Reset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}2）基本的樣式
首先我們要爲網頁做一些基本的css樣式，包括文字字體、基本結構等。下面開始設置背景色、字體、去掉超鏈接的下劃線以及一些容器的尺寸。
body {
background: #F2F2F2;
font: 10px Verdana;
}
a {
text-decoration: none;
}
p, span {
line-height: 20px;
}
#header, #featured, #content, #footer {
overflow: hidden;
}
.container {
margin: 0 auto;
width: 1024px;
}
.clear {
clear: both;
}現在的css樣式效果如下：
3）編寫#header的樣式
現在開始爲header部分編寫樣式，將header部分的高設爲68px，背景爲灰色，2px的下邊框。
通過將logo文字的text-indent設爲-9999px，可以讓圖像來代替文字的顯示。然後我們爲導航欄設置左浮動（float：left），讓它變成橫向導航。通過增加一個.active來編寫導航欄當前頁的樣式。
#header {
background: #171717;
border-bottom: 2px solid #252525;
height: 68px;
}
#header #logo {
float: left;
text-indent: -9999px;
}
#header ul {
float: right;
height: 68px;
padding: 17px 0;
}
#header ul li {
color: #D1D1D1;
display: block;
float: left;
font: bold 10px Verdana;
padding: 10px 15px;
}
#header ul li a {
color: #D1D1D1;
text-decoration: none;
}
#header ul li a:hover {
color: #FFF;
}
#header ul li:hover a {
color: #FFF;
}
#header ul li.active {
background: #252525;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
#header ul li.active a {
color: #FFF;
}
#header ul li:last-child {
padding: 10px 0 10px 15px;
}現在的css樣式效果如下：
4）編寫#featured部分樣式
我們爲featured部分添加相應的背景，這個背景設爲水平居中，這樣即使圖片比一些屏幕分辨率大，也能居中顯示。然後我們要將welcome部分的文字設爲不可見，這樣我們就可以用圖像來代替它。
同時爲welcome下的文字加一些css3的屬性，文字陰影。
#featured {
background: #476D13 url('layout/header.png') no-repeat center top;
height: 290px;
}
#featured #welcome {
float: left;
width: 440px;
}
#featured #welcome h2 {
background: url('layout/welcome.png') no-repeat left top;
line-height: 57px;
padding: 0 0 20px;
text-indent: -9999px;
}
#featured #welcome p {
color: #FFF;
font: 10px Verdana;
line-height: 20px;
margin: 15px 0;
text-shadow: 0px 1px 0px #3F6211;
-webkit-text-shadow: 0px 1px 0px #3F6211;
-moz-text-shadow: 0px 1px 0px #3F6211;
-o-text-shadow: 0px 1px 0px #3F6211;
}5）編寫#slider的樣式
slider部分樣式編寫也比較簡單，我們將slider的overflow設爲hidden，這樣超出slider區域部分的內容就不會顯示出來。邊框的部分用絕對定位的方式（position：absolute），將透明的邊框覆蓋在slider的圖片上。
#featured #slider {
float: right;
position: relative;
width: 512px;
overflow: hidden;
}
#slider #frame {
background: transparent url('layout/frame.png') no-repeat center top;
height:300px;
position: absolute;
top: 0;
left: 0;
width: 512px;
z-index: 100;
}現在的css樣式效果如下圖：
6）編寫#status樣式
這個部分只是一段文字和一個按鈕，因爲#featured部分有一個40px的margin，所以我們要爲#status加一個-40px的margin來抵消它。
按鈕的製作是用了一些css的屬性，這樣一些不支持css3的瀏覽器將會顯示不同的效果，如果需要所有瀏覽器顯示相同效果，可以考慮用圖片。具體代碼如下:
#status {
background: #F1EEEE;
border-bottom: 1px solid #DCDEDE;
margin: -40px 0 0;
padding: 20px 0;
}
#status span {
color: #CCC9C9;
font: bold 20px Verdana;
line-height: 50px;
}
#status button {
background-color: #E9E5E5;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#E9E5E5));
background: -moz-linear-gradient(top, #FFF 0%, #E9E5E5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5')"; /* IE8 */
border: 1px solid #D9D9D9;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
color: #333;
float: right;
font: bold 20px Verdana;
height: 50px;
line-height: 30px;
width: 175px;
}
#status button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E9E5E5), to(#FFF));
background: -moz-linear-gradient(top, #E9E5E5 0%, #FFF 100%);
}現在css樣式效果如下：
7）編寫#content第一部分的樣式
#content的第一部分由兩個各佔據50%寬度的div組成，標題部分文字大小我們設爲20px並且設爲粗體、斜體，讓它更爲突出：
#content #about_us, #content #others_say {
float: left;
padding: 20px 0 30px;
width: 50%;
}
#content #about_us h3, #content #others_say h3 {
color: #474747;
font: bold italic 20px Verdana;
line-height: 40px;
}
#content #others_say p cite {
font: bold italic 10px Verdana;
padding: 0 0 0 60px;
}
#content #others_say p cite a {
color: #000;
}8）編寫#content第二部分的樣式
第二部分的四塊區域每個大概佔據23%左右的寬度，這樣我們就能爲各區域之間增加一些margin，同時由於我們爲圖片加了1px的邊框，所以寬度要計算好。同時最後一塊區域的右邊距要設爲0。
#content ul li {
float: left;
margin: 0 28px 0 0;
width: 235px;
}
#content ul li img {
background: #F1EEEE;
border: 1px solid #DCDEDE;
padding: 5px;
}
#content ul li h4 {
color: #474747;
font: bold 14px Verdana;
line-height: 30px;
}
#content ul li:last-child {
margin: 0;
}現在的css樣式效果如下：
9）編寫#footer的樣式
footer部分只是一些簡單的css屬性，比如背景、填充（padding）、顏色等。
#footer {
background: #171717 url('layout/footer.png') no-repeat center top;
height: 250px;
}
#footer ul {
padding: 40px 0 0;
}
#footer ul li {
float: left;
margin: 0 28px 0 0;
width: 235px;
}
#footer ul li h5 {
color: #CCCDD2;
font: bold 14px Verdana;
padding: 0 0 10px;
}
#footer ul li p {
color: #7E7E7E;
font: bold 11px Verdana;
line-height: 20px;
}
#footer ul li ul {
margin: 0;
padding: 0;
}
#footer ul li ul li {
color: #7E7E7E;
font: bold 11px Verdana;
line-height: 20px;
}
#footer ul li ul li a {
color: #7E7E7E;
}
#footer ul li ul li a:hover {
color: #9E9E9E;
}
#footer ul li:last-child {
margin: 0;
}
#footer #copyright {
border-top: 1px solid #424242;
font-size: 11px;
width: 100%;
}
#footer #copyright span {
color: #424242;
float: left;
line-height: 30px;
}
#footer #copyright a {
color: #63961A;
float: right;
line-height: 30px;
}現在的css樣式效果如下圖。基本的CSS樣式已經編寫完成，這是css樣式的最終效果。
5.爲HTML的js動態效果添加樣式
現在我們要開始爲滑動圖片slider部分增加一些樣式。圖片的滑動我們用到了nivo-slider這個插件，這個插件自身帶有默認的css樣式，我們只需要把它默認的css樣式添加到我們的css樣式文件即可。如果有興趣的話，也可以自己更改裏面的css樣式。
nivo-slider默認的css樣式如下，我們把它複製到我們的css文件的最後面。
/*
* jQuery Nivo Slider v2.1
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}插入Java Script語句來調用插件
我們需要在html裏面加入一段js語句來調用這個插件，記住這個語句要放在導入Nivo-slider.min.js之後。至於具體的一些選項，讀者可以到這個插件的官網查詢相應的文檔。
</pre><pre name="code" class="javascript"><script type="text/javascript">
$(window).load(function() {
// Slider
$('#slider .slides').nivoSlider({
effect: 'random',
directionNav: false,
controlNav: false
});
});
</script>總結
經過漫長的操作，終於完成了將psd轉成html/css的過程，現在讀者應該對這個工作的流程有一個系統的瞭解，轉換psd到html/css的工作包括psd圖片的切片、html和css文件的編寫、js插件的使用等。現在你可以開始嘗試做一個網頁，相信很快就會懂得如何轉換psd到html/css。
原文鏈接：How to Convert a Slick PSD Design to XHTML/CSS