你需要写一个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 */
1、不要过于复杂
页脚和页头的设计有所区别，它并不需要跟页头的导航栏或者BANNER图设计那样过多的注重交互性以及个性化，反而是简洁有力的页脚更加有利于用户体验。通常采用极少的色彩元素并和网站整体风格一致，尽量避免图片背景形式，如需让内容显得丰富些，就选择图标和文字结合的形式来展现，且内容也不宜过多，应简洁。
2、必要的信息不能少
在浏览网站时，可以发现，大多数网站的页脚包含了企业简单业务介绍，联系信息，版权保护以及其它关联网站等等，当用户在网站上没有发现明显的联系方式，他们基本上都会把网页拉到页脚寻找信息，能让他们快速找到目标内容可以减少网站跳出率。
3、合理安排链接
页脚内容对排布和分类要求较高，毕竟所占据的网站板块区域较小，因此要遵循以简洁明了的形式展示最直接和全面的内容，无论是网站基本内容的目录，还是联系方式，有或者是友情链接，最好进行组织分类，通常情况下，这些内容都是以概括的形式展示，更多详细内容以链接跳转的形式，对此要合理安排好链接，保证好用户体验，以防出现死链或者空链。
4、避免头重脚轻
有些网站在建设的过程中并没有明确的页脚概念，往往把页头做得很耀眼，但是整站往下拉，却没有页脚的踪影，又或者是将页脚看作最次要的一部分，所使用的字体小，内容粗略，且没有将文字与背景对比度考虑在内等等，无形中就造成了用户不愉快的阅读体验，按照用户的浏览习惯，从网站页头浏览下来，体验效果都还不错，但一到页脚就一头雾水，这种头重脚轻的现象就造成了用户不好的印象。
5、去掉冗余的装饰
有些网站建设认为页脚的信息内容过于简单则需要强调重点，但是往往这些“强调”会成为页脚设计中的累赘，譬如给链接加上下划线，字体采用特殊效果等等，事实上更多的是造成网站页面的杂乱，因此这些冗余的装饰最好统统去掉，干净整洁反而是一种美。
6、充分利用空间的同时注意留白
网站页脚的设计是在有限的空间内展示最精辟的内容，对于这部分的空间要充分利用起来，对要使用的图标，文字，图片等内容进行排版设计，但在安排这些元素的同时要懂得留白，避免出现密密麻麻的内容扎堆情况，否则影响网站美观的同时也产生了用户阅读困扰。
页脚作为网站建设中重要的一部分，也是建站中不容忽视的一大内容板块，它能为网站传达很多的信息内容，掌握对它的设计技巧还能帮助网站提升用户体验度，因此别忘了它存在的作用和价值。
最快的方式是将底部的设置定位，也是最常见方式。例子：
<style type="text/css">
.main{
padding-bottom: x px/*x 和底部的高度相同*/
}
.foter{
position: fixed
height: xpx/*x 是你底部的高度*/
width: 100%
left: 0px
bottom: 0px
}
</style>
<div class="header">头部</div>
<div class="main">内容</div>
<div class="footer">底部</div>
希望能给你帮助。
