2-11练习问题

来源：2-12 编程练习

Abracadabra2

2017-07-05 14:25:45

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.nav_con li,.foot_con li{
list-style:none;
float:left;
width:80px;
font-size:12px;
}
.nav,.foot{
color:#fff;
background:#000;
height:100px;
width:100%;
line-height:100px;
}
.logo{
float:left;
}
.nav_con{
float:right;
text-align:center;
}
.con{
width:100%;
margin:0 auto;
background:#5880f1;
height:600px;
}
.left{
float:left;
width:20%;
height:600px;
}
.leftbox{
position:absolute;
left:50px;
top:200px;
}
span{
background:pink;
margin:10px 10px 10px 0px;
font-size:12px;
}
p{
margin:10px 10px 10px 0px;
font-size:12px;
}
.con{
list-style:none;
}
.middle{
float:left;
width:20%;
border-left:10px solid pink;
height:600px;
}
.middlebox{
position:absolute;
top:200px;
left:300px;
}
.middlebox ul li{
font-size:12px;
margin:10px 10px 10px 0;
}
.right{
float:right;
width:30%;
}
.rightbox{
position:absolute;
top:200px;
left:550px;

}
input{
width:250px;
height:20px;
margin:10px;
}
input[type=button]{
background:red;
height:25px;
border:1px solid red;
color:#fff;
}
.foot_con{
position:relative;
left:200px;
}
</style>
</head>
<body>

<div class="nav">
<div class="logo">
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"/>
</div>
<div class="nav_con">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="con">
<div class="left">
<div class="leftbox">
<h2>课程推荐</h2>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Android语法与见面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
</div>
<div class="middle">
<div class="middlebox">
<h2>相关课程</h2>
<ul class="con">
<li>HTML  CSS  JavaScript</li>
<li>HTML5  CSS3  Jquery</li>
<li>移动端基础  移动端APP开发</li>
</ul>
</div>
</div>
<div class="right">
<div class="rightbox">
<form>
<h2>登录</h2>
<input type="text" placeholder="请输入登录邮箱/手机号"/>
<input type="text" placeholder="6-16位密码，区分大小写，不能用空格"/>
<br/>
<input type="button" value="登录"/>
</form>
</div>
</div>
</div>
<div class="foot">
<ul class="foot_con">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>