有点难，也很多人不会，但我硬啃下来了！不知道我花5个小时啃下来值不值得~老师看下我实现得怎么样~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的方法</title>
<style type="text/css">
*{margin:0;padding:0;}
/*头部*/
.head{
font-size:16px;
font-family:"微软雅黑";
background:rgb(0,0,0);
width:100%;
height:70px;
position:fixed;
}
.head img{
width: 210px;
height: 70px;
}
.nav{
display:inline-block;
float:right;
position:absolute;
top:50%;
right:0px;
margin-top:-12px;
}/*为何不能用line-height: 100px;？只能像这样声明？*/
.nav a{
text-decoration:none;
color:#fff;
padding:24px;
}
/*主体内容*/
.body{
width: 100%;
min-height: 600px;
background: rgb(150,200,200);
padding-top: 100px;
}
.bodybox{
width: 70%;
height: 410px;
margin:0 15%;
position: absolute;
}
/*主体内容左边*/
.left{
width: 55%;
height: 410px;
float: left;
position: relative;
}
.lefttable{
margin-top: 36px;
}
tr{ display: block;
padding: 8px;
}
th{
font-size: 24px;
}
.tablecell1{
color: rgb(0,0,0);
background-color: rgb(200,100,100);
width: 70px;
height:24px;
font-size: 16px;
margin-right: 16px;
}
.tablecell2{
padding-left: 16px;
}
/*主体内容右边*/
.right{
width: 45%;
height: 410px;
float: left;
position: relative;
}
.rightcon{
width: 250px;
margin-top: 36px;
}
.rightcon .p1{
font-size: 24px;
padding: 10px;
}
.rightcon .p4 a{
text-decoration:none;/*对行内元素a标签设置背景色时得加这个*/
display: inline-block;/*对行内元素a标签设置背景色时得加这个*/
color:rgb(0,0,0);
font-size: 16px;
padding: 10px;
}
/*底部*/
.foot{
background: rgb(0,0,0);
width: 100%;
height: 70px;
position: fixed;
bottom: 0;
line-height: 70px;
text-align: center;/*为何用margin: 0 auto;没用*/
}
.foot a{
display: inline-block;/*对行内元素a标签设置背景色时得加这个*/
text-decoration:none;/*对行内元素a标签设置背景色时得加这个*/
color: #fff;
font-size: 16px;
padding: 0 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="head">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="body">
<div class="bodybox">
<div class="left">
<table class="lefttable">
<tr>
<th>课程推荐</th>
</tr>
<tr>
<td class="tablecell1">职业路径</td><td class="tablecell2">HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td class="tablecell1">职业路径</td><td class="tablecell2">零基础入门Android语法与界面</td>
</tr>
<tr>
<td class="tablecell1">职业路径</td><td class="tablecell2">iOS基础语法与常用控件</td>
</tr>
<tr>
<td class="tablecell1">职业路径</td><td class="tablecell2">PHP入门开发</td>
</tr>
<tr>
<td class="tablecell1">职业路径</td><td class="tablecell2">JAVA入门开发</td>
</tr>
</table>
</div>
<div class="right">
<div class="rightcon">
<p class="p1">相关课程</p>
<p class="p4">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">HTML5</a>
<a href="#">CSS3</a>
<a href="#">Jquery</a>
<a href="#">移动端基础</a>
<a href="#">移动端APP开发</a>
</p>
</div>
</div>
</div>
</div>
<div class="foot">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>0
收起
正在回答
2回答
同学，你好。整体实现的还是很不错的，但是还有一点不太完美的地方，中间区域的高度是不够的，致使中间区域与页脚之间出现了空白，如图：
建议可以同学可以给中间区域设置固定高度800px，如图：
很为你高兴，坚持自己做出来习题，只要坚持就一定能完成，这个是毋庸置疑的，希望后面的课程你也能继续保持这样的毅力，这一次你用了5个小时，下一个问题可能4个小时，会越来越快。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星