编程马·菜鸟教程

Appearance

26. 基础小项目（巩固基础，新手可上手） ​

26.1 个人简介卡片（运用盒模型、边框、背景、文字样式） ​

功能说明 ​

创建一个美观的个人简介卡片，展示个人信息、头像和基本描述。

实现代码 ​

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>
    <style>
        /* 卡片容器 */
        .profile-card {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* 头像 */
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background-color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: white;
        }

        /* 姓名 */
        .name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        /* 职位 */
        .position {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        /* 描述 */
        .description {
            font-size: 14px;
            line-height: 1.5;
            color: #666;
            margin-bottom: 20px;
        }

        /* 社交链接 */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .social-link:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="profile-card">
        <div class="avatar">JD</div>
        <h2 class="name">John Doe</h2>
        <p class="position">Web Developer</p>
        <p class="description">
            热爱前端开发，擅长HTML、CSS和JavaScript，
            致力于创建美观且功能强大的网站。
        </p>
        <div class="social-links">
            <a href="#" class="social-link">📧</a>
            <a href="#" class="social-link">📱</a>
            <a href="#" class="social-link">💼</a>
        </div>
    </div>
</body>
</html>

核心知识点 ​

  • 盒模型：使用padding、margin和border-radius创建卡片结构
  • 背景：使用background-color设置背景色
  • 文字样式：使用font-size、font-weight和color设置文字样式
  • Flex布局：使用display: flex实现居中对齐
  • 过渡效果：使用transition实现悬停效果

26.2 简单导航栏（运用Flex布局、浮动、伪类选择器） ​

功能说明 ​

创建一个响应式导航栏，包含品牌标识、导航链接和悬停效果。

实现代码 ​

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>
    <style>
        /* 导航栏容器 */
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        /* 品牌标识 */
        .navbar .brand {
            float: left;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }

        /* 导航链接容器 */
        .navbar .nav-links {
            float: right;
            display: flex;
        }

        /* 导航链接 */
        .navbar .nav-links a {
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        /* 悬停效果 */
        .navbar .nav-links a:hover {
            background-color: #555;
        }

        /* 激活状态 */
        .navbar .nav-links a.active {
            background-color: #4CAF50;
        }

        /* 响应式设计 */
        @media screen and (max-width: 600px) {
            .navbar .nav-links {
                float: none;
                flex-direction: column;
            }
            
            .navbar .brand {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#" class="brand">MyWebsite</a>
        <div class="nav-links">
            <a href="#" class="active">首页</a>
            <a href="#">关于</a>
            <a href="#">服务</a>
            <a href="#">联系</a>
        </div>
    </div>
</body>
</html>

核心知识点 ​

  • 浮动：使用float实现品牌标识和导航链接的布局
  • Flex布局：使用display: flex实现导航链接的水平排列
  • 伪类选择器：使用:hover和.active实现交互效果
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

26.3 图文混排页面（运用浮动、盒模型、溢出处理） ​

功能说明 ​

创建一个包含图片和文字的混排页面，展示文章内容。

实现代码 ​

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>
    <style>
        /* 容器 */
        .container {
            width: 80%;
            margin: 50px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }

        /* 标题 */
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* 文章内容 */
        .article {
            line-height: 1.6;
            color: #333;
        }

        /* 图片 */
        .article img {
            width: 300px;
            height: auto;
            border-radius: 8px;
            margin: 0 20px 20px 0;
            float: left;
        }

        /* 清除浮动 */
        .article::after {
            content: "";
            display: table;
            clear: both;
        }

        /* 段落 */
        .article p {
            margin-bottom: 15px;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .article img {
                float: none;
                width: 100%;
                margin: 0 0 20px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>美丽的自然风光</h1>
        <div class="article">
            <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20natural%20landscape%20with%20mountains%20and%20lake&image_size=landscape_16_9" alt="自然风光">
            <p>
                大自然的美丽是无与伦比的，它以其独特的魅力吸引着无数人。从雄伟的山脉到宁静的湖泊，从茂密的森林到广阔的草原，每一处风景都展现着大自然的神奇力量。
            </p>
            <p>
                当我们置身于大自然中时，仿佛所有的烦恼都消失了。清新的空气、悦耳的鸟鸣、美丽的景色，这一切都让我们感到身心愉悦。
            </p>
            <p>
                保护大自然是我们每个人的责任。只有爱护环境，才能让这些美丽的景色永远存在，让后代也能欣赏到大自然的魅力。
            </p>
            <p>
                让我们一起走进大自然，感受它的美丽与神奇，同时也要学会珍惜和保护它。
            </p>
        </div>
    </div>
</body>
</html>

核心知识点 ​

  • 浮动：使用float实现图片和文字的混排
  • 清除浮动：使用::after伪元素清除浮动，避免布局混乱
  • 盒模型：使用margin和padding控制元素间距
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

26.4 按钮合集（运用渐变、过渡、阴影，制作不同样式按钮） ​

功能说明 ​

创建一组不同样式的按钮，展示各种按钮效果。

实现代码 ​

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>
    <style>
        /* 容器 */
        .button-container {
            width: 80%;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        /* 基础按钮样式 */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        /* 渐变按钮 */
        .btn-gradient {
            background: linear-gradient(45deg, #3498db, #2ecc71);
            color: white;
        }

        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
        }

        /* 边框按钮 */
        .btn-border {
            background: transparent;
            color: #3498db;
            border: 2px solid #3498db;
        }

        .btn-border:hover {
            background: #3498db;
            color: white;
        }

        /* 阴影按钮 */
        .btn-shadow {
            background: #3498db;
            color: white;
            box-shadow: 0 4px 0 #2980b9;
            position: relative;
            top: 0;
        }

        .btn-shadow:active {
            top: 4px;
            box-shadow: 0 0 0 #2980b9;
        }

        /* 悬停缩放按钮 */
        .btn-scale {
            background: #e74c3c;
            color: white;
        }

        .btn-scale:hover {
            transform: scale(1.1);
        }

        /* 圆角按钮 */
        .btn-rounded {
            background: #9b59b6;
            color: white;
            border-radius: 30px;
        }

        .btn-rounded:hover {
            background: #8e44ad;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button class="btn btn-gradient">渐变按钮</button>
        <button class="btn btn-border">边框按钮</button>
        <button class="btn btn-shadow">阴影按钮</button>
        <button class="btn btn-scale">缩放按钮</button>
        <button class="btn btn-rounded">圆角按钮</button>
    </div>
</body>
</html>

核心知识点 ​

  • 渐变：使用linear-gradient创建渐变背景
  • 过渡：使用transition实现平滑的样式变化
  • 阴影：使用box-shadow创建立体效果
  • 变换：使用transform实现缩放和位移效果
  • 伪类：使用:hover和:active实现交互效果

26.5 简单表单（运用表单美化、Flex布局） ​

功能说明 ​

创建一个美观的登录表单，包含输入框、密码框和提交按钮。

实现代码 ​

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>
    <style>
        /* 容器 */
        .form-container {
            width: 400px;
            margin: 50px auto;
            padding: 30px;
            background-color: #f5f5f5;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* 标题 */
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* 表单 */
        .form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 表单组 */
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        /* 标签 */
        .form-group label {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }

        /* 输入框 */
        .form-group input {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        /* 输入框聚焦 */
        .form-group input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        /* 提交按钮 */
        .btn-submit {
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn-submit:hover {
            background: #2980b9;
        }

        /* 链接 */
        .form-links {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
        }

        .form-links a {
            color: #3498db;
            text-decoration: none;
        }

        .form-links a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media screen and (max-width: 480px) {
            .form-container {
                width: 90%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户登录</h2>
        <form class="form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <button type="submit" class="btn-submit">登录</button>
            <div class="form-links">
                <a href="#">忘记密码？</a> | <a href="#">注册新账号</a>
            </div>
        </form>
    </div>
</body>
</html>

核心知识点 ​

  • Flex布局：使用display: flex实现表单元素的垂直排列
  • 表单美化：自定义输入框和按钮的样式
  • 伪类：使用:focus实现输入框聚焦效果
  • 过渡：使用transition实现平滑的样式变化
  • 响应式设计：使用媒体查询适配不同屏幕尺寸

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建