关注重工黑大帅，学习不迷路

一、先看效果图

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超星尔雅平台</title><meta name="renderer" content="webkit"><meta http-equiv="Refresh" content="1"><meta name="keywords" content="超星尔雅平台"><meta name="description" content="这是一个非常好的学习平台，名为超星尔雅平台。"><meta name="author" content="重工黑大帅">
</head>
<style type="text/css">* {margin: 0;padding: 0;}a {text-decoration: none;color: black;}ul {display: inline-block;}li {list-style: none;}image {border: 0;}body {font-family: Arial,"Microsoft YaHei UI";border:0;}.clears {clear: both;height: 0;line-height: 0;font-size: 0;overflow: hidden;}.all{width: 1900px;height: 722px;}.total {height: 90px;width: 1900px;}.logo {height: 60px;width: 100px;margin-top: 30px;margin-left: 100px;float: left;animation: logo_big 1s infinite alternate;border-bottom: 0;display: inline;}@keyframes logo_big{0%{opacity: 0;transform: scale(1,1);}100%{opacity: 1;transform: scale(1.4,1.4);}}.content {width: 600px;height: 50px;position: relative;margin-left: 150px;float: left;}.content ul li {float: left;vertical-align: center;padding-top: 20px;}.word {font-size: 25px;width: 130px;}.content .word a:link{color: black;}.content .word a:hover{color: red;}.search {width: 360px;height: 60px;float: left;position: relative;margin-left: 40px;margin-top: 20px;}.search .input {width: 300px;height: 50px;font-size: 17px;padding-left: 50px;background-color:white;}.search .seek{background: url(images/seek.png) no-repeat;background-size: 40px 40px;width: 60px;height:40px;margin-top: 4px;margin-left: 3px;position:absolute;}.search a:link{color: black;}.search a:hover{color: red;}.user {width: 440px;height: 80px;float: left;position: relative;margin-left: 20px;margin-top: 10px;}.user .people{background: url(images/login.png) no-repeat;background-size: 60px 60px;width: 70px;height:70px;margin-top: 4px;float: left;margin-left: 40px;}.login{width:215px ;height:70px;line-height: 60px;font-size: 25px;padding-top: 3px;float: right;margin-left: 20px;}.register{width:115px ;height:70px;padding-left: 50px;line-height: 60px;font-size: 25px;padding-top: 3px;margin-left: 80px;}.login a:link,.register a:link{color: black;}.login a:hover,.register a:hover{color: red;}.banner{width: 1900px;height: 700px;}.bgimg{width: 1900px;height: 700px;}.main{width: 1900px;height: 350px;margin-top: 20px;}.common{width: 600px;height: 150px;margin-left: auto;margin-right: auto;text-align: center;font-size: 30px;}.title{padding-top: 40px;}.english{padding-top: 20px;}.style{width: 600px;height: 3px;background:linear-gradient(to left,#eeffee,#b6b6b6,#eeffee);text-align: center;}.image{width: 1900px;height: 380px;}.format{width: 370px;height: 300px;margin-top: 60px;border-radius: 10px;}.n1{position: relative;float: left;padding-left: 100px;}.n2{position: relative;float: left;padding-left: 70px;}.n3{position: relative;float: left;padding-left: 70px;}.n4{position: relative;float: left;padding-left: 70px;}.course{width: 200px;height: 60px;margin-left: auto;margin-right: auto;margin-top: 20px;background-color:white;line-height: 60px;font-size: 30px;border: 1px solid gray;text-align: center;}.course a:link{color: gray;}.course a:hover{color: red;}.footer{width: 1900px;height: 100px;margin-top: 290px;border: 1px solid beige;}.chaoxing{width: 100px;height: 100px;margin-left: 400px;float: left;margin-top: 20px;}.copy{width: 900px;height: 100px;float: left;position: relative;left: 200px;font-size: 20px;font-weight: bold;}.about{margin-top: 20px;margin-left: 400px;font-weight: bold;}.blackking{margin-top: 15px;margin-left: 400px;}
</style>
<body>
<div class="all">
<!--header-->
<header><div class="total"><div class="logo"><a href="http://erya.mooc.chaoxing.com/" target="_blank" title="网页logo"><img src="data:images/logo.png" width="90" height="35" alt="网页logo"></a></div><nav><div class="content"><ul><li class="word"><a href="http://erya.mooc.chaoxing.com/" target="_blank" title="首页"><p>首页</p><span>Home</span></a></li><li class="word"><a href="http://erya.mooc.chaoxing.com/courses" target="_blank" title="课程"><p>课程</p><span>Course</span></a></li><li class="word"><a href="http://erya.mooc.chaoxing.com/service" target="_blank" title="服务"><p>服务</p><span>Service</span></a></li><li class="word"><a href="http://erya.mooc.chaoxing.com/resource" target="_blank" title="资源"><p>资源</p><span>Resourse</span></a></li></ul></div><div class="search"><a href="http://erya.mooc.chaoxing.com/search?val=" target="_blank" title="搜索图标"><i class="seek"></i></a><input type="text" class="input" placeholder="请输入课程、教师、专题、讲座名称" title="输入框"></div><div class="user"><a href="http://passport2.chaoxing.com/wlogin" target="_blank" title="登录logo"><i class="people"></i></a><p class="login"><a href="http://passport2.chaoxing.com/wlogin" target="_blank" title="登录">已有账号？去登录</a></p><p class="register"><a href="#" target="_blank" title="点击注册">注册</a></p></div></nav></div>
</header>
<!--header-end--><!--banner-->
<div class="banner"><a href="https://mooc1.chaoxing.com/course/207733548.html" target="_blank" title="背景图片"><img src="data:images/banner.png" class="bgimg" alt="背景图片"width="1902" height="570"></a>
</div>
<!--banner-end--><!--main--><main class="main"><div class="common"><p class="title"><strong>重磅推荐</strong></p><p class="english">HIGHLY&ensp;RECOMMENDED</p><br><p class="style"></p></div><div class="image"><div class="n1"><a href="#" target="_blank"><img src="data:images/hexinsuyang.jpg" class="format" title="核心素养" ></a></div><div class="n2"><a href="#" target="_blank"><img src="data:images/jingdaindaodu.png" class="format" title="经典导读"></a></div><div class="n3"><a href="#" target="_blank"><img src="data:images/renwenqimeng.png" class="format" title="人文启蒙"></a></div><div class="n4"><a href="#" target="_blank"><img src="data:images/shidaijujiao%20.png" class="format" title="时代聚焦"></a></div></div><div class="course"><a href="http://erya.mooc.chaoxing.com/courses" title="全部课程">全部课程</a></div></main>
<!--main--><!--footer部分--><footer><div class="footer" ><div class="chaoxing"><a href="http://erya.mooc.chaoxing.com/" target="_blank" title="网页logo"><img src="data:images/logo.png" width="150" height="70" alt="网页logo"></a></div><div class="copy"><p class="about"><a href="http://erya.mooc.chaoxing.com/about" target="_blank" title="关于尔雅">关于尔雅</a>&ensp;&ensp;|&ensp;&ensp;<a href="http://erya.mooc.chaoxing.com/faq" target="_blank" title="常见问题">常见问题</a>&ensp;&ensp;|&ensp;&ensp;<a href="http://www4c1.53kf.com/webCompany.php?arg=10097821&style=1" target="_blank" title="在线客服">在线客服</a>&ensp;&ensp;|&ensp;&ensp;<a href="http://ananas.mooc1.mti100.com/tologin?fid=776" target="_blank" title="后台管理">后台管理</a></p><p class="blackking">Copyright&copy;2020 本网页最终解释权归重工黑大帅所有</p></div></div></footer><!--footer-end-->
<div class="clears"></div>
</div>
</body>
</html>

三、过程分析

（一）对代码进行修改后想快速看运行后的效果，可以在标签中间添加如下代码：

<meta http-equiv="Refresh" content="1">

说明：上面这行代码表示每1s中刷新一次运行后的网页，Ctrl+Shift+F10为运行的快捷键

（二）在提交项目之前看自己的浏览器缩放率是否为100%，比如下图就因为缩放率为200%换成100%就出现错误：

出现错误也不要太慌张，调整一下width（宽度）和height（高度）就行啦，尽量不要犯这类错误
（三）部分地方用到浮动(float)的知识，接下来的文章会给大家一一讲清楚的，记得关注，点个赞支持一下:

常用的有：
float:left;
float:right;
float:none;
当然少不了清除浮动：
clear:left;
clear:right;
clear:both;

（四）打印一条两端都为虚线的直线，这里可以采用背景样式实现：

background:linear-gradient(to left,#eeffee,#b6b6b6,#eeffee);

代码说明：属性background表示背景颜色，linear-gradient表示一个实现变化的函数，to left表示的意思就是从左往右，后面这三个颜色值表示从左边开始表现为#eeffee颜色，中间为#b6b6b6颜色，右边为#eeffee颜色，效果如下：

（五）素材图标
百度上的素材图标一搜就有很多，这里给大家推荐一个网站（只限用于学习：阿里矢量图标）：

点击进行阿里矢量图标下载

（六）本网页我差不多花了3个多小时完成，这里面还是有一些地方需要学者注意的，比如相对定位与绝对定位等等。如果您想要产生动态的效果，那就点个赞，关注一波~，后续程序会更加精彩哈！

关注重工黑大帅，学习不迷路

HTML5新特性之标签实战应用：超星尔雅平台相关推荐

HTML5新特性之标签使用：header、nav、aside、main、footer......
关注重工黑大帅,学习不迷路一.概念理解 header 一般放置在页面的顶部或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题等信息 nav 页面导航 aside 侧边栏区域 main 注内容 ...
HTML5新特性及新标签归纳
1.HTML5新特性归纳 1)语义化 2)本地存储 3)设备兼容 4)连接特性,能够帮助我们将数据推送到客户端 5)网页多媒体特性 6)三维.图形及特效特性 7)性能与集成特性 8)css3特性 2. ...
HTML5新特性归纳和同类比较
第一章 HTML5定义什么是 HTML5? HTML5 是下一代HTML标准. HTML , HTML 4.01的上一个版本诞生于1999年.自从那以后,Web世界已经经历了巨变. HTML5 仍处 ...
html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
利用HTML5新特性实现拖拽交换表格单元格元素
利用HTML5新特性实现拖拽交换表格单元格元素 HTML5新特性:拖放拖放拖放(Drag 和 Drop)是很常见的特性.它指的是您抓取某物并拖入不同的位置. 拖放是 HTML5 标准的组成部分:任 ...
html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
【HTML5新特性】
HTML5新特性一.语义标签二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性三.音频和视频四.canvas 五.SVG 六.地理位置七.拖放API 八.web Wor ...
html5新特性有哪些？
一省:HTML 1. html5新特性有哪些? 新增语义化标签:header.nav.aside.article.section.footer 拖放属性:drag/drop.拖放是一种常见的特性,即抓 ...
HTML5新特性小结
HTML5 新特性新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header ...
Html5新特性归纳
Html5新特性文章目录 Html5新特性一.简介二.十大新特性 1.语义化结构化标签 1.section 2.header 3.footer 4.nav 5.article 6.aside 7 ...

HTML5新特性之标签实战应用：超星尔雅平台

关注重工黑大帅，学习不迷路

一、先看效果图

二、代码实现

三、过程分析

点击进行阿里矢量图标下载

关注重工黑大帅，学习不迷路

HTML5新特性之标签实战应用：超星尔雅平台相关推荐

最新文章

热门文章