從0開始製作個人網頁_入門版ep1

#html #css 網頁製作網頁入門網頁基礎

jenna888 2024-10-11 16:43:52 ‧ 389 瀏覽

分享至

我是正在備戰轉職的程式小白，正在接受高強度的學習。這個系列將記錄我經過沉澱所學後，歸納出製作個人網頁的書寫思路跟思考邏輯，希望對寫網站感到迷茫的你有幫助～

我們書寫的順序如下：網頁版頭+導覽的基本架構(html)>美化版頭+導覽(css)>設定版頭的RWD(css)>網頁內容的基本架構(html)>美化內容+排版(css)。

首先在html裡書寫網頁版頭+導覽的基本架構：

<!DOCTYPE html>
<html lang="zh-hant-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個個人網頁</title>
</head>
<body>
    <header class="header">
        <div class="logo"><a href="#">Jenna Web</a></div>
        <div class="menu-icon">Menu</div>
        <nav class="navbar">
            <ul class="primary">
                <li><a href="">About</a></li>
                <li><a href="">Experience</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

上面這串如果有看不懂的地方，建議先去了解一下html的基礎知識，比如html文字架構、撰寫基礎等。如果你都看懂了，請前往下一篇，我們將使用css美化版頭及導覽。