HTML&CSS 创意工坊：雕琢个人博客的专属宝藏页面

前端Hardy
311 阅读5分钟

这段HTML和CSS代码是一个个人博客页面的设计。

演示效果

6.gif

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <title>个人博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        header {
            background: #212121;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header h1 {
            margin: 0;
            font-size: 18px;
            color: #fff;
        }

        nav {
            display: flex;
            justify-content: flex-end;
            padding: 0;
            background: transparent;
        }

        nav .menu-icon {
            display: none;
            cursor: pointer;
            padding: 10px;
        }

        nav .nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav .nav-links li {
            margin-left: 15px;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
        }

        nav a:hover {
            background: #555;
            border-radius: 4px;
        }
        nav .active{
            background: #409EFF;
            border-radius: 4px;
        }
        @media (max-width: 600px) {
            nav .menu-icon {
                display: block;
            }

            nav .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                right: 0;
                background: #212121;
                width: 100%;
                z-index: 1000;
            }

            nav .nav-links li {
                margin-left: 0;
                text-align: center;
                width: 100%;
            }

            nav .menu-icon:hover+.nav-links,
            nav .nav-links:hover {
                display: flex;
            }
        }

        .welcome {
            padding: 20px 0;
            text-align: center;
            border-radius: 10px;
            background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .welcome h1 {
            margin: 0;
            color: #fff;
            font-size: 18px;
        }

        .welcome p {
            color: #fff;
        }

        .articles {
            padding: 20px 0;
        }

        .article {
            margin-bottom: 20px;
            padding: 30px 15px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
        }

        .article-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .article-content {
            flex: 1;
        }

        .article-image {
            margin-left: 10px;
            width: 120px;
            height: 80px;
        }

        .article-image img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .article h2 {
            margin: 0;
            font-size: 16px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #555666;
        }

        .article p {
            color: #666;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .article-stats {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 10px;
        }

        .article-stats i {
            margin-right: 5px;
        }

        .article-stats span {
            margin-right: 15px;
            color: #999aaa;
            font-size: 12px;
        }

        footer {
            background: #212121;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .main-content {
            flex: 1;
            overflow-y: auto;
            padding-top: 80px;
            padding-bottom: 50px;
        }

        @media (max-width: 800px) {
            .container {
                width: 95%;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <h1>欢迎来到我的博客</h1>
            <nav>
                <div class="menu-icon">
                    <i class="fas fa-bars"></i>
                </div>
                <ul class="nav-links">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">关于我</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="main-content">
        <div class="container">
            <div class="welcome">
                <h1>欢迎阅读我的博客</h1>
                <p>我是Hardy，这里是我分享技术见解和生活点滴的地方。</p>
            </div>

            <div class="articles">
                <div class="article">
                    <div class="article-top">
                        <div class="article-content">
                            <h2>HTML&CSS：熊猫与鼠标的眼神密语，等你来体验！</h2>
                            <p>这个 HTML 和 CSS 代码创建了一个具有动画效果的熊猫形象，它的眼睛会随着鼠标的移动而转动。</p>
                        </div>
                        <div class="article-image">
                            <img src="./img/3.gif" alt="文章图片">
                        </div>
                    </div>
                    <div class="article-stats">
                        <span><i class="fas fa-eye"></i> 阅读量: 100</span>
                        <span><i class="fas fa-thumbs-up"></i> 点赞量: 50</span>
                        <span><i class="fas fa-bookmark"></i> 收藏: 30</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-top">
                        <div class="article-content">
                            <h2>HTML&CSS&JS：超级酷炫丝滑的登录注册页面，赶快收藏吧</h2>
                            <p>这段代码通过 HTML、CSS 和 JavaScript
                                的结合，实现了一个具有动画效果的登录和注册表单。用户可以通过点击按钮在登录和注册表单之间切换，同时覆盖层会相应地显示和隐藏。</p>
                        </div>
                        <div class="article-image">
                            <img src="./img/1.gif" alt="文章图片">
                        </div>
                    </div>
                    <div class="article-stats">
                        <span><i class="fas fa-eye"></i> 阅读量: 150</span>
                        <span><i class="fas fa-thumbs-up"></i> 点赞量: 75</span>
                        <span><i class="fas fa-bookmark"></i> 收藏: 45</span>
                    </div>

                </div>
                <div class="article">
                    <div class="article-top">
                        <div class="article-content">
                            <h2>HTML&CSS浪漫表白：女朋友说你不懂浪漫？让她试试这个，绝对有惊喜！</h2>
                            <p>这段代码通过HTML、CSS和JavaScript的结合，实现了一个交互式的表白页面，包括动画效果和用户交互。这段代码通过HTML、CSS和JavaScript的结合，实现了一个交互式的表白页面，包括动画效果和用户交互。
                            </p>
                        </div>
                        <div class="article-image">
                            <img src="./img/2.gif" alt="文章图片">
                        </div>
                    </div>
                    <div class="article-stats">
                        <span><i class="fas fa-eye"></i> 阅读量: 200</span>
                        <span><i class="fas fa-thumbs-up"></i> 点赞量: 100</span>
                        <span><i class="fas fa-bookmark"></i> 收藏: 60</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-top">
                        <div class="article-content">
                            <h2>HTML&CSS：人民币雨特效，震撼来袭！来财来财来财......</h2>
                            <p>这段 HTML 和 CSS 代码创建了一个简单的网页，其主要功能是模拟人民币图片像雨一样从页面顶部落下的效果。</p>
                        </div>
                        <div class="article-image">
                            <img src="./img/3.gif" alt="文章图片">
                        </div>
                    </div>
                    <div class="article-stats">
                        <span><i class="fas fa-eye"></i> 阅读量: 250</span>
                        <span><i class="fas fa-thumbs-up"></i> 点赞量: 125</span>
                        <span><i class="fas fa-bookmark"></i> 收藏: 75</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-top">
                        <div class="article-content">
                            <h2>Vue 权限控制保姆级解析：让你的应用权限管理得心应手</h2>
                            <p>在 Vue
                                应用开发中，按钮权限控制是构建安全且用户体验良好的系统的关键环节。想象一下，我们有一个包含各种功能按钮的页面，不同用户角色登录后应该只能看到和操作他们被授权的按钮，这就是按钮权限控制要实现的目标。接下来，我们将深入探讨如何在
                                Vue 中实现按钮权限控制。</p>
                        </div>
                        <div class="article-image">
                            <img src="./img/3.gif" alt="文章图片">
                        </div>
                    </div>
                    <div class="article-stats">
                        <span><i class="fas fa-eye"></i> 阅读量: 300</span>
                        <span><i class="fas fa-thumbs-up"></i> 点赞量: 150</span>
                        <span><i class="fas fa-bookmark"></i> 收藏: 90</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>版权所有 &copy; 2024</p>
        </div>
    </footer>
</body>

</html>
  • 一个欢迎区域（.welcome），包含一个标题和一段介绍性的文字。
  • 文章列表（.articles），每个文章（.article）包含：
  • 文章顶部（.article-top），包括文章内容（.article-content）和文章图片（.article-image）。
  • 文章统计信息（.article-stats），显示阅读量、点赞量和收藏数。
  • 页脚（Footer）：包含版权信息。
  • 当屏幕宽度小于600px时，导航栏变为一个下拉菜单。
  • 当屏幕宽度小于800px时，容器宽度调整为95%。
  • 导航栏的菜单图标在点击时可以展开或隐藏导航链接。
  • 文章的阅读量、点赞量和收藏数通过图标和数字显示，增加了页面的互动性。
avatar
文章
阅读
粉丝