【HTML】個人博客頁面

頁面視圖?編輯

頁面代碼

解釋：

HTML (<body>):
- 使用了更加語義化的HTML5標簽，例如<header>, <main>, <article>, <footer>。
- 文章列表使用了<article>包裹，結構清晰。
- 添加了分頁導航。
- 使用了Font Awesome圖標，記得替換your-font-awesome-kit.js為你的項目中的Font Awesome。
CSS (<style>):
- 使用了Noto Serif SC作為主要字體，這是一種襯線字體，更適合博客的風格。
- 整體顏色方案更加清新自然，使用了綠色的主色調。
- 對header和footer進行了美化，增加了陰影和過渡效果。
- 文章列表和側邊欄的樣式更加精致，使用了圓角和更柔和的陰影。
- 增加了更多的hover效果，例如鏈接下劃線動畫、按鈕和文章的輕微上移效果。
- 使用了Flexbox布局，使頁面結構更加靈活。
- 添加了響應式設計，在移動設備上也能有良好的瀏覽體驗。
JavaScript (<script>):
- 包含了平滑滾動效果，點擊#開頭的鏈接時頁面會平滑滾動到對應位置。

如何使用：

將代碼保存為HTML文件（例如 index.html）。
在瀏覽器中打開該HTML文件。

頁面視圖

頁面代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的精美博客</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet"><style>body {font-family: 'Noto Serif SC', serif; /* 使用 Noto Serif SC */margin: 0;padding: 0;background-color: #f8f8f8;color: #333;line-height: 1.7; /* 增加默認行高 */}.container {max-width: 1200px; /* 增大最大寬度 */margin: 40px auto; /* 增加上下外邊距 */padding: 0 30px; /* 增加左右內邊距 */}header {background-color: #4CAF50; /* 更現代的顏色 */color: white;padding: 25px 0; /* 增加padding */margin-bottom: 60px; /* 增加下外邊距 */box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 增加陰影 */}header .container {display: flex;justify-content: space-between;align-items: center;}.logo {font-size: 2.2em; /* 增大logo字體 */font-weight: bold;transition: transform 0.2s ease-in-out; /* 添加過渡效果 */}.logo:hover {transform: scale(1.05); /* 放大效果 */}nav ul {list-style: none;padding: 0;margin: 0;display: flex;}nav ul li {margin-left: 30px; /* 增加間距 */}nav ul li a {color: white;text-decoration: none;font-size: 1.1em; /* 增加字體大小 */transition: color 0.3s ease; /* 平滑過渡 */position: relative; /* 為了下劃線動畫 */padding-bottom: 5px; /* 為下劃線留出空間 */}nav ul li a:hover {color: #f1f1f1; /* 稍微改變hover顏色 */}nav ul li a::after { /* 添加下劃線 */content: '';display: block;width: 0;height: 2px;background: white;position: absolute;left: 0;bottom: 0;transition: width 0.3s ease; /* 下劃線過渡效果 */}nav ul li a:hover::after {width: 100%; /* 鼠標懸停時顯示完整下劃線 */}main {display: flex;gap: 40px; /* 增加gap */}.sidebar {flex: 0 0 300px; /* 增大寬度 */}.content {flex: 1;}.widget {background: white;padding: 30px; /* 增加padding */margin-bottom: 40px; /* 增加margin */border-radius: 8px; /* 增加圓角 */box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 增加陰影 */transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 添加過渡 */}.widget:hover {transform: translateY(-4px); /* 輕微上移 */box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 改變陰影 */}.widget h3 {margin-top: 0;margin-bottom: 25px; /* 增加下邊距 */font-size: 1.5em; /* 增大字號 */color: #4CAF50; /* 主題色 */border-bottom: 2px solid #e0e0e0;padding-bottom: 10px;}.widget ul {list-style: none;padding: 0;margin: 0;}.widget ul li {padding: 15px 0; /* 增加padding */border-bottom: 1px solid #e0e0e0;transition: background-color 0.3s ease; /* 添加背景色過渡 */}.widget ul li:last-child {border-bottom: none;}.widget ul li:hover {background-color: #f0f0f0; /* 淡灰色hover效果 */padding-left: 10px; /* 增加左內邊距，提供反饋 */}.widget ul li a {color: #333;text-decoration: none;display: block; /* 使整個li可點擊 */font-size: 1.1em;}.post {background: white;padding: 30px; /* 增加padding */margin-bottom: 40px; /* 增加margin */border-radius: 8px; /* 增加圓角 */box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 增加陰影 */}.post h2 {margin-top: 0;margin-bottom: 15px; /* 增加下邊距 */font-size: 2em; /* 增大字號 */color: #2c3e50; /* 深色標題 */transition: color 0.3s ease;}.post h2:hover {color: #4CAF50; /* 鼠標懸停時改變顏色 */}.post .post-meta {color: #7f8c8d;font-size: 0.95em; /* 稍微增大 */margin-bottom: 20px; /* 增加下邊距 */display: flex; /* 使用flex布局 */align-items: center; /* 垂直居中 */gap: 10px; /* 增加作者和日期之間的間距 */}.post .post-meta i { /* 使用圖標，例如Font Awesome */margin-right: 5px;color: #95a5a6; /* 更柔和的顏色 */}.post p {font-size: 1.1em; /* 增大默認字號 */line-height: 1.8; /* 增加行高 */color: #444; /* 稍微深一點的顏色 */margin-bottom: 25px; /* 增加段落間距 */}.read-more {display: inline-block;background-color: #4CAF50;color: white;padding: 12px 25px; /* 增加padding */text-decoration: none;border-radius: 6px; /* 稍微減小圓角 */margin-top: 15px; /* 增加上邊距 */transition: background-color 0.3s ease, transform 0.2s ease; /* 添加過渡 */font-size: 1.1em;}.read-more:hover {background-color: #45a049;transform: translateY(-2px); /* 輕微上移 */}.pagination { /* 分頁樣式 */display: flex;justify-content: center;margin-top: 40px;margin-bottom: 20px;}.pagination a, .pagination span {padding: 10px 18px;margin: 0 5px;border-radius: 5px;text-decoration: none;color: #3498db;background-color: #ecf0f1;transition: background-color 0.3s ease, color 0.3s ease;font-size: 1.1em;}.pagination a:hover {background-color: #3498db;color: white;}.pagination .current {background-color: #3498db;color: white;}footer {background-color: #2c3e50;color: white;text-align: center;padding: 30px 0; /* 增加padding */margin-top: 60px; /* 增加margin */border-top: 1px solid #34495e;border-radius: 8px 8px 0 0; /* 上圓角 */}footer .container {display: flex;justify-content: center; /* Center content horizontally */align-items: center;}footer p{font-size: 1.1em;}/* 移動端響應式 */@media (max-width: 768px) {.container {padding: 15px;}header .container {flex-direction: column;text-align: center;}.logo {margin-bottom: 20px;}nav ul {flex-direction: column;align-items: center;}nav ul li {margin-left: 0;margin-top: 15px;}main {flex-direction: column;}.sidebar {width: 100%;margin-bottom: 40px;}.widget {padding: 20px;}.post {padding: 20px;}}/* 更小的屏幕 */@media (max-width: 480px) {.logo {font-size: 1.8em;}nav ul li a {font-size: 1em;}.post h2 {font-size: 1.5em;}.read-more {font-size: 1em;padding: 10px 20px;}.widget h3{font-size: 1.2em;}}</style>
</head>
<body><header><div class="container"><div class="logo">我的博客</div><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于我</a></li><li><a href="#">文章</a></li><li><a href="#">作品</a></li><li><a href="#">聯系</a></li></ul></nav></div></header><main class="container"><div class="sidebar"><div class="widget"><h3>最新文章</h3><ul><li><a href="#">文章標題一</a></li><li><a href="#">文章標題二</a></li><li><a href="#">文章標題三</a></li></ul></div><div class="widget"><h3>分類</h3><ul><li><a href="#">技術</a></li><li><a href="#">生活</a></li><li><a href="#">旅行</a></li><li><a href="#">攝影</a></li></ul></div><div class="widget"><h3>友情鏈接</h3><ul><li><a href="#">朋友的博客</a></li><li><a href="#">推薦網站</a></li></ul></div></div><div class="content"><article class="post"><h2>文章標題一：探索未知的領域</h2><p class="post-meta"><i class="far fa-calendar-alt"></i> 2024年5月20日<i class="fas fa-user"></i> 作者：您的名字</p><p>這是一篇關于探索未知領域的文章，我們將在本文中深入探討一些有趣的話題，例如人工智能的未來發展、宇宙的奧秘以及人類的進化。探索未知是人類的天性，讓我們一起踏上這段激動人心的旅程。</p><p>我們還將分享一些實用的技巧和工具，幫助您更好地進行研究和學習。希望這篇文章能夠激發您對知識的渴望，并鼓勵您勇敢地追求自己的夢想。</p><a href="#" class="read-more"></a></article><article class="post"><h2>文章標題二：記錄生活中的美好瞬間</h2><p class="post-meta"><i class="far fa-calendar-alt"></i> 2024年5月18日<i class="fas fa-user"></i> 作者：您的名字</p><p>生活就像一本精彩的書，而我們就是書中的主角。這篇文章將帶您一起回顧那些生活中的美好瞬間，例如旅行中的風景、與朋友的聚會以及那些令人難忘的時刻。</p><p>我們相信，記錄生活中的美好瞬間可以幫助我們更好地珍惜現在，并為未來的生活增添色彩。希望這篇文章能夠觸動您內心深處的情感，并鼓勵您勇敢地去創造更多美好的回憶。</p><a href="#" class="read-more"></a></article><div class="pagination"><span class="current">1</span><a href="#">2</a><a href="#">3</a><a href="#">下一頁</a></div></div></main><footer><div class="container"><p>&copy; 2024 我的博客. All rights reserved. | Design by Your Name</p></div></footer><script>// JavaScript 可以在這里添加交互功能，例如平滑滾動、移動端菜單等document.querySelectorAll('a[href^="#"]').forEach(anchor => {anchor.addEventListener('click', function (e) {e.preventDefault();document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});});});</script><script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
</body>
</html>