本教程使用的页面实例如图所示：
二.拷贝基础模板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代码：
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代码：
对应的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代码：
对应的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 中居中展示的效果。