最新html5 css3網頁程式設計
HTML5和CSS3是構建現代Web頁面的重要工具。以下是一個基本的HTML5和CSS3網頁設計的例子：
HTML部分
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>歡迎來到我的網頁</h1>
</header>
<nav>
<ul>
<li><a href="#section1">部分一</a></li>
<li><a href="#section2">部分二</a></li>
<li><a href="#section3">部分三</a></li>
</ul>
</nav>
<section id="section1">
<h2>部分一標題</h2>
<p>這是部分一的內容。</p>
</section>
<section id="section2">
<h2>部分二標題</h2>
<img src="image.jpg" alt="圖片描述">
</section>
<section id="section3">
<h2>部分三標題</h2>
<p>這是部分三的內容。</p>
</section>
<footer>
<p>© 2023 我的網頁</p>
</footer>
</body>
</html>CSS部分 (styles.css)
/* 樣式表頭部 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 頁面頭部 */
header {
background-color: #f8f9fa;
padding: 20px;
}
h1 {
color: #333;
}
/* 導航欄 */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav li a {
display: block;
padding: 10px;
text-decoration: none;
}
/* 部分樣式 */
section {
margin-bottom: 20px; /* 根據需要調整 */
}
section h2 { /* 標題樣式 */ }
section img { /* 圖片樣式 */ }
/* 頁腳樣式 */
footer {
background-color: #333; /* 與背景顏色匹配 */
color: #fff; /* 與文本顏色匹配 */
padding: 10px; /* 根據需要調整 */
}以上只是一個基本的示例，你可以根據需要添加更多的HTML元素和CSS樣式。HTML5提供了更多的語義標籤，如header、nav、section、footer等，它們都有各自的屬性可以定義網頁的結構和布局。CSS3則提供了許多新的特性，如漸變、陰影、動畫等，使網頁設計更加豐富多彩。如果你需要更複雜的布局或動畫效果，可能需要使用JavaScript或其他庫。