请老师指导，谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 清除默认 */
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;}
a{ text-decoration: none;}
/* 容器 */
body{background: #add8e6;}
.container{width: 100%; height: auto;}
/* 头部 */
.header{ width: 100%; height: 100px; background: black;
position: fixed;
top: 0;
left: 0;}
/* logo */
.logo{ float: left;}
/* 导航 */
.nav{ float: right;}
.nav li{ float: left;color: #fff;
line-height: 100px; margin: 0 20px;}
/* main */
.main{ width: 60%; height: 800px; margin: 0 auto;}
.main .left,.right{ width: 50%; height: 600px;float: left;padding: 200px 0 0 0;line-height: 40px;}
.main a{ color: black;}
.main span{ background-color: pink;}
/* footer */
.footer{
width: 100%; height: 100px; background: black;
position: fixed;
bottom: 0;
left: 0;
text-align: center;}
.footer ul{
display: inline-block; }
.footer li{
float:left;
line-height: 100px; ;
color: #fff;
margin: 0 60px;}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" alt="很抱歉"></a> </div>
<!-- 导航 -->
<div class="nav">
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
</div>
<!-- main -->
<div class="main">
<!-- 左边 -->
<div class="left">
<h2>课程推荐</h2>
<a href="#"><span>职业路径</span> HTML5与CSS3实现动态网页版</a><br/>
<a href="#"><span>职业路径</span> 零基础入门Android语法与界面</a><br/>
<a href="#"><span>职业路径</span> iOS基础语法与常用控件</a><br/>
<a href="#"><span>职业路径</span> PHP入门开发</a><br/>
<a href="#"><span>职业路径</span> JAVA入门开发</a><br/>
</div>
<!-- 右边 -->
<div class="right">
<h2>相关课程</h2>
<a href="#">HTML CSS JavaScript</a><br/>
<a href="#" >HTML5 CSS3 JQuery</a><br/>
<a href="#">移动端基础 移动端APP开发</a><br/>
</div>
</div>
<!-- footer -->
<div class="footer">
<ul>
<a href="#"><li>网站首页</li></a>
<a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>友情链接</li></a>
</ul>
</div>
</div>
</body>
</html>6
收起
正在回答
2回答
同学你好，问题和修改如下：
1.行内元素有默认的间隙，且a不能被图片撑开。
解决方式是设置为块元素：
2.如下多了一个分号，去掉
3.ul中直接嵌套a标签不规范，ul是列表标签，里面需要嵌套li。
如下修改：
a有默认样式，文字嵌套在a中，那么需要给a设置字体颜色：
（尾部的结构也参考如上进行修改）
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星