我是正在備戰轉職的程式小白,正在接受高強度的學習。這個系列將記錄我經過沉澱所學後,歸納出製作個人網頁的書寫思路跟思考邏輯,希望對寫網站感到迷茫的你有幫助~
我們書寫的順序如下:網頁版頭+導覽的基本架構(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美化版頭及導覽。