初涉html（第一個站點+上傳github及一些坑）

CCmango208發表於2020-12-20
HTMLGithub

文章目錄

前言

初涉html的簡單記錄
ps：小白的第一篇blog（盡力讓看客老爺們能看下去QAQ）

一、初學html

人生的第一個html

txt文字寫html程式碼真的笨重

所以我選擇了vscode（yyds）

二、工具準備

 vscode  Firefox瀏覽器（其他應該也可以）

三、CODING

1.前期準備

將一個新建資料夾拖入vscode

即可以在vscode裡面建立html檔案及附帶資料夾

html檔案及img、css在裡面建立即可
在資料夾裡面的html拖入瀏覽器（如firefox）

改完程式碼可以即時重新整理即時顯示，很方便

2.站點程式碼實現

主要是寫一個靜態站點，所以程式碼如下（尚未註釋）：


html 程式碼 
<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color: blue;
            }
        </style>
        <link rel="stylesheet" href="./css/style.css">
        <title>We All Love Studying?!</title>
    </head>
    <body>
        <div class="container">
            <h1>
                Come to Study?
            </h1>
            <p id="firstp">
                <em>歡迎來到本網站，請選擇你此時的選項</em>
            </p>
            <br>
                <p>
                    製作人：楊鑫  學號：...4629
                </p>
                <p>
                    <a href="https://blog.csdn.net/CCmago?spm=1000.2115.3001.5343">個人主頁</a>
                </p>
            <br>
            <div class="block">
                <h3 id="video">視訊休閒</h3><img src="./img/vcat.jpg">
                  <div class="list">
                      <ul>
                          <li><a href="https://www.bilibili.com/">當然是嗶哩嗶哩啦</a></li>
                          <br>
                          <li><a href="https://v.qq.com/?ptag=qqbsc">我選擇騰訊視訊</a></li>
                          <br>
                          <li><a href="https://www.iqiyi.com/?vfm=m_303_qqll">看視訊還是愛奇藝強</a></li>
                      </ul>
                  </div>
            </div>
            <div class="block">
                <h3 id="video">快樂學習？</h3><img src="./img/swe.jpg">
                  <div class="list">
                      <ul>
                          <li><a href="https://www.bilibili.com/">還是嗶哩嗶哩啦（有面子）</a></li>
                          <br>
                          <li><a href="https://https://www.csdn.net/">程式猿之天堂（CSDN）</a></li>
                          <br>
                          <li><a href="https://www.icourse163.org/">中國mooc，來康康？</a></li>
                      </ul>
                  </div>
            </div>
            <div class="block">
                <h3 id="video">痛苦遊戲？</h3><img src="./img/dgame.jpg">
                  <div class="list">
                      <ul>
                          <li><a href="http://www.4399.com/">童年回憶（是什麼呢？）</a></li>
                          <br>
                          <li><a href="https://lol.qq.com/act/a20201211startgame/index.shtml?e_code=507042">來一把緊張刺激的英雄聯盟！</a></li>
                          <br>
                          <li><a href="http://www.4399.com/flash/18012.htm#search3">瘋狂的戴夫</a></li>
                      </ul>
                  </div>
            </div>
            <div class="clear"></div>
            <h2>別走開！！！</h2>
            <div class="last-block">
                <h3>來做一道思維題？</h3>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;一個人在林中散步時，無意中聽到了幾個強盜在商量如何分贓。強盜們說，如果每人分6匹布，則剩餘5匹;如果每人分7匹布，則少8匹。請問：共有幾個強盜?幾匹布?
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;答案在黑框內
                </p>
                <div class="ans">
                    13個強盜  83布匹
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>

內建css程式碼 
body{
    background-color: whitesmoke;
    color: bisque;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font: bold 16px Arial,Helvetica,sans-serif;
    line-height: 2.2em;
}
.container{
    width: 90%;
    margin: auto;
}
#firstp{
    position: relative;
    left: 20px;
}
h1{
    background-color: white;
}
h3{
    color: aqua;
}
h4{
    position: relative;
    left:10px;
}
.video{

}
.block{
    float: left;
    border: 1px #ccc;
    width: 30%;
    box-sizing: border-box;
    background-color: rgb(181, 183, 194)
}
.left-block{
    float: left;
}
.right-block{
    float: right;
    border: 30%;
    box-sizing: border-box;
}
.clear{
    clear:both;
}
.ans {
    left: 100px;
    border-radius: 5px;
    position: relative;
    background-color: black;
    width: 100px;
    height: 100px;
    text-align: center;
    color: black;
}

.ans:hover {
    border-radius: 5px;
    border: 1px solid darkblue;
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    box-shadow: 10px 10px 10px grey;
    
}

3.順便放個github？



網頁展示效果如下（僅pc端可以檢視）

https://ccmango208.github.io/My-htmls/xy4629/index.html


放的時候沒經驗+英語差（比如我）炒雞容易懵

另千萬不要忘了publish倉庫（不然會無法直接訪問放置在倉庫裡面的html檔案）

最後直接訪問html檔案的通用格式是
https://（你的使用者名稱）.github.io/（這裡填html檔案在倉庫裡的目錄位置ps：參照上文我的地址）


在這裡插入圖片描述

總結

萬事開頭難（又是一次毫無意外肝到了凌晨）
第一次真的是really懵，在此感謝help me的夜宵小隊成員 小駿和myjj
完結撒花！！!

相關文章