总觉得写得还不够好，有可以改进的地方吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微软雅黑";}
.header
{
background: black;
width: 100%;
height: 100px;
line-height: 100px;
}
.header img{float: left;}
.header li
{
list-style: none;
color: white;
font-size:30px;
padding: 0 20px;
float: right;
}
.main{
background: #6699FF;
width: 100%;
height: 500px;
}
.main div{float: left;
padding-top: 80px;
line-height: 30px;}
.main .left{
width: 40%;
}
.main .right{
width: 40%;
}
.left dl{
margin-left: 300px;
}
.main dl dt{
font-weight: bold;
}
.right dl{
margin-left: 200px;
}
span{background: pink;}
.footer{
width: 100%;
height: 100px;
line-height: 100px;
background: black;
text-align: center;
}
.footer li{
color: white;
list-style: none;
display: inline;
padding: 0 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul>
<li>课程</li>
<li>课程</li>
<li>课程</li>
<li>课程</li>
<li>课程</li>
</ul>
</div>
<div class="main">
<div class="left">
<dl>
<dt>课程推荐</dt>
<dd><span>职业路径</span> web前段入门</dd>
<dd><span>职业路径</span> web前段入门</dd>
<dd><span>职业路径</span> web前段入门</dd>
<dd><span>职业路径</span> web前段入门</dd>
<dd><span>职业路径</span> web前段入门</dd>
<dd><span>职业路径</span> web前段入门</dd>
</dl>
</div>
<div class="right">
<dl>
<dt>相关课程</dt>
<dd>HTML CSS JAVASCRIPT</dd>
<dd>HTML CSS JAVASCRIPT</dd>
<dd>HTML CSS JAVASCRIPT</dd>
</dl>
</div>
</div>
<div class="footer">
<ul>
<li>网站合作</li>
<li>网站合作</li>
<li>网站合作</li>
<li>网站合作</li>
<li>网站合作</li>
</ul>
</div>
</body>
</html>
正在回答
测试了你的代码，有如下细节可以再完善修改下：
1、导航项过于靠右，可以通过给ul设置margin值来让导航项向左靠拢一些。
给logo设置了左浮动，也记得给ul设置一下右浮动，这样样式调整上会更方便。
2、主体中的左右内容布局上有些不美观，可以给左边左浮动，右边右浮动，然后再设置左边的margin-left，右边的margin-right加大它们与两边的距离。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星