如何将PSD文件快速转换成HTML方法

本教程使用的页面实例如图所示：

二.拷贝基础模板1.拷贝基础HTML代码：

content="text/html; charset=utf-8" />

rel="stylesheet" />

2.拷贝基础CSS代码：

@charset "GBK";
body, div, h1, h2, h3, h4, h5, 
h6, p, blockquote, dl, 
dt, dd, ul, ol, li,
 fieldset, form, tr, 
 th, td, center,
 input, button, 
 textarea{
 padding:0;margin:0}
 /*基础设置ˉ*/
table { 
 border-collapse: collapse;
 border-spacing: 0;}
fieldset, img{border: 0;}
button,input,select,textarea
  { font-size:12px;}
input,img,select{ 
  vertical-align:middle;}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6
 { font-size: 100%; }
.left{ float:left;}
.right { float:right;}
.txthide{text-indent:-9999em;
   overflow:hidden; 
 line-height:0; font-size:0;}
.relative { position:relative;}
.absolute { position:absolute;}
/* float */
.clearfix:after{ content:""; 
 height:0; 
 visibility:hidden; 
 display:block; clear:both;}
.clearfix{ zoom:1;}
.clear { clear:both;}
/* a */
a {color:#7c7c7c; 
 text-decoration:none;}
a:hover {color:#7c7c7c; 
 text-decoration:underline;} 
body{font-size:12px; 
 font-family:"宋体";}
.wrapper{margin:0 auto ;
  width:1002px;}

3.目录结构

目录结构如下所示：

文件夹/
├── css/
│   ├── style.css
├── js/
└── images/
└── pic/
└── index.html

(1)文件夹的根目录中存放切割的HTML文件；

(2)css文件夹中存放页面切割中使用到的样式表文件；

(3)js文件夹中存放页面切割中使用到的js文件，JQ库等；

(4)images文件夹中存放页面切割中使用背景图片等；

(5)pic文件夹中存放页面切割中使用的广告图片，轮播图片等；

三.PSD分析页面整体分析：

查看PSD，可以看出页面背景色为白色，页面整体宽度为1400px,页面主体宽度为960px.

进一步分析页面结构，可以将页面分为以下几大部分，如图所示：

按照划分的5个区域，书写对应的HTML代码：

对应的CSS代码：

body{font-size: 12px; 
font-family: "宋体"; 
background-color：#FFF; }
.wrapper{margin:0 auto ; 
width: 960px;}
/*header*/
.header{height: 87px;}
/*flash*/
.flash{height: 340px;}
/*container*/
.container{margin-top: 25px;}
/*main*/
.main{float: right; 
width: 662px; overflow: hidden; }
/*sidebar*/
.sidebar{float: left; 
width: 270px; overflow: hidden;}
/*footer*/
.footer{}

四.header切割1.header结构分析

结构分析中可以看出，header有一个渐变的背景，并且header可以分为左边的logo,以及右边的nav两个大的模块

(1)logo部分必须为可点击的链接，所以用标签最合适,需要向左浮动,并且需要给标签增加title说明

(2)nav部分需要像有浮动

对应的HTML代码：

  

     title="福建终身教育女职工周末学习网">
    

  

CSS书写分析：

(1)header的背景可以运用图片横向循环来处理；

(2)logo图片可以直接使用图片背景，从PSD中截取logo图片，大小为302px*88px；

(3)nav的整体宽度为550px,并且向右浮动；

对应的CSS代码：

/*header*/
.header{
height: 88px; 
background: url(images/header_bg.jpg) 
repeat-x;
}
.header a.logo{
display: block;
 width: 302px; 
 height: 88px; 
 background: url(images/logo.jpg) 
 no-repeat; 
 float: left;
 }
 .nav{
 float: right; 
 width: 550px;
 }

2.nav结构分析

nav有5个导航地址组成，可以使用5个标签表示，并且标签有打开状体，可以添加on样式。

对应的HTML代码：

 首页
 课程推荐
 课程分类
 新闻公告
 关注女职工

CSS书写分析：

(1) 每个标签根据文字自适应宽度，文字大小为18px的微软雅黑，并且向左边浮动；

(2)标签有on样式，有on样式的标签，有一个小三角的图标背景；

(3) 小三角的背景，可以运用CSS Sprite整合到与logo同一张图片中。

对应的CSS代码：

.nav{
float: right; 
width: 550px; 
padding-top: 30px;
}
.nav a{
display: block; 
float: left; 
padding: 0 10px; 
height: 57px; 
line-height: 30px; 
margin-right: 10px; 
font-size: 18px; 
font-family: "MicroSoft YaHei"; color:#000; 
}
.nav a:hover, .nav a.on{
color: #cd5d00; 
background: url(images/sprite.gif) 
no-repeat center -87px; 
text-decoration: none;
}

五.flash切割

从PSD来看，flash模块只是一张全屏的广告图，所以只要把广告图保存下来，写入到页面中即可。/p>

对应的HTML代码：

CSS书写分析：

(1) flash模块的背景色为广告的背景色的延展，并且高度为图片的图片；

(2) 图片需要居中显示；

对应的CSS代码：

/*flash*/
.flash{
height: 340px; 
background-color: #FFCED4; 
height: 337px; 
overflow: hidden;  }
.flash img{
display:block; margin:0 auto;}

六.main切割1.main结构分析

由PSD可以看出main可以由上半部分的main_title和下半部分的main_con两部分组成。

对应的HTML代码：

    

女职工安全规范
    

2.main_title结构样式分析

由PSD可以看出main_title文字为大小为24px微软雅黑，底部边框高度为3px,颜色为#ff7a00。

对应的CSS代码：

.main_title{
font-size: 24px; 
font-family: "MicroSoft YaHei"; 
border-bottom: 3px solid #ff7a00; 
line-height: 35px;}

3.main_con结构样式分析

由PSD可以看出，main_con由上半部分的列表main_list和下半部分的分页main_page两个部分组成

对应的HTML代码：

4.main_list结构样式分析

由PSD可以看出，main_list由9个结构相同的小模块组成，所以考虑使用li列表来实现对应结构。并且li是向做浮动，自动排列的。

对应的HTML代码：

分析li，如果所示，li由带图片和文字标题的链接，以及底部的 次数两个部分构成。并且 的小图片需要使用CSS Sprite整合到sprite图片中。

对应的HTML代码：

    
    
    中级人像摄影技术
          2,598次

对应的CSS分析：

(1)main的宽度为660px,则每个li的宽度为220px,并且li中的小模块需要水平居中；

(2)a标签的宽度与图片的宽度一致，为200px,文字大小为14px,文字颜色为#333,并且a要水平居中；

(3)span宽度与a一样，并且有 的小图标做背景，文字颜色为#576408，并且span要水平居中;

对应的CSS代码：

.main_list{padding-top: 20px;}
.main_list li{
float: left; 
width: 220px; 
overflow: hidden; 
margin-bottom: 20px;}
.main_list li a,
 .main_list li span{
display: block; 
width: 200px; 
overflow: hidden; 
margin: 0 auto;}
.main_list li a{
color: #333; 
font-size: 14px; 
margin-bottom: 15px;}
.main_list li 
a:hover{
text-decoration: none;}
.main_list li a img{
margin-bottom: 10px;}
.main_list li span{
color: #576408; 
background: url(images/sprite.gif) 
no-repeat 10px -160px; 
width: 190px; 
height: 20px; 
line-height: 20px; 
padding-left: 30px; }

5.main_page结构样式分析

由PSD可以看出，main_page中的分页为几个a标签，并且当前页可以用span标签标识，分页码鼠标滑过的效果与当前页效果一致。

对应的HTML代码：

    首页
    <<
    1
    2
    3
    4
    5
    6
    ...
    尾页    

对应的CSS分析：

(1) 一整个main_page距离顶部和底部都一定距离；

(2) 默认a标签背景颜色为#f9f9f9,边框颜色为#f3d2a1,字体颜色为#434242；

(3) 当前页和鼠标滑过模块时，背景颜色为#f1a000，边框颜色为#f1a000；

对应的CSS代码：

.main_page{
margin:25px 0; 
padding-left: 170px; }
.main_page a, .main_page span{
display: block; 
float: left; height: 24px; 
padding:0 10px; 
background-color: #f9f9f9; 
border:1px solid #f3d2a1; 
color: #434242; 
text-align: center; 
line-height: 24px; 
margin-right:7px; font-size: 13px;  }
.main_page a:hover, .main_page span{
background-color: #f1a000; 
border:1px solid #f1a000; 
text-decoration: none;}

七.sidebar切割1.sidebar结构分析

由PSD分析可以看出，sidebar可以分为sidebar_title和sidebar_con两大部分组成。

对应的HTML代码：

2.sidebar_title结构样式分析

sidebar_title背景是一张不可循环的图片。

对应的HTML代码：

课程分类

对应的CSS代码：

.sidebar_title{
height: 60px; 
width: 270px; 
background: url(images/sprite.gif)
 no-repeat 0 -200px; 
 text-indent: -9999px;}

3.sidebar_con结构样式分析

由PSD可以看出，sidebar_con可以有4个li构成，并且li打开项背景图片为白色，有一个背景图片。

对应的HTML代码：

女职工操作手册


女职工操作手册

女职工操作手册
 

女职工操作手册
 

对应的CSS代码：

.sidebar_con{
background-color: #fbeeda; 
border-bottom: 1px solid #f3d2a1;}
.sidebar_con li{
height: 49px; 
line-height: 49px; 
padding-left: 25px; 
border-left: 1px solid #f3d2a1; 
border-right:1px solid #f3d2a1; }
.sidebar_con li.on{
border-left:2px solid #fe5d00; 
padding-left: 23px; 
border-top:1px solid #f3d2a1; 
border-bottom:1px solid #f3d2a1; 
border-right: none; 
background: url(images/sprite.gif) 
no-repeat -298px -180px #FFF; }
.sidebar_con li a{
font-size: 16px; display: block;}

八.footer切割footer结构分析

footer由友情链接和版权信息两部分组成，友情链接为一排链接。

对应的HTML代码：

 

  

   友情链接：
    福州总工会  |  
    厦门总工会  |  
    漳州总工会  |  
    泉州总工会  |  
    龙岩总工会  |  
    三明总工会  |  
    南平总工会  |  
    莆田总工会  |  
     宁德总工会  |  
    福州教育总工会  
 
   

    主办单位：福建省总工会
 
    技术支持：福建广播电视大学
 
    主办单位：
 闽ICP10011489号
    
  

对应的CSS代码：

/*footer*/
.footer{background-color: #fbeeda; 
border-top: 1px solid #f3d3a4; 
padding: 20px 0; 
text-align: center; 
margin-top: 30px;}
.footer a, .footer span{
color: #333; 
text-decoration: none;}
.footer a:hover{
text-decoration: underline;}
.footer div{padding: 10px 0;}

九.完整切割页面查看

全文完~！

css中如何实现多行文本于一个块级元素中居中

css中如何实现多行文本于一个块级元素中居中

案例效果:

即实现多行文本在一个div 框中进行水平垂直居中:

相关html 结构如下:

    

        
hello world1
        
hello world2
    
    
    

    

css样式结构如下:

    .contain{
        position: relative;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid darkred;
        margin-top:100px;
        border-radius: 50%;	
    }
    .contain1{
        display: table;
    }
    .sub-contain{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

主要是使用父元素的display:table 布局，对应子元素：display:tables-cell 布局来实现，vertical-align 是调整使其竖直方向居中

text-align：center是调整使其水平方向居中，从而达到多行文本在一个div 中居中展示的效果。