iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

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

我們書寫的順序如下:網頁版頭+導覽的基本架構(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美化版頭及導覽。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言