为何我下面的页尾无法居中、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:100px;
background:black;
overflow: hidden;
zoom:1;
position:fixed;
}
.logo{
float:left;
height:100px;
}
.nav{
position:absolute;
right:100px;
overflow:hidden;
zoom:1;
}
.a1{
text-decoration:none;
color:#fff;
}
ul li{
float:left;
margin-left:50px;
line-height: 100px;
font-size:20px;
}
.content{
width:100%;
height:800px;
margin:0 auto;
text-align:center;
background:orange;
}
.cont{
width:64.5%;
height:800px;
background:#add8e6;
float:left;
text-align:center;
font-size: 0;
}
.cont .left{
width:40%;
height:800px;
background:#add8e6;
display: inline-block;
font-size:20px;
text-align:left;
}
span{background:#ff9999;}
.tab tr{line-height: 3em;}
.c1{font-size:30px;}
.a2{text-decoration:none;color:black;}
table{
margin-top:100px;
}
.demo{
width:0.5%;
height:800px;
background:orange;
display:inline-block;
}
.cont .middle{
width:30%;
height:800px;
background:#add8e6;
display: inline-block;
font-size:20px;
text-align: left;
}
.right{
width:35%;
height: 800px;
background:#add8e6;
float:right;
}
.r1{
width:60%;
height:700px;
background:#add8e6;
margin:0 auto;
text-align: left;
margin-top: 100px;
}
input{
display:inline-block;
width:250px;
height:40px;
margin-top: 30px;
}
.dl{
background:red;
width:250px;
height:40px;
color:#fff;
font-size:20px;
cursor:pointer;
}
.footer{
width:100%;
height:100px;
background:black;
margin:0 auto;
}
.footer ul{text-align:center}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></a>
</div>
<div class="nav">
<ul>
<li><a href="#" class="a1">课程</a></li>
<li><a href="#" class="a1">职业路径</a></li>
<li><a href="#" class="a1">实战</a></li>
<li><a href="#" class="a1">猿问</a></li>
<li><a href="#" class="a1">手记</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="cont">
<div class="left">
<table class="tab">
<tr>
<td class="c1">课程推荐</td>
</tr>
<tr>
<td> <span>职业路径</span><a href="#" class="a2"> HTML与CSS实现动态网页</a></td>
</tr>
<tr>
<td> <span>职业路径</span><a href="#" class="a2"> 零基础入门Android语法与界面</a></td>
</tr>
<tr>
<td> <span>职业路径</span><a href="#" class="a2"> IOS基础语法与常用控件</a></td>
</tr>
<tr>
<td> <span>职业路径</span><a href="#" class="a2"> PHP入门开发</a></td>
</tr>
<tr>
<td> <span>职业路径</span><a href="#" class="a2"> JAVA入门开发</a></td>
</tr>
</table>
</div>
<div class="middle">
<table class="tab">
<tr>
<td class="c1">相关课程</td>
</tr>
<tr>
<td> <a href="#" class="a2">HTML</a> <a href="#" class="a2">CSS</a> <a href="#" class="a2">javaScript</a></td>
</tr>
<tr>
<td> <a href="#" class="a2">HTML5</a> <a href="#" class="a2">CSS3</a> <a href="#" class="a2">Jquery</a></td>
</tr>
<tr>
<td> <a href="#" class="a2">移动端基础</a> <a href="#" class="a2">移动端APP开发</a></td>
</tr>
</table>
</div>
</div>
<div class="demo"></div>
<div class="right">
<div class="r1">
<p class="c1">登录</p>
<form>
<input type="text" name="user" size="30px" placeholder="请输入登录邮箱/手机号"/><br/>
<input type="password" name="pass" maxlength="16" placeholder="6-16密码,区分大小写,不能用空格"/><br/>
<input type="submit" value="登录" class="dl"/>
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#" class="a1">网页首页</a></li>
<li><a href="#" class="a1">企业合作</a></li>
<li><a href="#" class="a1">人才招聘</a></li>
<li><a href="#" class="a1">联系我们</a></li>
<li><a href="#" class="a1">常见问题</a></li>
<li><a href="#" class="a1">友情链接</a></li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星