<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>This My First Web</title>
<meta charset="utf-8" />
<style >
.title{
border:2px solid black;
position:fixed;
width:1350px;
//background-color:gray;
top:0px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
ul a
{
display:block;
width:150px;
}
.index {
border : 2px solid black;
position:absolute;
top:84px;
float :left;
height:450px;
width:150px;
}
.daohang{
font-size:large;
}
.backgrount{
background-image:url(1.jpg);
}
.main{
position:absolute;
float:right;
text-align:center;
border:2px solid black;
height:450px;
width:1350px;
top:84px;
}
.botton{
position:absolute;
border:2px solid black;
width:1350px;
height:70px;
bottom:0px;
}
</style>
</head>
<body class="backgrount">
<div>
<div class="title"><h1>    
<a href="http://wwww.baidu.com" target="_blank">HOME</a>
<a href="http://www.youku.com" target="_blank"> VIDOL</a>
<a href="http://image.baidu.com" target="_blank">PICTURE</a>
</h1>
</div>
<div class="index">
<ul>
<li class="daohang"><a href="http://www.baidu.com" target="_blank">css</a></li>
<li class="daohang"><a href="http://www.w3school.com.cn/html/index.asp" target="_blank">html</a></li>
<li class="daohang"><a href="http://www.w3school.com.cn/b.asp" target="_blank">javascript</a></li>
</ul>
</div>
<div class="main">
<p>this is main idear you think you are a good hero!!!</p>
<p>
Welcome to hello world! Now you will see a diffrient world,and a very cool netweb!!!
Ara you realdy to see the amaziding!!!
</p>
</div>
<div class="botton">
<p style=" color:red;">
              © 版权所有归华庆责任有限公司 2016.05.13
</p>
</div>
</div>
</body>
</html>
main对象浮动到连接上面覆盖了连接对象了，当然没有办法点击，设置index容器的z-index浮动到main上面
没有z-index配置的，absolute/fixed定位的默认最后的元素覆盖前面的元素，你这种布局用table弄不是好点，absolute定位。。。
.index {
border: 2px solid black;
position: absolute;
top: 84px;
float: left;
height: 450px;
width: 150px;
z-index:999/*。。。。。。*/
}