HTML CSS div布局

abaloon98 2013-06-23 09:13:23



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Navigation Effect Using jQuery</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/sliding_effect.js"></script>

<script type="text/javascript" src="../js/button_resp.js"></script>

</head>

<body>

<div class="window_title">

<button type="button" id="abc">abc</button>

<button type="button" id="def">def</button>

</div>

<div class="window_body">

<div id="navigation-block">

  <ul id="sliding-navigation">

    <li class="sliding-element"><a href="#">Link 1</a></li>

    <li class="sliding-element"><a href="#">Link 2</a></li>

    <li class="sliding-element"><a href="#">Link 3</a></li>

    <li class="sliding-element"><a href="#">Link 4</a></li>

    <li class="sliding-element"><a href="#">Link 5</a></li>

  </ul>

</div>

<div id="browsing_block">

	diagram

</div>

</div>



</body>

</html>

我实现的效果如下：

这是我的CSS文件：



html,body {

	height:100%;

	width:100%;	

}



button {

	width: 35px;

	height: 25px;

	text-align: center;

	position: relative;

	top: 8px;

	bottom: 8px;

}



.window_title {

	border:#000000 solid;

	border-bottom:1px;

	border-left:2px;

	border-right:2px;

	border-top:2px;

	height:10%;

	width:100%;

	vertical-align: middle;

}



.window_body {

	height:90%;

	width:100%;

}



#navigation-block {

	border:#000000 solid;

	border-left:2px;

	border-bottom:2px;

	border-top:1px;

	border-right:1px;

	float:left;

	width:20%;

	height:100%;

}



#browsing_block {

	border:#000000 solid;

	border-right:2px;

	border-bottom:2px;

	border-top:1px;

	border-left:1px;

	float:left;

	width:79%;

	height:100%;

}

（1）为什么browsing_block的右面和window_title不对齐？
（2）两个按钮相对于window_title的相对位置应该是上下都距离8px，为什么下面不是8px呢？
（3）我设置的是window_title height 10%, window_body height 90%。为什么在IE中显示为什么右面会出现下拉条，不是应该正好充满屏幕的吗？
先谢谢各位啦

...全文