麻烦老师指导一下作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
body{
min-width: 800px;
}
.header,.footer{
width: 100%;
color: white;
height: 100px;
background: black;
overflow: hidden;
zoom: 1;
}
.logo{
float: left;
}
.logo img{
display: block;
}
.nav ul{
overflow: hidden;
zoom: 1;
float: right;
}
.nav ul li{
line-height: 100px;
float: left;
margin-right: 50px;
}
a{
color: white;
}
.nav ul li a:hover{
color: orange;
cursor: pointer;
}
.footer{
text-align: center;
}
.footer ul {
display: inline-block;
overflow: hidden;
zoom: 1;
}
.footer ul li{
float: left;
line-height: 100px;
margin:0 20px;
}
.container{
padding: 0 200px 0 300px;
overflow: hidden;
zoom: 1;
}
.content,.left,.right{
position: relative;
min-height: 740px;
float: left;
}
.content{
width: 100%;
background: pink;
}
.content img{
display: block;
margin: 150px auto;
}
.left{
background: bisque;
width: 300px;
margin-left: -100%;
left: -300px;
}
.right{
width: 200px;
background: deepskyblue;
margin-left: -200px;
right: -200px;
}
.inner{
margin-top: 150px;
margin-left: 20px;
}
span{
background: firebrick;
}
.inner h3,.inner p{
margin-top: 10px;
}
.inner p a{
color: black;
}
input{
width: 200px;
margin-top: 10px;
height: 30px;
}
.button{
background: red;
border: none;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/>
</div>
<div class="nav">
<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>
<div class="container">
<div class="content">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<div class="inner">
<h3>课程推荐</h3>
<p><span>职业路径</span><a href="#"> HTML与CSS实现动态网页</a></p>
<p><span>职业路径</span><a href="#"> 零基础入门Android语法与界面</a></p>
<p><span>职业路径</span><a href="#"> ios基础语法与常用控件</a></p>
<p><span>职业路径</span><a href="#"> PHP入门开发</a></p>
<p><span>职业路径</span><a href="#"> JAVA入门开发</a></p>
</div>
</div>
<div class="right">
<div class="inner">
<h1>登录</h1>
<input type="text" placeholder="请输入用户名"><br/>
<input type="text" placeholder="请输入用户密码"><br/>
<input class="button" type="button" value="登录">
</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 星