CSS 代码能更改模块的名称吗?

html-css016

CSS 代码能更改模块的名称吗?,第1张

我提供你一种思路吧,不过只能在非IE的浏览器上成功,测试过了

就拿你的列表都位于屏幕左侧为例,其他也类似

<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>