關注重工黑大帥，學習不迷路

一、先看效果圖

二、代碼實現

<!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個多小時完成，這裏面還是有一些地方需要學者注意的，比如相對定位與絕對定位等等。如果您想要產生動態的效果，那就點個贊，關注一波~，後續程序會更加精彩哈！

HTML5新特性之標籤實戰應用：超星爾雅平臺

關注重工黑大帥，學習不迷路

一、先看效果圖

二、代碼實現

三、過程分析

點擊進行阿里矢量圖標下載

關注重工黑大帥，學習不迷路

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

HTML5新特性之標籤實戰應用：超星爾雅平臺

Java疑問解答第一篇：類體中可以創建對象並調用方法嗎

Java第二十九篇：applet程序玩弄五子棋

谷歌瀏覽器顯示無法訪問此網站或響應時間過長（ERR_CONNECTION_TIMED_OUT），解決辦法竟是....

HTML打印課程表，剖析colspan、rowspan，小白看了也能懂

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結