（HTML 結構、CSS 樣式、RWD 響應式、按鈕動畫與導覽列）的網頁版型綜合示範。
這個練習會教你如何建立一個常見的「英雄區 (Hero Section)」，這是現代網頁中最常見的開頭版型。
1. 綜合版型結構 (HTML)
我們將網頁分為三個部分：導覽列、主視覺區（Hero）、以及功能介紹區。
HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的綜合練習網頁</title>
</head>
<body>
<nav class="navbar">
<div class="logo">GEMINI<span>DESIGN</span></div>
<ul class="nav-links" id="nav-links">
<li><a href="#">首頁</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關於</a></li>
</ul>
<div class="menu-btn" id="menu-btn">☰</div>
</nav>
<header class="hero">
<div class="hero-content">
<h1>打造你的夢想網頁</h1>
<p>透過 HTML 與 CSS，你可以創造無限可能。從簡單的文字到精美的動畫，這就是前端開發的魅力。</p>
<div class="btn-group">
<button class="btn btn-primary">開始練習</button>
<button class="btn btn-outline">瞭解更多</button>
</div>
</div>
</header>
<section class="features">
<div class="card">
<h3>結構化</h3>
<p>使用 HTML5 語法建立清晰的內容骨架。</p>
</div>
<div class="card">
<h3>美感化</h3>
<p>利用 CSS3 讓你的網頁色彩奪目且具備質感。</p>
</div>
<div class="card">
<h3>響應式</h3>
<p>無論在手機或電腦上，都能完美呈現。</p>
</div>
</section>
</body>
</html>
2. 視覺美化與按鈕特效 (CSS)
CSS
<style>
/* 基礎重設 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
/* 導覽列 */
.navbar {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 8%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky; top: 0; z-index: 1000;
}
.logo { font-size: 24px; font-weight: bold; color: #333; }
.logo span { color: #3498db; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 30px; }
.nav-links a { text-decoration: none; color: #555; transition: 0.3s; }
.nav-links a:hover { color: #3498db; }
.menu-btn { display: none; font-size: 24px; cursor: pointer; }
/* 英雄區 */
.hero {
height: 80vh;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1350&q=80');
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
text-align: center; color: white; padding: 0 20px;
}
.hero-content h1 { font-size: 3rem; margin-bottom: 20px; }
.hero-content p { font-size: 1.2rem; max-width: 600px; margin-bottom: 30px; opacity: 0.9; }
/* 按鈕綜合應用 */
.btn-group { display: flex; gap: 15px; justify-content: center; }
.btn {
padding: 12px 30px; border-radius: 5px; cursor: pointer;
font-size: 16px; font-weight: bold; transition: all 0.3s ease;
border: none;
}
.btn-primary { background: #3498db; color: white; }
.btn-primary:hover { background: #2980b9; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(52,152,219,0.4); }
.btn-outline { background: transparent; color: white; border: 2px solid white; }
.btn-outline:hover { background: white; color: #333; }
/* 功能卡片區 */
.features { display: flex; padding: 50px 8%; gap: 20px; flex-wrap: wrap; }
.card {
flex: 1; min-width: 250px; padding: 30px;
background: #f9f9f9; border-radius: 10px; transition: 0.3s;
text-align: center; border-bottom: 4px solid transparent;
}
.card:hover { transform: translateY(-10px); border-bottom: 4px solid #3498db; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.card h3 { margin-bottom: 15px; }
/* 手機版 RWD */
@media (max-width: 768px) {
.nav-links { display: none; }
.menu-btn { display: block; }
.hero-content h1 { font-size: 2rem; }
}
</style>
3. 關鍵技巧解析
Flexbox 佈局：
在
.navbar中，我們用justify-content: space-between讓 Logo 和選單分開。在
.features中，我們用flex: 1讓三個卡片平分寬度。
層次感 (Glassmorphism / Overlay)：
在英雄區背景圖中使用了
linear-gradient的黑色半透明遮罩，這樣白色文字才會清晰。
按鈕動效：
使用了
transform: translateY(-3px)，讓滑鼠移上去時按鈕有「浮起來」的感覺，這比單純變色更有質感。
卡片設計：
加入
border-radius(圓角) 和box-shadow(陰影)，是現代 UI 設計的基本功。
沒有留言:
張貼留言