简单写一个慕课网的h5布局页面
以下部分为HTML结构代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IMOOC</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/favicon.png">
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="images/logo.png"></a>
<nav>
<a class="active" href="index.html">Home</a>
<a href="#">Course</a>
<a href="#">Actual</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="active"><img src="images/banner/banner1.jpg"></li>
<li class="left"><img src="images/banner/banner3.jpg"></li>
<li class="right"><img src="images/banner/banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="images/Course/05_05.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="images/Course/06_04.png"></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="images/Course/09_07.png"></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png"></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="images/article.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
<footer>
<div class="container">
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
<span>
<img src="images/icon/wechat.png">
<img src="images/icon/microblog.png">
<img src="images/icon/qq.png">
</span>
</div>
</footer>
</body>
</html>
以下部分为CSS表现层代码：
/* all tags */
*{
margin:0;
padding:0;
font-family:arial;
font-size:14px;
border:none;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
/* header */
header{
position:relative;
height:80px;
background:#000000;
}
/* 在header的下方加一个高度为7px的矩形框 */
header:after{
position:absolute;
width:100%;
height:7px;
content:'';
bottom:0;
left:0;
background:#d6d6d6;
}
/* 使container的内容呈现于所加矩形框之上 */
header>.container{
position:relative;
z-index:1;
width:1200px;
margin:0 auto;
}
header>.container>a{
display:block;
float:left;
margin:5px 25px;
}
header>.container>nav{
float:right;
}
/* nav */
/* 将a标签设置为块元素为它加宽高、背景颜色和hover效果 */
nav>a{
display:block;
float:left;
width:110px;
height:73px;
line-height:73px;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav>a:hover,nav>a.active{
padding-bottom:7px;
}
/* banner */
.banner{
position:relative;
background:#eaeaea;
}
/* 在banner的下方加一个高度为6px的矩形框 */
.banner:after{
position:absolute;
width:100%;
height:6px;
content:'';
bottom:0;
left:0;
background:#d6d6d6;
}
.banner>ul{
position:relative;
width:1490px;
height:538px;
margin:0 auto;
padding-top:10px;
}
.banner>ul>li{
position:absolute;
width:610px;
height:300px;
overflow:hidden; /* 隐藏元素内容溢出的部分*/
}
/* 设置z-index，使li.active呈现在最上层 */
.banner>ul>li.active{
z-index:2;
width:960px;
height:460px;
top:37px;
left:0;
right:0;
margin:auto;
border:1px solid #ffffff;
box-shadow:0 30px 140px 22px rgba(0,0,0,.35);
}
.banner>ul>li.left{
z-index:1;
top:0;
left:0;
bottom:0;
margin:auto;
box-shadow:0 3px 7px 0 rgba(0,0,0,.35);
}
.banner>ul>li.right{
z-index:1;
top:0;
right:0;
bottom:0;
margin:auto;
box-shadow:0 3px 7px 0 rgba(0,0,0,.35);
}
/* 适当调整图片大小、位置 */
.banner>ul>li>img{
position:absolute;
height:100%;
left:-30%;
}
/* main */
.main{
width:1200px;
height:473px;
margin:34px auto 0;
}
.main h1{
font-size:30px;
font-weight:lighter;
margin-bottom:23px;
}
.main h1 samp{
font-size:30px;
color:#7c7c7c;
}
.main>aside{
float:left;
width:450px;
}
.main>aside>dl{
position:relative;
display:block;
height:74px;
margin-bottom:17px;
}
.main>aside>dl>dt{
position:absolute;
display:block;
font-size:16px;
line-height:16px;
font-weight:bold;
text-decoration:underline;
top:-1px;
left:92px;
}
.main>aside>dl>dd:first-of-type{
position:absolute;
left:0;
}
.main>aside>dl>dd:last-of-type{
position:absolute;
top:20px;
left:90px;
}
.main>article{
float:right;
width:720px;
overflow:hidden;
}
.main>article>p,.main>article>img{
margin-bottom:20px;
}
/* footer */
footer{
position:relative;
background:#000000;
}
/* 在footer的上方加一个高度为6px的矩形框 */
footer:before{
position:absolute;
z-index:-1;
width:100%;
height:6px;
content:'';
top:-6px;
left:0;
background:#d6d6d6;
}
footer>.container{
width:1200px;
height:64px;
margin:0 auto;
}
footer>.container>p{
float:left;
line-height:64px;
color:#ffffff;
}
footer>.container>span{
display:block;
float:right;
margin:14px 40px;
}
/* 设置图片透明度，使鼠标放上图片时有颜色加深的效果 */
footer>.container>span>img{
margin-left:4px;
opacity:.7;
}
footer>.container>span>img:hover{
opacity:1;
cursor:pointer;
}
以下为Chrome浏览器运行效果：
以上代码可以作为练习使用，要多敲、多练。对你有用、可以帮助到你的话麻烦点个赞再走吧，啾咪！
