作业效果
image.png
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>css布局</title>
<style media="screen">
html,body{
margin:0px;
height:100%;
}
header{
background-color:black;
width:100%;
height:10%;
background-image:url('http://climg.mukewang.com/59093e9c00016ce303000100.png');
background-repeat:no-repeat;
background-position:left center;
}
#m_content{
background-color:lightblue;
height:80%;
}
#foot{
background-color:black;
width:100%;
height:10%;
}
.guild{
float:right;
margin-top:25px;
}
.a_guild{
margin-left:10px;
margin-right: 10px;
color:white;
}
.b_div{
padding-top:20px;
text-align: center;
}
.b_link{
margin: 20px;
color:white;
}
#n_left{
height: 100%;
width:40%;
float:left;
}
#h1_1{
margin-top: 50px;
margin-left:160px;
}
#tb1{
border-spacing: 15px;
margin-left: 160px;
}
.t1{
background-color:pink;
}
#n_mid{
height: 100%;
width:30%;
float:left;
}
#n_right{
display: inline-block;
height: 100%;
width: 30%;
float: right;
}
#h1_2{
margin-top: 50px;
margin-left:80px;
}
#tb_2{
margin-left: 80px;
border-spacing: 15px;
}
a{
text-decoration: none;
color: black;
}
a:hover{color: rgb(148,71,235);}
.mid_2{
height:100%;
width:1%;
float:right;
background-color: orange;
}
.mid_1{
height: 100%;
width: 99%;
float: left;
}
#h1_3{
margin-top: 50px;
margin-left: 50px;
}
.login{
margin-left: 50px;
margin-top: 35px;
}
#in2{
margin-top: 20px;
}
#sub{
margin-top: 20px;
background: red;
width: 210px;
height: 35px;
color: white;
font-size: 20px;
font-weight: lighter;
}
.input{
width: 210px;
height: 35px;
font-size: 10px;
}
</style>
</head>
<body>
<header>
<div class="guild">
<a href="#" class='a_guild'>课程</a>
<a href="#" class='a_guild'>职业路径</a>
<a href="#" class='a_guild'>实战</a>
<a href="#" class='a_guild'>猿问</a>
<a href="#" class='a_guild'>手记</a>
</div>
</header>
<div id="m_content">
<nav id='n_left'>
<h1 id='h1_1'>课程推荐</h1>
<table id='tb1'>
<tr>
<td class='t1'>职业路径</td>
<td><a href="">HTML5与CSS3实现动态网页</a></td>
</tr>
<tr>
<td class="t1">职业路径</td>
<td><a href="">零基础入门Android语法与界面</a></td>
</tr>
<tr>
<td class="t1">职业路径</td>
<td><a href="">IOS基础语法与常用控件</a></td>
</tr>
<tr>
<td class="t1">职业路径</td>
<td><a href="">PHP入门开发</a></td>
</tr>
<tr>
<td class="t1">职业路径</td>
<td><a href="">JAVA入门开发</a></td>
</tr>
</table>
</nav>
<article id="n_mid">
<div class="mid_2">
</div>
<div class='mid_1'>
<h1 id='h1_2'>相关课程</h1>
<table id='tb_2'>
<tr>
<td>
<a href="">HTML</a>
<a href="">CSS</a>
<a href="">JavaScript</a>
</td>
</tr>
<tr>
<td>
<a class="tb2_2" href="">HTML5</a>
<a class="tb2_2" href="">CSS3</a>
<a class="tb2_2" href="">Jquery</a>
</td>
</tr>
<tr>
<td>
<a href="">移动端基础</a>
<a href="">移动端APP开发</a>
</td>
</tr>
</table>
</div>
</article>
<aside id="n_right">
<h1 id='h1_3'>登录</h1>
<form class="login" action="index.html" method="post">
<input type="text" class='input' id='in1' name="input" placeholder="请输入账号"/><br>
<input type="password" class='input' id='in2' name="pwd" placeholder="请输入密码"/><br>
<input type="submit" id='sub' name="sub">
</form>
</aside>
</div>
<footer id='foot'>
<div class="b_div">
<a href="#" class='b_link'>网站首页</a>
<a href="#" class='b_link'>企业合作</a>
<a href="#" class='b_link'>人才招聘</a>
<a href="#" class='b_link'>联系我们</a>
<a href="#" class='b_link'>常见问题</a>
<a href="#" class='b_link'>友情链接</a>
</div>
</footer>
</body>
</html>
