我是正在备战转职的程式小白,正在接受高强度的学习。这个系列将记录我经过沉澱所学后,归纳出制作个人网页的书写思路跟思考逻辑,希望对写网站感到迷茫的你有帮助~

我们书写的顺序如下:网页版头+导览的基本架构(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美化版头及导览。