当前位置：首页 > news >正文

【HTML】个人博客页面

news 来源：原创 2025/5/16 6:51:42

页面视图编辑

页面代码

解释：

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>