當(dāng)前位置：
  1. 首頁(yè)
  2. 知識(shí)學(xué)院
  3. 正文

在網(wǎng)頁(yè)設(shè)計(jì)中，制作一個(gè)專業(yè)的HTML5網(wǎng)站模板需要考慮多個(gè)方面，包括布局、樣式、功能和用戶體驗(yàn)。以下是一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)模板的源代碼示例，包括基本的布局和樣式設(shè)置。這個(gè)模板可以作為一個(gè)起點(diǎn)，幫助你創(chuàng)建更復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì).

HTML5網(wǎng)頁(yè)模板源代碼
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5網(wǎng)頁(yè)模板</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav {
background: #555;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
nav ul li a:hover {
color: #ccc;
}
.banner {
background: url(‘banner.jpg’) no-repeat center center;
background-size: cover;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
.banner h2 {
font-size: 36px;
margin: 0;
}
.banner p {
font-size: 18px;
}
.main-content {
padding: 20px 0;
}
.main-content h2 {
text-align: center;
color: #333;
}
.main-content p {
line-height: 1.6;
font-size: 16px;
}
.sidebar {
background: #e8e8e8;
padding: 20px;
margin-top: 20px;
}
.sidebar h3 {
color: #333;
}
.sidebar p {
line-height: 1.6;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<header>
<div class=”container”>
<h1>我的網(wǎng)站</h1>
</div>
</header>

<nav>
<div class=”container”>
<ul>
<li><a href=”#”>首頁(yè)</a></li>
<li><a href=”#”>關(guān)于</a></li>
<li><a href=”#”>服務(wù)</a></li>
<li><a href=”#”>聯(lián)系我們</a></li>
</ul>
</div>
</nav>

<section class=”banner”>
<div class=”container”>
<h2>歡迎來到我的網(wǎng)站</h2>
<p>這是一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)模板。</p>
</div>
</section>

<section class=”main-content”>
<div class=”container”>
<h2>關(guān)于我們</h2>
<p>這是一個(gè)示例段落，用于介紹網(wǎng)站的內(nèi)容或公司背景。您可以根據(jù)需要添加更多的信息和細(xì)節(jié)。</p>
</div>
</section>

<aside class=”sidebar”>
<div class=”container”>
<h3>最新資訊</h3>
<p>這里可以放置一些最新的新聞或公告。</p>
</div>
</aside>

<footer>
<div class=”container”>
<p>版權(quán)所有 &copy; 2025 我的網(wǎng)站</p>
</div>
</footer>
</body>
</html>
代碼說明
DOCTYPE: 聲明文檔類型為HTML5.
html: 根元素，lang屬性指定頁(yè)面語言.
head: 包含文檔的元數(shù)據(jù)，如字符集聲明、視口設(shè)置、標(biāo)題和樣式.
body: 包含網(wǎng)頁(yè)的可見內(nèi)容.
header: 網(wǎng)頁(yè)的頭部區(qū)域，通常包含網(wǎng)站的標(biāo)志和標(biāo)題.
nav: 導(dǎo)航欄，包含網(wǎng)站的主要鏈接.
section: 表示文檔中的一個(gè)獨(dú)立部分，如橫幅或主要內(nèi)容區(qū)域.
aside: 表示與頁(yè)面內(nèi)容稍微相關(guān)的部分，如側(cè)邊欄.
footer: 網(wǎng)頁(yè)的底部區(qū)域，通常包含版權(quán)信息和其他鏈接.
樣式說明
body: 設(shè)置字體、邊距和背景顏色.
container: 設(shè)置頁(yè)面內(nèi)容的寬度和居中對(duì)齊.
header: 設(shè)置頭部的背景顏色、文字顏色和內(nèi)邊距.
nav: 設(shè)置導(dǎo)航欄的背景顏色、文字顏色和內(nèi)邊距.
banner: 設(shè)置橫幅的背景圖片和文字顏色.
main-content: 設(shè)置主要內(nèi)容區(qū)域的內(nèi)邊距和文字樣式.
sidebar: 設(shè)置側(cè)邊欄的背景顏色、內(nèi)邊距和文字樣式.
footer: 設(shè)置頁(yè)腳的背景顏色和文字顏色.
這個(gè)模板提供了一個(gè)基本的HTML5網(wǎng)頁(yè)結(jié)構(gòu)和樣式，你可以根據(jù)具體需求進(jìn)一步擴(kuò)展和自定義內(nèi)容和樣式，例如添加JavaScript功能、響應(yīng)式設(shè)計(jì)等，以提升用戶體驗(yàn)和網(wǎng)站的功能性.