CSS 层定位

html-css021

CSS 层定位,第1张

<html>

<head>

<style type='text/css'>

#mainNav li{

display:inline

position:relative

}

#mainNav li ul{

display:none

}

#mainNav li.iehover ul{

display:block

left:-40

top:18

position:absolute

}

#mainNav li.iehover ul li{

display:list-item

left:0

}

#mainNav li a:hover{

background:red

}

.content{

top:20

text-align:center

width:800

height:600

position:relative

}

#MenuPos{

top:20

left:20%

width:400

position:relative

}

</style>

</head>

<body>

<div id='MenuPos'>

<ul id="mainNav" >

<li><a href="\">主页</a></li>

<li onmouseover='alert(this.className)' ><a href="#" >华人男星</a>

<ul >

<li><a href="#">周杰伦(Jay Chou)</a></li>

<li><a href="#">王力宏(Wang, Li Hong)</a></li>

<li><a href="#">张学友(Cheung, Hok Yau Jacky)</a></li>

</ul>

</li>

<li><a href="#">华人女星</a>

<ul>

<li><a href="#">蔡依林(Tsai, Yi Lin Jolin)</a></li>

<li><a href="#">张韶涵(Zhang Shao Han)</a></li>

<li><a href="#">梁静茹(Liang, Ching Ju)</a></li>

</ul>

</li>

<li><a href="#">华人组合</a>

<ul>

<li><a href="#">S.H.E</a></li>

<li><a href="#">False</a></li>

<li><a href="#">AlarmBeyond</a></li>

</ul>

</li>

<li><a href="#">日韩男星</a>

<ul>

<li><a href="#">安七炫</a></li>

<li><a href="#">Rain</a></li>

<li><a href="#">张佑赫</a></li>

</ul>

</li>

</ul>

</div>

<div class='content'>内容</div>

<DIV style="HEIGHT: 23pxpadding-bottom:15pxposition:relativebottom:0px" align="center"

id="x_1">Copyright © 2009<DIV>

</body>

</html>

可以用css定位让指定层在浏览器正中间。

1、新建html文档,在body标签中添加一个div标签,为这个标签设置宽高,这里以200px为例:

2、添加定位代码“position: absolute”,并且设置相对左侧和顶部的距离为“50%”:

3、最后设置指定层的左外边距和顶外边距的大小为指定层宽高的一半,这时指定层就会在浏览器的正中间: