<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2r3c</title>
<style>
html,body{
height: 100%;
width: 100%;
margin:none;
padding: none;
border: none;
}
header{
background-color: black;
width: 100%;
height: 10%;
color:white;
margin:0px;
padding:0px;
}
header ul{
float:right;
margin-top: 2.3%;
}
header li{
margin-left: 30px;
margin-right: 50px;
display: inline-block;
}
.c3{
width: 100%;
height: 80%;
margin: 0px;
padding: 0px;
}
.t1{
padding: 5%;
text-align:left;
font-weight:bolder;
display: inline;
}
.t1 th,.t2 th{
font-size: 30px;
padding: 30px;
}
.td1{
background-color: lightcoral;
padding: 0px;
}
.td2,.t2 td{
padding: 10px;
}
.t2 {
display: inline;
font-weight: bolder;
}
.left{
height: 100%;
width: 68.5%;
float:left;
background-color: lightblue;
}
.middle{
height: 100%;
width: 100%;
background-color: orange;
}
.right{
height: 100%;
width: 30.5%;
background-color: lightblue;
float: right;
}
h1{
margin-left: 10%;
margin-top: 5%;
padding: 10px;
}
input{
width: 20em;
margin-left: 10%;
padding: 10px;
}
button
{
padding: 10px;
margin-left: 10%;
width:22em;
background-color: red;
color: white;
border:none;
}
footer{
height: 10%;
width: 100%;
background-color: black;
text-align: center;
vertical-align: middle;
color: white;
}
footer ul{
margin:0px auto;
}
footer li{
display: inline-block;
margin-top: 0px;
padding: 30px;
}
a{
text-decoration: none;
}
a:link{
color: white;
}
a:hover{
color: greenyellow;
}
a:active{
color: cyan;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<header>
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png" />
<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>
</header>
<div class="c3">
<div class="left">
<table class="t1">
<th colspan="2">课程推荐</th>
<tr>
<td class="td1">职业路径</td>
<td class="td2">HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td class="td1">职业路径</td>
<td class="td2">零基础入门Android语法与界面</td>
</tr>
<tr>
<td class="td1">职业路径</td>
<td class="td2">IOS基础语法与常用控件</td>
</tr>
<tr>
<td class="td1">职业路径</td>
<td class="td2">PHP入门开发</td>
</tr>
<tr>
<td class="td1">职业路径</td>
<td class="td2">JAVA入门开发</td>
</tr>
</table>
<table class="t2">
<th colspan="3">相关课程</th>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td>HTML5</td>
<td>CSS3</td>
<td>Jquery</td>
</tr>
<tr>
<td>移动端基础</td>
<td colspan="2">移动端APP开发</td>
</tr>
</table>
</div>
<div class="right">
<h1>登录</h1>
<form id="login">
<input type="text" placeholder="请输入登录邮箱/手机号" />
<br />
<br/>
<input type="password" placeholder="6~16位密码，区分大小写，不能用空格" />
</form>
<br/>
<button type="submit" form="login">提交</button>
</div>
<div class="middle"></div>
</div>
<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>
</footer>
</body>
</html>业余奶茶品鉴师