你需要写一个CSS样式文件，后缀名称就是CSS，我这里正好写了一个CSS样式表，用于定义网站显示文字的格式，然后你复制这个代码将这个代码保存格式为：comman.css
/*------reset------*/body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{
margin:0
color: #000
font-size: 12px
font-family: "微软雅黑"
text-align: center
}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serifcolor:#6c6c6c}
body{padding-top:42px}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,i,b{font-style:normal}
ul,ol{list-style:none}
a{color:#6c6c6ctext-decoration:none}
a:hover{
color:#330033
font-size: 12px
text-align: left
}
img{border:0}
button,input,select,textarea{font-size:100%outline:nonevertical-align:middle}
textarea{resize:none}
table{
border-collapse:collapse
border-spacing:0
text-align: center
}
td,th,ul,ol{
padding:0
color: #000
text-align: center
font-family: "微软雅黑"
font-size: 12px
}
/*------common------*/
.pr{position:relative}
.pa{position:absolute}
.fl{float:left}
.fr{float:right}
.fl,.fr{display:inline}
.bc{margin-left:automargin-right:auto}
.cb{clear:both}
.db{display:block}
.clearfix{*zoom:1}
.clearfix:after{content:'\20'display:blockheight:0line-height:0visibility:hiddenclear:both}
.tc{text-align:center}
.tr{text-align:right}
.fb{font-weight:bold}
.fn{font-weight:normal}
.f16{font-size:16px}
.f14{font-size:14px}
.f_yh{font-family:'\5FAE\8F6F\96C5\9ED1'}
.ell{text-overflow:ellipsiswhite-space:nowrapoverflow:hidden}
.none{display:none}
.hidden{visibility:hidden}
.ht{overflow:hiddentext-indent:-9999pxtext-decoration:none}
.unl{text-decoration:underline}
.bd1{border:1px solid #d8d8d8}
.bd1-t{border-top:1px solid #d8d8d8}
.bd1-b{border-bottom:1px solid #d8d8d8}
.bd3{border:3px solid #d8d8d8}
.hlh30{height:30pxline-height:30px}
.hlh24{height:24pxline-height:24px}
.lh22{line-height:22px}
.hlh20{height:20pxline-height:20px}
.c1{color:#5d5d5d}/*积齥*/
.c2{color:#8f8f8f}/*k*/
.c3{color:#e44cea}/*a?k*/
.c4{color:#f49bff}/*toplink*/
.c5{color:#ff0000}
.bc1{background:#f3f3f3}/*积sk*/
.bc2{background:#f8f8f8}/*齭k*/
.bc3{background:#ffffff}
.mt10{margin-top:10px}
.mb10{margin-bottom:10px}
.mr9{margin-right:9px}
.ml7{margin-left:7px}
.ml89{margin-left:89px}
.p20{padding:20px}
.p10{padding:10px}
.pt1{padding-top:1px}
.pr6{padding-right:6px}
.pl6{padding-left:6px}
.w230{width:230px}
.spr{background:url(http://ossweb-img.qq.com/images/ktv/web201206/spr.png) no-repeatoverflow:hidden}
.ico{width:8pxheight:8pxline-height:8pxmargin:10px 8px 0 8px}
/*--notice--*/
.game-notice{width:1000pxpadding:60px 0 30px 0}
.game-notice em{padding:0 4pxcolor:#6c6c6c}
/*--footer--*/
.footer{
background:#19001a
color: #FFF
}
.foot-con{width:915pxpadding:20px 0 30px 85px}
.foot-logo{width:216pxheight:45pxborder-right:1px solid #3a173b}
.game-logo{width:107pxheight:35pxbackground-position:0 -232px}
.kaige-logo{width:93pxheight:35pxbackground-position:-107px -232pxcursor:default}
.foot-list{padding-left:15pxcolor:#673768}
.foot-list a{color:#673768}
.foot-list a:hover{text-decoration:underline}
.foot-link{width:578px}
.foot-link span{padding:0 5pxcolor:#3A173B}
.copy{width:576px}/* |xGv00|8d5f9fb42d5dc8f4155bd7ed0d0073ae */
CSS+DIV排版其实很容易。如果凭空排版。你可能要先自己用纸画个版面草图。然后用div（不加内容，但是要显示边框）按照草图排版。直到自己满意之后再往div中添加内容。
如果有美工做好的效果图，那么按照效果图来排是最容易的。方法同上。
值得一提的是，排版一般都要求主层居中。而且兼容各个浏览器，关于这个方法，很多人都用
margin:0px 0px auto
这是最通用的让主层居中的方法。但是浏览器兼容性差。在大多数浏览器中，这个样式是不起作用的。
最简单有效，而且兼容所有浏览器的方法就是把主层放在<center></center>里。然后主层里的其它层用float和margin排版。保证不跑偏。
以上是我从事CSS+DIV工作5年的心得。莫见笑。
css样式分三种，内部样式，内联样式和外部样式。外部样式，顾名思义，也就是通过<link />引入的css样式文件，而内部样式呢，主要是放在<style></style>中的样式，而内联样式，就是直接嵌入标签的，充当标签的一个属性，使用style='这里写样式' 来实现。他们的优先级是内联样式的优先级最高，其次判断内部和外部样式的优先级得看它们在html中出现的位置，一般来说，越靠后的优先级也就越高。
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
它包含3种类型，内部样式，行内样式和外部样式表三种
作用的效果是按顺序从下到上，相同样式下面的会覆盖原有样式，除特殊情况外，一般都是行内样式>内部样式>外部样式。
以div为例
行内样式写法：
在style里面写样式
<div style="height:30pxbackground:#f00"></div>
内部样式：
在head标签内加入style标签，在标签内写样式：
<style>
div{height:30pxbackground:#f00}
</style>
外部样式是建立一个新文件后缀名为.css
举个例子：
建立style.css文件放在项目根目录下：
在里面写入
div{height:30pxbackground:#f00}
然后保存，在html的head标签内调用样式
<link rel="stylesheet" type="text/css" href="style.css" />
