【HTML】个人博客页面

发布于：2025-05-16 ⋅ 阅读:(15) ⋅ 点赞:(0)

目录

页面视图​编辑

页面代码

解释：

  1. HTML (<body>):

    • 使用了更加语义化的HTML5标签，例如<header>, <main>, <article>, <footer>。
    • 文章列表使用了<article>包裹，结构清晰。
    • 添加了分页导航。
    • 使用了Font Awesome图标，记得替换your-font-awesome-kit.js为你的项目中的Font Awesome。

  2. CSS (<style>):

    • 使用了Noto Serif SC作为主要字体，这是一种衬线字体，更适合博客的风格。
    • 整体颜色方案更加清新自然，使用了绿色的主色调。
    • 对header和footer进行了美化，增加了阴影和过渡效果。
    • 文章列表和侧边栏的样式更加精致，使用了圆角和更柔和的阴影。
    • 增加了更多的hover效果，例如链接下划线动画、按钮和文章的轻微上移效果。
    • 使用了Flexbox布局，使页面结构更加灵活。
    • 添加了响应式设计，在移动设备上也能有良好的浏览体验。

  3. JavaScript (<script>):

    • 包含了平滑滚动效果，点击#开头的链接时页面会平滑滚动到对应位置。

如何使用：

  1. 将代码保存为HTML文件（例如 index.html）。
  2. 在浏览器中打开该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>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布