老师请检查，谢谢
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
* {margin:0; padding:0;}
.header,.container,.footer {min-width:1000px;}
.header {
width:100%;
height:150px;
background:#000;
font:bold 20px 'Microsoft YaHei';
position:fixed;
top:0;
}
img {
display:block;
float:left;
position:relative;
top:50%;
margin-top:-50px;
}
.header ul{
float:right;
list-style:none;
color:#fff;
height:150px;
}
.header ul li{
float:left;
}
.header ul li a{
display:block;
text-decoration:none;
line-height:150px;
margin-right:40px;
color:#fff;
}
.container {
width:100%;
background-color:#507B8A;
height:1000px;
font-size:16px;
font-weight:normal;
color:#333;
margin:150px 0 100px 0;
}
.left{
width:30%;
height:100%;
float:left;
}
.container a {
color:#333;
text-decoration:none;
display:inline-block;
background-color:#97696A;
margin-right:20px;
}
h1,li {
margin-bottom:40px;
list-style:none;
}
.middle{
width:30%;
height:100%;
float:left;
}
.footer {
height:100px;
width:100%;
background:#222;
position:fixed;
bottom:0;
left:0;
right:0;
min-width:800px;
/* color:#fff;*/
}
.footer ul{
text-align:center;
}
.footer ul li{
display:inline-block;
line-height:100px;
margin:0 20px;
}
.footer ul li a{
display:inline-block;
text-decoration:none;
line-height:100px;
color:#fff;
}
.rightline {
width:0.2%;
background:orange;
height:100%;
float:left;
}
.right {
width:39.8%;
height:100%;
float:right;
border-left:1% orange solid;
}
.right input {
display: block;
width: 280px;
height: 30px;
/*font-size: 5px;*/
color:#999;
margin-top: 40px;
}
.botton {
background:#ff0000;
border-style:none;
font-size:18px;
}
.login,.course,.content {
margin:100px 80px 80px 150px ;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt=""/>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">原文</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">手机</a></li>
</ul>
</div>
<div class="container">
<div class="left">
<div class="content">
<h1>课程推荐</h1>
<ul>
<li><a href="#">职业路径</a>html5与css3实现动态网页</li>
<li><a href="#">职业路径</a>html5与css3实现动态网页</li>
<li><a href="#">职业路径</a>html5与css3实现动态网页</li>
<li><a href="#">职业路径</a>html5与css3实现动态网页</li>
<li><a href="#">职业路径</a>html5与css3实现动态网页</li>
</ul>
</div>
</div>
<div class="middle">
<div class="course">
<h1>相关课程</h1>
<ul>
<li>HTML CSS JAVASCRIPT</li>
<li>HTML CSS JAVASCRIPT</li>
<li>移动端基础 移动端app开发</li>
</ul>
</div>
</div>
<div class="rightline"></div>
<div class="right">
<div class="login">
<h1>登陆</h1>
<input type="text" name="user" size="40" placeholder="请输入登录邮箱/手机号"/>
<input type="password" name="password" size="40" maxlength=16 placeholder="6-16位密码，区分大小写，不能用空格"/>
<input type="submit" class="botton" value="登陆" name="submit"/>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情连接</a></li>
</ul>
</div>
</body>
</html>
正在回答
同学你好，提高权重，设置字体颜色即可，例如：
效果：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星