从网上下载了一张psd的网页设计稿，初学html+css，所以记录一下我的学习过程。原图是这个样子：
原图 布局图
一、整体思路
拿到一张psd图片以后，先不要着急做，一定要先整体观察它的布局，确定基本框架。不管css，先在草稿纸上画出布局图，然后写出没有css的html。新建一个webpage2的文件夹，在里面新建images文件夹，用来保存第二步切图的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header> </header>
<div class="center_content"> </div>
<footer> </footer>
</body>
</html>
二、切图
把psd中的图片图标什么的，切出来，使用工具Photoshop cc，不知道为什么这个psd在fireworks里面打开就出现了错位，所以就用photoshop了。切图注意事项如下：
1.图片的框选：因为是手工切图，所以要把图片放的大一些，才可以更为准确的测量图片的大小。这里也可以用fireworks辅助。
2.圆角矩形：使用css3ps辅助，可以在一定程度上输出css的格式，如照片的背景框就是一个圆角矩形，图1.
但是有的是不行的，如：红色more，这时候我是大致用选取框测量的。如图2.
图一 图二
3.图片的存储：在Photoshop里，选取了图片以后，Ctrl + c，Ctrl+N，Ctrl+V，就可以存储为web所用格式，记得在右侧调整图片的格式png8，png24，gif，jpeg等。保 存在images文件夹下。
三、细化布局：
在头部，身体，和尾部三部分中又分别有各自的布局。下面，我们来一一分析：
1.header
header部分有三部分：logo，nav和一张宽为1920的img。logo部分文字和图片，我们把图片设置为背景（只是其中一种方法，有空会写一下文字和图片对齐的几种方 式）。nav部分是a标签。代码如下：
<header>
<div class="center_content">
<!-- logo和nav -->
<div class="header_1">
<!-- <img src="data:images/logo.png"> -->
<span class="f1">羲缘康非药物调养中心</span>
<hr color="#57411a" width="250px" height="1px" />
<span class="f2">XI YUAN KANG NON DRUG THERAPY CENTER</span>
</div>
<nav>
<a href="" id="nav1">网 站 首 页</a>
<a href="">企 业 简 介</a>
<a href="">惜 缘 开 讲</a>
<a href="">调 养 生 命</a>
<a href="">预 约 健 康</a>
<a href="">招 贤 纳 士</a>
<a href="">羲 缘 厨 房</a>
<a href="">调 养 产 品</a>
<a href="">禅 乐 静 修</a>
<a href="">联 系 我 们</a>
</nav>
</div>
<img src="./images/pic_2.png">
</header>
2.center_content部分分为左右两部分：left_main，right_main。并且在每一部分中又可以细化若干小的div。每部分都有注释哦
<!-- 中间 -->
<div class="center_content">
<!-- 左侧的主体 -->
<div class="left_main">
<!-- 图片轮播的地方 -->
<div class="focus_pic">
<img src="data:images/focuspic.png">
<span class="focus_pic1">“顺天而食，顺时而食”的养生观念</span>
</div>
<!-- 企业简介div -->
<div class="content">
<div class="t1">
<span class="t1_1">企业简介</span>
<div class="t1_2">more</div>
</div>
<div class="boo">
<div class="boom">
<img src="data:images/boom.png">
</div>
<span class="boom_1"> 国际中医现代非药物疗法协会(以下简称协会，是经香港特别行政区注册(第622章)，并在国家中医药管理局的业务指导和监督管理下，具有独立法人资格的社会组织... <span class="detail">[详细]</span></span>
</div>
<div class="nav2">
<a href="">企业文化</a>
<code>/</code>
<a href=""> 企业资质</a>
<code>/</code>
<a href=""> 合作伙伴</a>
<code>/</code>
<a href=""> 健康理念</a>
</div>
</div>
<!-- 调养产品 -->
<div class="ty_pro">
<div class="ty_head">
<span class="t3_1">调养产品</span>
<span class="t3_2">更多></span>
</div>
<div class="ty_examples">
<div class="ty_example">
<img src="data:images/驱寒.png">
<br/>
<a href="">祛寒</a>
</div>
<div class="ty_example">
<img src="data:images/排湿.png">
<br/>
<a href="">排湿</a>
</div>
<div class="ty_example">
<img src="data:images/拨筋.png">
<br/>
<a href="">拨筋</a>
</div>
<div class="ty_example">
<img src="data:images/艾灸补阳.png">
<br/>
<a href="">艾灸补阳</a>
</div>
<div class="ty_example">
<img src="data:images/食疗.png">
<br/>
<a href="">食疗</a>
</div>
</div>
</div>
</div>
<!-- 右侧主体：网站公告、电话等 -->
<div class="right_main">
<!-- 网站公告 -->
<div class="webad">
<div class="t2">
<span class="t2_1">网站公告</span>
<div class="t1_2">more</div>
</div>
<div class="announce">
<span class="date_gray">02/11/2015</span>
<a href="">常州市道德讲堂主持词（脚本）</a>
<span class="date_gray">02/11/2015</span>
<a href="">南大街调整优化交通方案</a>
<span class="date_gray">02/11/2015</span>
<a href="">新《交通旅游图》 地理风貌出行旅游</a>
<span class="date_gray">02/11/2015</span>
<a href="">**关于制定国民经济和社会发展第</a>
</div>
</div>
<!-- 调养预约 -->
<div class="ty_app">
<img src="data:images/ty_app.png">
<span class="ty_app1">调养预约</span>
<div class="circle">
<
</div>
</div>
<!-- 招贤纳士 -->
<div class="offer">
<img src="data:images/offer.png">
<span class="ty_app1">招贤纳士</span>
<div class="circle">
<
</div>
</div>
<!-- 电话 -->
<div class="tel">
<img src="data:images/tel.png">
<span class="tel_num">(+86) 519-85512976 <br/>400-0157-687
</span>
</div>
</div>
</div>
3.footer
footer部分只有两段文字
<!-- footer -->
<footer>
<div class="center_content">
<div class="footer1">2015 All Rights Reserved 版权所有·国际中医现代非药物疗法协会 <br/>苏ICP备08009317号-4</div>
<div class="footer2">常州市武进区湖塘镇永胜路118-40 <br/>（+86） 519-85512976 400-0157-687 13961180976@139.com</div>
</div>
</footer>
footer
四、对每部分进行css的设置。
1.整体的设置：主要是背景background，因为背景图片的大小为1920*1251，比较大，需要涉及到background-size:100% 100%的属性。
* {
margin:;
padding:;
}
body {
background: url(images/background.jpg) no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
又因为整个布局中所有的内容都在中间，所以我们把中间的css设置为max-width: 980px;水平居中
/*主题部分*/
.center_content {
margin: 0 auto;
max-width: 980px;
position: relative;
}
2.header
我遇到的难点是：（1）图片和多行文字水平居中对齐（2）导航中a标签的垂直文字排列以及靠右排列
解决方法：（1）把图片设置为背景，并且设置位置为左中，然后排列文字居中，然后用padding-left属性分开图片和文字。
（2）a标签内文字垂直方法：把a标签设置为block格式，然后设置block的宽度为width: 18px;因为字体是14px；略大于一个字体，小于两个文字宽度，所以 可以呈现单字竖直排列。定位方面一定要注意position和float两个的定位原理和文档流的变换。
header {
position: relative;
/*height: 580px;*/
width: 100%;
}
/**/
header img{
width: 100%;
height: 215px;
}
/*logo的定位*/
.header_1 {
height: 152px;
width: 370px;
position: relative;
padding-left: 95px;
margin-top: 36px;
display: inline-block;
font-family: FZCCHJW—GB1-0, serif;
line-height: 35px;
float: left;
background: url(images/logo.png) no-repeat left top;
}
.f1 {
font-size: 24px;
}
.f2 {
font-size: 14px;
}
/*导航*/
nav {
position: absolute;
right:;
}
/*网站首页的显示*/
nav #nav1 {
background-color: rgb(160, 39, 22);
color: #fff;
}
/*其他a标签的定位和属性设置*/
nav a {
margin-top: 26px;
display: block;
width: 18px;
text-decoration: none;
float: left;
margin-right: 20px;
color: #000;
font-size: 14px;
padding: 2px;
line-height: 20px;
}
/*hover属性的设置*/
nav a:hover {
color: #fff;
background-color: rgb(160, 39, 22);
}
3.center_content部分
左侧主要分为三部分，上面的两个div设置为float：left；下面一个div。就不多赘述了，方法差不多。比较简单。比较考验的就是耐心和一直测量各种数据。
.left_main {
float: left;
width: 740px;
height: 500px;
}
.left_main .focus_pic {
width: 330px;
height: 248px;
position: relative;
float: left;
/*background: url(images/focus_pic.png);*/
}
/*焦点图片文字位置的设置*/
.focus_pic1 {
position: absolute;
z-index:;
left:;
bottom:;
width: 100%;
color: #fff;
background: rgba(0, 0, 0, .7);
height: 30px;
line-height: 30px;
font-size: 12px;
overflow: hidden;
}
.content{
width: 330px;
height: 248px;
float: left;
margin-left: 40px;
position: relative;
/*float: left;*/
}
/*企业简介标题*/
.content .t1{
border-bottom: dotted #ccc;
height: 36px;
}
.content .t1_1{
float: left;
margin-top: 11px;
font-weight:bold;
font-size: 14px;
}
/*更多more*/
.t1_2{
margin-top: 12px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: #fff;
float: right;
width: 53px;
height: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgb(185,15,16);
}
.boo{
height: 164px;
border-bottom: dotted #ccc;
}
/*企业简介图片的圆角框*/
.boom {
width: 106px;
height: 106px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #fff;
float: left;
margin-top: 30px;
}
/*介绍内容*/
.boom_1{
display: block;
margin-top: 30px;
float: right;
font-size: 12px;
margin-left: 20px;
width: 200px;
line-height: 22px;
}
.boom_1 .detail{
color: red;
}
.nav2 a{
margin-top: 18px;
display: inline-block;
margin-right: 8px;
font-size: 12px;
color: red;
text-decoration: none;
}
/*调养产品div*/
.ty_pro{
width: 701px;
height: 218px;
float: left;
margin-top: 35px;
position: relative;
background-color: #fff;
}
/*调养产品的标题*/
.ty_head{
width: 641px;
height: 50px;
border-bottom: solid #ccc;
margin-left: 20px;
}
.ty_head .t3_1{
float: left;
margin-top: 18px;
font-weight: bold;
font-size: 14px;
}
.t3_2{
margin-top: 19px;
float: right;
font-size: 12px;
color: #999;
}
/*调养产品的照片浏览*/
.ty_examples{
width: 641px;
margin-left: 20px;
}
.ty_example{
margin-top: 24px;
float: left;
margin-left: 10px;
text-align: center;
}
.ty_examples a{
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
}
右侧：
/*主体右侧*/
.right_main {
width: 240px;
float: left;
}
.webad{
width: 240px;
height: 248px;
float: left;
position: relative;
/*float: left;*/
}
/*网站公告的标题*/
.webad .t2{
border-bottom: dotted #ccc;
height: 36px;
}
.webad .t2_1{
float: left;
margin-top: 11px;
font-weight:bold;
font-size: 14px; }
/*更多more*/
.t1_2{
margin-top: 12px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: #fff;
float: right;
width: 53px;
height: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgb(185,15,16); }
/*网站公告*/
.announce{
margin-top: 20px;
}
/*日期*/
.announce span{
color: #aaa;
display: block;
font-size: 12px;
margin-bottom: 10px;
}
/*网站公告链接*/
.announce a{
text-decoration: none;
color: #000;
display: block;
font-size: 12px;
margin-bottom: 10px;
}
/*调养预约*/
.ty_app{
width: 240px;
height: 52px;
float: left;
margin-top: 35px;
background-color: #bdb098;
}
/*调养预约字体*/
.ty_app1{
font-size: 18px;
line-height: 52px;
font-weight: bold;
}
/*调养预约图标*/
.ty_app img{
float: left;
margin-left: 20px;
margin-top: 15px;
}
/*右侧小圆圈*/
.circle{
width: 20px;
height: 20px;
background-color: #533B27;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: right;
margin-right: 13px;
color: #fff;
margin-top: 16px;
text-align: center; }
/*招贤纳士div*/
.offer{
width: 240px;
height: 52px;
vertical-align:middle;
float: left;
margin-top: 10px;
background-color: #bdb098;
}
/*招贤纳士图标*/
.offer img{
float: left;
margin-left: 20px;
margin-top: 15px;
}
/*电话div*/
.tel{
width: 240px;
height: 52px;
float: left;
margin-top: 10px; }
/*电话号码*/
.tel_num{
color: #000;
margin-top: 15px;
font-size: 14px;
line-height: 24px;
font-weight: bold;
display: block;
float: left;
margin-left: 15px;
}
/*电话图标定位*/
.tel img{
float: left;
/*margin-left: 20px;*/
margin-top: 15px;
}
4.footer
footer {
float: left;
margin-top: 50px;
color: white;
width: 100%;
height: 120px;
background-color: rgba(0, 0, 0, .8);
}
/*左边文字区域*/
.footer1{
float: left;
width: 424px;
height: 40px;
margin-top: 40px;
font-size: 12px;
font-weight: bold;
line-height: 20px;
}
/*右边文字区域*/
.footer2{
float: right;
width: 424px;
height: 40px;
margin-top: 40px;
font-size: 12px;
font-weight: bold;
line-height: 20px;
}
五、素材文件打包，大家一起交流学习。(*^__^*) 第一次做的网页，技术一般~
http://yun.baidu.com/share/link?shareid=1682921571&uk=3811305747