用WebStorm開發，基於HTML5+css+JavaScript開發的前端頁面

       由於課程設計的安排，我是第一次使用WebStorm開發項目，之前基於HTML5+css+JavaScript開發的項目是在Eclipse或者My Eclipse上面開發，雖然也可以達到想要的效果但是過程較爲麻煩，修改代碼稍顯繁瑣，也用過VS開發前端頁面，直接可以拖動控件來實現頁面佈局，但是做出來的頁面有種“僵硬”的感覺（純屬個人看法）。
       現在使用WebStorm開發，感覺很好地結合了兩個開發環境的優勢，結合Google瀏覽器的使用能夠更好實現對代碼的調試，大家開發項目的時候我極力推薦使用Google瀏覽器進行測試，包括對代碼的分析，斷點的調試都特別的方便。
       下面我將介紹一下我課設學習中做出來的項目前端頁面：
       在項目中的企業項目裏面一共有三個頁面，再加上登錄頁面，項目一共有八個前端頁面，項目中的圖片及小圖標存放於項目文件夾中（可以自行創建），下面詳細展出效果圖及代碼；
效果圖如下：

圖1	圖2	圖3	圖4
圖5	圖6	圖7	圖8

頁面對應的HTML文件如下：

首先介紹css樣式：

代碼如下：

*{
    margin: 0;
    padding: 0;
}
body{
    /*rgb:red green blue*/
    background: rgb(244,244,246);
    padding-top: 44px;
    padding-bottom: 49px;
}
 .DS_header{
    background: rgb(40,133,202);
    line-height: 44px;
    font-size: 18px;
    color: white;
     text-align: center;
      width: 100%;
      left: 0;
      top: 0;
      position: fixed;
}
.DS_second_section img{
    width: 100%;
}
footer{
    display: table;
    width: 100%;
    background: black;
    height: 49px;
    left: 0;
    bottom: 0;
    position: fixed;
}
footer a{
    display: table-cell;
    width: 20%;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
footer a img{
    width: 18px;
}
footer a span{
    display: block;
    color: white;
    font-size: 12px;
}
.BP_first_section{
    display: table;
    width: 100%;
    background: rgb(244, 244, 246);
    height: 44px;
    left: 0;
    top: 44px;
    position: fixed;
}
.common_section img{
    width: 100%;
}
.BP_first_section a{
    display: table-cell;
    width: 33.3%;
    text-decoration: none;

    text-align: center;
    vertical-align: middle;
}
.BP_external_div{
    background: white;
    text-align: center;
}
.BP_external_div_sec{
    text-align: center;
}
.BP_span{
    font-size: 14px;
}
.BP_img{
    width: 100%;
}
.BP_inner_div{
    text-align: left;
    padding-left: 20px;
    font-size: 10px;
    color: gray;
    line-height: 2em;
}
.BP_first_p{
    font-size: 10px;
    color:gray;
}

PS---------------css樣式共分爲三種，如下：

外部樣式：當一個項目外部有多個地方樣式一樣的時候用外部樣式；
頁內樣式：出現的次數少，但代碼量大的時候使用；
行內樣式：當某個樣式代碼很少，但是出現此樣式的次數較多時使用；

介紹一下該css樣式中所涉及到的重要標籤：

link標籤中rel屬性：rel=“short icon” 特指瀏覽器中地址欄左側顯示的圖標，一般爲16*16大小；icon 指的是圖標格式爲png/gif/jpeg，尺寸一般爲16×16，24×24，36×36；
邊距標籤如下圖：
成行標籤：display：table；width：需求量
成列標籤：display：table-cell；width：需求量
垂直方向：text-align：center（居中）text-align：top（居上對齊）text-align：bottom（居下對齊）
display：block；顯示爲塊級元素，此元素前後會帶有換行符。
position：fixed；生成絕對定位的元素，相對於瀏覽器窗口進行定位。（通過left，top，right，bottom屬性進行規定）
text-top：把元素的頂端與元素字體的頂端對齊 text-bottom：把元素…低端對齊；
div標籤：簡單說就是分塊用的，
margin：0 auto；上下不動，水平居中；
height：50px ；line-height： 50px；它倆值一致的時候則垂直居中；
Z-index：數值自己設定；值越大優先級越高；

登錄頁面（圖8）

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<style>
    .L_second_div{
        text-align: center;
    }
    .L_head_img{
        margin-top: 50px;
    }
    .L_second_div img{
        margin-top: 50px;
    }
    .L_form_inner_div div span {
        padding-left: 15px;
        font-size: 20px;
        line-height: 50px
    }
    .L_form_inner_div div {
        height: 50px;
        border-bottom: 1px solid #dddddd
    }
    .L_form_inner_div {
        width: 90%;
        margin: 0 auto;
        border: 1px solid #cccccc;
        border-radius: 5px;
        background: white;
        margin-top: 30px;
        height: 100px;
    }
    input{
        outline: medium;
        background-color: transparent;
        border: 0;
    }
    .L_login_btn{
        font-size: 20px;
        line-height: 50px;
        color: white;
        height: 50px;
        width: 100%;
    }
    .L_login_div {
        height: 50px;
        background: rgb(32, 90, 163);
        width: 90%;
        border-radius: 10px;
        margin: 20px auto;
        text-align: center
    }
</style>
<body>
<!--第一部分-->
<header class="DS_header">
    <span>登錄</span>
</header>
<!--第二部分-->
<div class="L_second_div">
    <img class="L_head_img" src="Resource/head.png" alt="">
</div>
    <!--第三部分-->
    <form action="">
        <div class="L_form_div">
            <div class="L_form_inner_div">
                <div>
                    <span> 賬戶名：</span>
                    <input id="L_account" type="text"name="account" value=""><br>
                </div>
                <div>
                <span>密碼：</span>
                <input id="L_pwd" type="password"name="password" value=""><br>
                </div>
            </div>
            <div class="L_login_div">
                <input class="L_login_btn" type="button" value="登錄" id="L_btn" >
            </div>
        </div>
    </form>
    <script>
        var btn = document.querySelector("#L_btn")
        btn.οnclick= function () {
            var userName = encodeURIComponent(document.querySelector("#L_account").value);
            var pwd = encodeURIComponent(document.querySelector("#L_pwd").value);
            //第一步：創建一個請求對象（負責要數據）
        var xhr = new XMLHttpRequest();
        //    第二步：建立與服務端的連接（找到那個服務器去要數據）           xhr.open('post','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/login')
            //設置頭信息，告訴服務器讓數據以表單的形式傳遞過去
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            var par = "username=" + userName  + "&pwd=" + pwd;
        //    第三部：向服務端發送請求
            xhr.send(par);
        //    第四部：接收服務端返回的數據
            xhr.onreadystatechange = function (){
                //xhr.readyState=4代表數據請求完成； xhr.status == 200 代表數據返回成功
                if(xhr.readyState=4 && xhr.status == 200){
                    var responseData = JSON.parse(xhr.responseText)
                    var str = responseData.data;
                    if(str =="登錄成功"){
                        location.href = "DropletService.html";
                    }else {
                        alert(responseData.data);
                    }
                }
            }
        }
    </script>
</div>
</body>
</html>

PS--------------->在head標籤中<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 簡單理解爲適配器，去適應手機顯示屏幕的，是必須要寫的。這個登錄功能使用的是ajax技術去訪問數據庫進行驗證登錄的。

小滴服務（圖1）

代碼如下：

<!DOCTYPE html>
<!--HTML標籤的註釋方式-->
<!--標籤：雙標籤/單標籤-->
<!--行內標籤/塊級標籤-->
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
<!--頁內標籤-->
    <style>
        /*成行的的標籤寫法：display：table； width：需求值*/
        ul{
            display: table;
            width: 100%;
            background: white;
            height: 100px;
            margin-bottom: 10px;
        }
        /*成列的標籤寫法：display：table-cell； width：需求值*/
        li{
            display: table-cell;
            width: 33.3%;
            text-align: center;
            vertical-align: middle;
        }
        ul li span{
            display: block;
        }
        .DS_second_section img{
            margin-bottom: -1px;
        }
        .first_ul{
            margin-top: -6px;
        }
    </style>

</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>小滴服務</span>
</header>
<!--第二部分-->
<section class="DS_second_section">
    <img src="Resource/banner-1.png" alt="">
</section>
<!--第三部分-->
<section class="first_ul">
    <ul>
        <li>
            <img src="Resource/index1.png" alt="你的頁面錯誤啦！檢測啊">
            <span>企業項目</span>
        </li>
        <li>
            <img src="Resource/index2.png">
            <span>平臺風采</span>
        </li>
        <li>
            <img src="Resource/index3.png">
            <span>報名流程</span>
        </li>
    </ul>
    <ul>
        <li>
            <img src="Resource/index4.png" alt="">
            <span>客戶管理</span>
        </li>
        <li>
            <img src="Resource/index5.png">
            <span>財務管理</span>
        </li>
        <li>
            <img src="Resource/index6.png">
            <span>新聞公告</span>
        </li>
    </ul>
    <ul>
        <li>
            <img src="Resource/index7.png" alt="">
            <span>工程案例</span>
        </li>
        <li>
            <img src="Resource/index8.png">
            <span>修改密碼</span>
        </li>
        <li>
            <img src="Resource/index9.png">
            <span>會員註冊</span>
        </li>
    </ul>
    <ul>
        <li>
            <img src="Resource/index7.png" alt="">
            <span>工程案例</span>
        </li>
        <li>
            <img src="Resource/index8.png">
            <span>修改密碼</span>
        </li>
        <li>
            <img src="Resource/index9.png">
            <span>會員註冊</span>
        </li>
    </ul>
    <ul>
        <li>
            <img src="Resource/index7.png" alt="">
            <span>工程案例</span>
        </li>
        <li>
            <img src="Resource/index8.png">
            <span>修改密碼</span>
        </li>
        <li>
            <img src="Resource/index9.png">
            <span>會員註冊</span>
        </li>
    </ul>
</section>
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav11.png" alt="">
        <span style="color: red;">小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav20.png" alt="">
        <span>企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

企業項目（圖2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>創業項目</span>
</header>
<!--第二部分-->
<section class="BP_first_section">
    <a style="background: white" href="">
        <span style="color: rgb(63,149,211)">鑽石創業者</span>
    </a>
    <a href="BusinessProjectGold.html">
        <span>金牌創業者</span>
    </a>
    <a href="BusinessProjectSliver.html">
        <span>銀牌創業者</span>
    </a>
</section>
<section class="common_section">
    <img style="padding-top: 44px" src="Resource/banner2.png" alt="">
</section>
<div class="BP_external_div">
    <span class="BP_span">服務內容</span>
    <img class="BP_img" src="Resource/50w_1.png" alt="">
    <p class="BP_first_p">提供以上兩個學院的技術支持、諮詢服務、課件學習等內容</p>
</div>
<div class="BP_external_div_sec">
    <span class="BP_span">創業者享受的回報收益</span>
    <img class="BP_img" src="Resource/50w_2.png" alt="">
    <div class="BP_inner_div">
        <p>X : 渠道可享有的股份額度；</p>
        <p>y : 渠道個人業績流水總額累計；</p>
        <p>z : 歷年渠道全部各方業績流水總額累計；</p>
        <p>b : 宏鑫互聯網集團所擁有的上市或者充足公司縱谷本數；</p>
        <p>q : 宏鑫互聯網集團上市總股本數的20%;</p>
    </div>
</div>
<div class="BP_external_div">
    <span class="BP_span">獲得收益條件</span>
    <div class="BP_inner_div">
        <p>① N≥10人；</p>
        <p>② 業績流水≥1.2億。</p>
        <p>當滿足以上2個條件時，鑽石創業者才能取得期權。</p>
        <p>注：上面的y、z爲財務數據，由財務部門按期提供，錄入即可。</p>
    </div>
</div>
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span>小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav21.png" alt="">
        <span style="color: red;">企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

金牌創業者（圖3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--用來顯示網頭部的文字信息的標籤-->
    <title>課程設計</title>
    <!--link標籤用來鏈接外部資源的標籤-->
    <link rel="short icon" href="Resource/icon.png">
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>創業項目</span>
</header>
<section class="BP_first_section">
    <a href="BusinessProject.html"> <span>鑽石創業者</span> </a>
    <a style="background: white" href="BusinessProjectGold.html">
        <span style="color: rgb(63, 149, 211);">金牌創業者</span> </a>
    <a href="BusinessProjectSliver.html"> <span>銀牌創業者</span> </a>
</section>
<section class="common_section">
    <img style="padding-top: 44px" src="Resource/banner21.png" alt="">
</section>
<div class="BP_external_div">
    <span class="BP_span">服務內容</span>
    <img class="BP_img" src="Resource/30w_1.png" alt="">
    <p class="BP_first_p">提供以上兩個學院的技術支持、諮詢服務、課件學習等內容</p>
</div>
<div class="BP_external_div_sec">
    <span class="BP_span">創業者享受的回報收益</span>
    <img class="BP_img" src="Resource/30w_2.png" alt="">
    <div class="BP_inner_div">
        <p>X : 渠道可享有的股份額度；</p>
        <p>y : 渠道個人業績流水總額累計；</p>
        <p>z : 歷年渠道全部各方業績流水總額累計；</p>
        <p>b : 宏鑫互聯網集團所擁有的上市或者充足公司縱谷本數；</p>
        <p>q : 宏鑫互聯網集團上市總股本數的20%;</p>
    </div>
</div>
<div class="BP_external_div">
    <span class="BP_span">獲得收益條件</span>
    <div class="BP_inner_div">
        <p>① N≥10人；</p>
        <p>② 業績流水≥1.2億。</p>
        <p>當滿足以上2個條件時，鑽石創業者才能取得期權。</p>
        <p>注：上面的y、z爲財務數據，由財務部門按期提供，錄入即可。</p>
    </div>
</div>
<!--h5裏面新增的語義化標籤,它沒有特殊的意義,僅是用來增強程序的可讀性-->
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span>小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav21.png" alt="">
        <span style="color: red;">企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

銀牌創業者（圖4）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--用來顯示網頭部的文字信息的標籤-->
    <title>課程設計</title>
    <!--link標籤用來鏈接外部資源的標籤-->
    <link rel="short icon" href="Resource/icon.png">
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>創業項目</span>
</header>
<section class="BP_first_section">
    <a style="background: white" href="BusinessProject.html">
        <span>鑽石創業者</span>
    </a>
    <a href="BusinessProjectGold.html">
        <span>金牌創業者</span>
    </a>
    <a href="BusinessProjectSliver.html">
        <span style="color: rgb(63,149,211)">銀牌創業者</span>
    </a>
</section>
<section class="common_section">
    <img style="padding-top: 44px" src="Resource/banner2.png" alt="">
</section>
<div class="BP_external_div">
    <span class="BP_span">服務內容</span>
    <img class="BP_img" src="Resource/10w_1.png" alt="">
    <p class="BP_first_p">提供以上兩個學院的技術支持、諮詢服務、課件學習等內容</p>
</div>
<div class="BP_external_div_sec">
    <span class="BP_span">創業者享受的回報收益</span>
    <img class="BP_img" src="Resource/10w_2.png" alt="">
</div>
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span>小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav21.png" alt="">
        <span style="color: red;">企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

服務流程（圖5）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>服務流程</span>
</header>
<section class="common_section">
    <img src="Resource/banner3.png" alt="">
</section>
<section>
    <img style="margin: 10px 20px; width: 90%" src="Resource/process.png" alt="">
</section>
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span>小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav20.png" alt="">
        <span>企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav31.png" alt="">
        <span style="color: red;">服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

平臺風采（圖6）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
    <!--頁內標籤-->
    <style>
    article{
        margin: 20px;
    }
        h3{
            color: red;
            font-size: 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dddddd;
        }
        h4{
            font-size: 14px;
        }
        article p{
            text-indent: 2em;
            line-height: 2em;
            font-size: 12px;
        }
    </style>
    <meta charset="UTF-8">
    <title>李新浩</title>
</head>
<body>
<header class="DS_header">
    <span>平臺風采</span>
</header>
<!--第二部分-->
<section class="DS_second_section">
    <img src="Resource/banner4.png" alt="">
</section>
<!--第三部分-->
<article>
    <h3 id="title"> </h3>
    <h4 id="subTitle"> </h4>
    <p id="info"> </p>
    <script>
        //第一步：創建一個請求對象（負責要數據）
        var xhr = new XMLHttpRequest();
        //    第二步：建立與服務端的連接（找到那個服務器去要數據）
xhr.open('get','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus');
        //設置頭信息，告訴服務器讓數據以表單的形式傳遞過去
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //    第三部：向服務端發送請求
        xhr.send();
        //    第四部：接收服務端返回的數據
        xhr.onreadystatechange = function (){
            //xhr.readyState=4代表數據請求完成； xhr.status == 200 代表數據返回成功
            if(xhr.readyState=4 && xhr.status == 200){
                var responseData = JSON.parse(xhr.responseText);//json串   JSON.parse() 方法用於將一個 JSON 字符串轉換爲對象。
                var sa = responseData.data;
                var h3 = document.getElementById("title");
                var h4 = document.getElementById("subTitle");
                var p = document.getElementById("info");
                h3.innerHTML = sa.title;
                h4.innerHTML = sa.subTitle;
                p.innerHTML = sa.info;
            }
        }
    </script>
</article>
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span>小滴服務</span>
    </a>
    <a href="BusinessProject.html
">
        <img src="Resource/nav20.png" alt="">
        <span>企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav41.png" alt="">
        <span style="color: red;">平臺風采</span>
    </a>
    <a href="MyDroplet.html">
        <img src="Resource/nav50.png" alt="">
        <span>我的小滴</span>
    </a>
</footer>
</body>
</html>

PS--------------->該頁面中顯示的數據通過ajax技術去服務器獲取，之後在前端頁面顯示出來，ajax技術如何獲取後端數據在我的博客中有詳解。

我的小滴（圖7）

在這裏插入代碼片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>課程設計</title>
    <!--相對路徑/絕對路徑-->
    <link rel="short icon" href="Resource/icon.png">
    <!--stylesheet；用來加載外部樣式表-->
    <link rel="stylesheet" href="ExternalStyle.css">
    <style>
        .MD_external_div .MD_bg_img{
            width: 100%;
            z-index: -1;
        }
        .MD_external_div{
            position: relative;/*參照物*/
        }
        .MD_inner_div{
            left: 50%;
            top: 50%;
            margin-left: -33px;
            margin-top: -60px;
            position: absolute;
            width: 66px;
            height: 120px;
            text-align: center;
        }
        button{
            background: rgb(40,133,202);
            height: 20px;
            width: 66px;
        }
        .MD_third_div{
            border: 1px solid #cccccc;
            width: 90%;
            height: 50px;
            margin: 0 auto;
            border-radius: 5px;/*圓角*/
            line-height: 50px;
        }
        .MD_left_img{
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            margin-right: 20px;
        }
        .MD_right_img{
            float: right;
            margin-right: 10px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
<!--第一部分-->
<!--語義化標籤：增強代碼的可讀性-->
<header class="DS_header">
    <span>我的小滴</span>
</header>
<!--第二部分-->
<div class="MD_external_div">
    <img class="MD_bg_img" src="Resource/banner5.png" alt="">
    <div class="MD_inner_div">
        <img class="MD_head_img" src="Resource/head.png" alt="">
        <span>華杉科技</span>
        <button οnclick="exitLogin()">退出登錄</button>
        <script>
            function exitLogin() {
                location.href = "index.html"
            }
        </script>
    </div>
</div>
<!--第三部分-->
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_1.png" alt="">
    <span>我的客戶</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_2.png" alt="">
    <span>我的餘額</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_3.png" alt="">
    <span>註冊客戶</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_4.png" alt="">
    <span>修改密碼</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_1.png" alt="">
    <span>我的客戶</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_2.png" alt="">
    <span>我的餘額</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_3.png" alt="">
    <span>註冊客戶</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<div class="MD_third_div">
    <img class="MD_left_img" src="Resource/gr_4.png" alt="">
    <span>修改密碼</span>
    <img class="MD_right_img" src="Resource/jt.png" alt="">
</div>
<!--第四部分-->
<footer>
    <a href="DropletService.html">
        <img src="Resource/nav10.png" alt="">
        <span >小滴服務</span>
    </a>
    <a href="BusinessProject.html">
        <img src="Resource/nav20.png" alt="">
        <span>企業項目</span>
    </a>
    <a href="ServiceProcess.html">
        <img src="Resource/nav30.png" alt="">
        <span>服務流程</span>
    </a>
    <a href="Platform.html">
        <img src="Resource/nav40.png" alt="">
        <span>平臺風采</span>
    </a>
    <a href="DropletService.html">
        <img src="Resource/nav51.png" alt="">
        <span style="color: red;">我的小滴</span>
    </a>
</footer>
</body>
</html>

PS----------->頁面中有個“退出登錄”的按鈕，點擊按鈕會觸發onclick事件，進而執行JavaScript中的exitLogin()方法，該方法執行直接將頁面跳轉至登錄頁面，實現退出登錄功能；

用WebStorm開發，基於HTML5+css+JavaScript開發的前端頁面

首先介紹css樣式：

登錄頁面（圖8）

小滴服務（圖1）

企業項目（圖2）

金牌創業者（圖3）

銀牌創業者（圖4）

服務流程（圖5）

平臺風采（圖6）

我的小滴（圖7）

以上就是我的webstorm開發前端的學習之談啦，希望能給大家帶來幫助。

初始HTML靜態頁面------簡單總結！

navicat連接遠程mysql數據庫顯示2005 - unknown MySQL server host ‘xxxx ’ （0）錯誤

用WebStorm開發，基於HTML5+css+JavaScript開發的前端頁面

webStorm：即使正確的代碼也會提示綠色波浪線的解決方法

WebStorm前端開發分享：基於html5+css+js開發前端項目，用ajax技術獲取後端數據

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

linux以太網驅動總結