请教一下代码的问题
neirong的列布局效果没出来（20%，25%，10%，25%，20%）
bottombox没居中
neirong里的红底字如何排版和右边的三行字垂直对齐（行间距一样）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
img{display: block;}
.clearfixed{clear: both;}
.navbox{width: 100%;height: 100px;background: black;}
.navbox img{float: left;}
.navbox ul{float: right;}
.navbox ul li{float: left;list-style: none;line-height: 100px;padding: 0 40px;color: white;overflow: hidden;}
.bottombox{width: 100%;height: 100px;background-color: black;position: relative;}
.bottombox ul{position: absolute;top: calc(50% - 50px);left: calc(50% - 550px);}
.bottombox ul li{list-style: none;float: left;line-height: 100px;padding: 0 20px;color: white;font-size: 16px;}
.neirong{width: 100%;height: 500px;background-color: aqua;}
.n1{float: left;width: 25%;}
.n2{float: left;width: 25%;}
.kong1,.kong3{float: left;width: 20%;}
.kong2{float: left;width: 10%;}
.neirong h2{line-height: 80px;margin-top: 50px;}
.n2 p{line-height: 40px;}
.bgred{background-color: pink;}
</style>
</head>
<body>
<div class="navbox">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
<p class="clearfixed"></p>
</div>
<div class="neirong">
<div class="kong1"></div>
<div class="n1">
<h2>课程推荐</h2>
<table cellpadding="20px">
<tr>
<td class="bgred">职业路径</td>
<td> HTML与css3实现动态网页</td>
</tr>
<tr>
<td class="bgred">职业路径</td>
<td> 零基础入门Android语法与界面</td>
</tr>
<tr>
<td class="bgred">职业路径</td>
<td> iOS基础语法与常用控件</td>
</tr>
<tr>
<td class="bgred">职业路径</td>
<td> PHP入门开发</td>
</tr>
<tr>
<td class="bgred">职业路径</td>
<td> JAVA入门开发</td>
</tr>
</table>
</div>
<div class="kong2"></div>
<div class="n2">
<h2>相关课程</h2>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="kong3"></div>
<p class="clearfixed"></p>
</div>
<div class="bottombox">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
<p class="clearfixed"></p>
</div>
</body>
</html>
正在回答
同学你好，
1、首先在实际工作中，表格确实不常用哦，删除margin：0，padding：0是会让别的代码出现问题。
2、p标签给部分字体加颜色，老师在第一次回答的时候就给同学实现了哦，通过将想要加颜色的内容放到一个标签里面例如span，给span起类名或者id名，单独设置样式就可以了哦。
span的类名是同学之前给td设置的哦，已经实现了背景色：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
同学你好，
1、首先老师给的修改代码里面，就是改正了左边（n1），没有动右边哦，同学再仔细看一下。
2、同学设置的cellpadding不生效的原因是因为同学还在全局设置了margin：0，padding：0，去除掉了table设置的内边距cellpadding，同学可以把如下代码先注释掉，cellpadding就起作用了：
3、既然同学想让左边跟右边保持一致，那为什么不用相同的布局呢，这样不是更简单一些吗？如果左边用表格实现，右边用p标签实现，那么cellpadding值计算起来会很困难，还会受其他样式的影响，建议同学直接使用p标签给他们相同的行高哦。同学自己再对着代码测试一下哦。
希望我的回答能够帮助到你，望采纳，祝学习愉快！
同学你好：
1、在内容区域设置的宽度没有生效，是因为同学没有给盒子高度，盒子没有内容撑起来：
给一个高度，暂定为height：100%就可以实现了：
2、底部内容的水平居中问题，我们可以看到ul的宽度为624px（由各个导航项的内容和间距撑起来的），所以可以给ul设置固定宽624px，再用margin：0 auto实现水平居中：
3、内容里面，两列的文字排版之所以不同，是因为右边使用的是p标签，而p标签自带的就有间距且设置的有行高，所以如果想让左边的跟右边的对齐，将左边的样式和结构跟右边的相同就可以啦：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星