手把手写一个慕课网的h5布局页面

简单写一个慕课网的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="data: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="data:images/banner/banner1.jpg"></li><li class="left"><img src="data:images/banner/banner3.jpg"></li><li class="right"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data:images/icon/wechat.png"><img src="data:images/icon/microblog.png"><img src="data: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浏览器运行效果：

以上代码可以作为练习使用，要多敲、多练。对你有用、可以帮助到你的话麻烦点个赞再走吧，啾咪！

手把手写一个慕课网的h5布局页面相关推荐

【恢复】慕课网《网页布局基础》学习笔记
好久之前,最初入坑前端时的学习笔记.那时候「慕课网」的几个路径还是免费的,也有好几个跟网页布局有关的课程,其中有一个叫<网页布局基础>讲得很棒,那时候刚好喜欢上 markdown 写作,于 ...
[html] 写一个垂直的三栏布局，第一栏固定顶部，中间铺满，第三栏固定底部
[html] 写一个垂直的三栏布局,第一栏固定顶部,中间铺满,第三栏固定底部好像有几种写法我个人比较喜欢的是, <style> html, body { margin: 0; padd ...
[html] 写一个滚动吸顶的布局
[html] 写一个滚动吸顶的布局 position: sticky; top:20px: 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...
弄一个html的登录页面,使用HTML写一个简单的跳转登录页面
最近在学习前端的知识,于是就想写一个简单的页面跳转,必须是勾选了"我同意"这个选项以后才能跳转,否则不能,不废话,直接上代码. 首先是第一个页面:testlogin1.html h ...
java写一个外网访问的接口_【JAVA基础】一个案例搞懂类、对象、重载、封装、继承、多态、覆盖、抽象和接口概念及区别（中篇）...
0 前言初学JAVA时,总会对一些概念一知半解,相互混淆,不明其设计的用意,如类.对象.重载.封装.继承.多态.覆盖.抽象类.接口概念.为便于理解和巩固,本文将基于一个案例及其变形,展现各个概念的定 ...
java写一个外网访问的接口_Java程序员如何入门？教你写第一个程序
大家都知道,Java是一门面向对象的编程语言,不仅吸收了C++的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大.简单易用. 另外,Java允许程序员以优雅的思维方 ...
手把手写一个vscode翻译插件
1. 背景写这篇文章的初衷是看到vscode市场上的中英翻译插件都是将翻译结果以弹窗的形式做的,体验感非常不好.如果有像有道字典那种打开一个弹窗或者新tab的翻译面板来进行使用就好了.但是找了很久都 ...
java写一个外网访问的接口_不是吧不是吧！随便写的一个API竟获得 2.5 亿的访问量...
简评:作者随手在 Stackoverflow 回答了一个问题,几个月之后,竟发现这个回答带来了 2.5 亿次的 API 访问.作者还因此成立了公司专门运作这个 API. 以下我仅代表原作者. 推广很难 ...

手把手写一个慕课网的h5布局页面

简单写一个慕课网的h5布局页面

手把手写一个慕课网的h5布局页面相关推荐

最新文章

热门文章