在現代互聯網中，網頁設計是用戶體驗的關鍵部分。一個美觀且功能齊全的網頁可以吸引更多的用戶并提高用戶留存率。本文將介紹一個基本的網頁設計模板，并提供相應的HTML代碼示例。
HTML代碼示例
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>網頁設計模板</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<!– 頭部導航欄 –>
<header>
<nav>
<ul>
<li><a href=”#home”>首頁</a></li>
<li><a href=”#about”>關于我們</a></li>
<li><a href=”#services”>服務</a></li>
<li><a href=”#contact”>聯系我們</a></li>
</ul>
</nav>
</header>
<!– 主要內容區域 –>
<main>
<!– 首頁部分 –>
<section id=”home”>
<h1>歡迎來到我們的網站</h1>
<p>這里是一些介紹文字…</p>
</section>
<!– 關于我們部分 –>
<section id=”about”>
<h2>關于我們</h2>
<p>我們是一家專注于網頁設計和開發的公司…</p>
</section>
<!– 服務部分 –>
<section id=”services”>
<h2>我們的服務</h2>
<ul>
<li>網頁設計</li>
<li>UI/UX 設計</li>
<li>前端開發</li>
<li>后端開發</li>
</ul>
</section>
<!– 聯系我們部分 –>
<section id=”contact”>
<h2>聯系我們</h2>
<form action=”#”>
<label for=”name”>姓名:</label>
<input type=”text” id=”name” name=”name”><br>
<label for=”email”>電子郵件:</label>
<input type=”email” id=”email” name=”email”><br>
<label for=”message”>信息:</label>
<textarea id=”message” name=”message”></textarea><br>
<button type=”submit”>提交</button>
</form>
</section>
</main>
<!– 頁腳 –>
<footer>
<p>© 2023 網頁設計模板. All rights reserved.</p>
</footer>
</body>
</html>
CSS樣式 (styles.css)
css
/* 通用樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* 頭部導航欄樣式 */
header {
background-color: #333;
color: white;
padding: 10px 0;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav ul li {
float: left;
}
header nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header nav ul li a:hover {
background-color: #111;
}
/* 主要內容區域樣式 */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
/* 頁腳樣式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
總結
以上是一個基本的網頁設計模板，包括頭部導航欄、主要內容區域和頁腳。通過使用HTML和CSS，可以輕松創建一個結構清晰且美觀的網頁。當然，根據具體需求，還可以進一步擴展和自定義這個模板。希望這篇文章對你有所幫助！
