请高手帮我改改这个CSS(本页内导航)

html-css018

请高手帮我改改这个CSS(本页内导航),第1张

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

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>简洁Tab</title>

<style type="text/css">

<!--

body,div,ul,li{

margin:0

padding:0

}

body{

font:12px "宋体"

text-align:center

}

a:link{

color:#00F

text-decoration:none

}

a:visited {

color: #00F

text-decoration:none

}

a:hover {

color: #c00

text-decoration:underline

}

ul{

list-style:none

}

.main{

clear:both

padding:8px

text-align:center

}

#tabs0 {

height: 200px

width: 100px

border: 1px solid #cbcbcb

background-color: #f2f6fb

}

.menu0{

width: 100px

}

.menu0 li{

display:block

float: left

padding: 0px

width:100px

text-align: center

cursor:pointer

background: #FFFFff

}

.menu0 li.hover{

background: #f2f6fb

}

#main0 ul{

display: none

}

#main0 ul.block{

display: block

}

-->

</style>

<script>

<!--

function setTab(m,n){

var tli=document.getElementById("menu"+m).getElementsByTagName("li")

var mli=document.getElementById("main"+m).getElementsByTagName("ul")

for(i=0i<tli.lengthi++){

tli[i].className=i==n?"hover":""

mli[i].style.display=i==n?"block":"none"

}

}

//-->

</script>

</head>

<body>

<br />

<br />

<div id="tabs0">

<ul class="menu0" id="menu0">

<li onclick="setTab(0,0)" class="hover">新闻</li>

<li onclick="setTab(0,1)">评论</li>

<li onclick="setTab(0,2)">技术</li>

<li onclick="setTab(0,3)">点评</li>

</ul>

<div class="main" id="main0">

<ul class="block"><li>新闻列表</li></ul>

<ul><li>评论列表</li></ul>

<ul><li>技术列表</li></ul>

<ul><li>点评列表</li></ul>

</div>

</div>

</body>

</html>

不知道是不是你想要的效果。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的<style>标签中，输入css代码：body {text-align:center}，在<script>标签中输入js代码：

var a = ($(document).height() - $('form').height()) / 2

$('form').css('margin-top', a + 'px')

3、浏览器运行index.html页面，此时form标签成功在页面中水平垂直居中了。