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

最新推荐文章于 2022-10-03 13:48:50 发布

bkLion

最新推荐文章于 2022-10-03 13:48:50 发布

阅读量1k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/H_W_1212/article/details/104593189

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

一、先看效果图

二、代码实现

<!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="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="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="images/hexinsuyang.jpg" class="format" title="核心素养" ></a></div>
            <div class="n2"><a href="#" target="_blank"><img src="images/jingdaindaodu.png" class="format" title="经典导读"></a></div>
            <div class="n3"><a href="#" target="_blank"><img src="images/renwenqimeng.png" class="format" title="人文启蒙"></a></div>
            <div class="n4"><a href="#" target="_blank"><img src="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="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个多小时完成，这里面还是有一些地方需要学者注意的，比如相对定位与绝对定位等等。如果您想要产生动态的效果，那就点个赞，关注一波~，后续程序会更加精彩哈！

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

bkLion

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
HTML5新特性之标签实战应用：超星尔雅平台

关注重工黑大帅，学习不迷路一、先看效果图二、代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超星尔雅平台</title> <meta name="renderer" content="webk...
复制链接

扫一扫

专栏目录