就拿你的列表都位于屏幕左侧为例,其他也类似
<ul>
<li id="articles">文章列表</li>
<li>相册</li>
<li>关于我</li>
</ul>
CSS样式
li #articles
{
text-indent: -60px/* 这里的60px为你的“文章列表”到屏幕左侧的距离*/
}
li:after
{
content: '日记清单'
}
给你一个参考的CSS定义(转自蓝色理想的snwebsite)底部的工具条你可以定义css里的.title来改变他的样式,如果你需要固定在顶部,那么就将css里的.title的bottom:0px换成top:0px即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>的BLOG</TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#body{padding-top:31pxposition:relativewidth:100%height:100%overflow-x:autooverflow-y:scroll}
a{text-decoration:none}
a:link{}
a:visited{color:orange}
a:hover{color:redtext-decoration:red}
a:active{}
html,body{overflow:hiddenwidth:100%height:100%margin:0pxpadding:0pxfont-size:12px}
.title{bottom:0pxheight:15pxwidth:600pxborder-left:noneborder:1px solid blackposition:fixed_position:absolutemargin-left:50%left:-308pxz-index:10background-color:white}
.title ul{height:15pxpadding:0pxmargin:0px}
.title li{display:inlineheight:15px}
.outline{width:602pxposition:relativemargin-left:50%left:-300pxborder:1px solid redoverflow:auto}
.leftside{width:200pxheight:800pxfloat:left}
.cc{width:400pxheight:800pxfloat:left}
</style>
</HEAD>
<BODY>
<div class="title"><ul>
<li><a href="">日记</a></li>
<li><a href="">实验室</a></li>
<li><a href="">影集</a></li>
</ul></div>
<div id="body">
<div class="outline">
<div class="leftside">123</div>
<div class="cc">456</div>
</div>
</div>
</BODY>
</HTML>