从零到上线：我的美食博客开发日记 | HTML+CSS最佳实践

字节剧场

已于 2025-02-09 10:32:21 修改

阅读量1.6k

点赞数 62

分类专栏：个人博客文章标签： html css 前端

于 2025-02-09 10:29:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_73333990/article/details/145528700

版权

个人博客专栏收录该内容

2 篇文章

订阅专栏

从零开始构建个人美食博客网站：HTML+CSS实战教程

一级目录

二级目录

三级目录

一、项目概述

1.1 项目介绍

这是一个美食主题的个人博客网站，包含主页和三篇美食文章。网站采用纯HTML和CSS构建，具有现代化的设计风格和良好的用户体验。

1.2 效果预览

1.3 技术栈

HTML5
CSS3
响应式设计

二、项目结构

project/
│
├── index.html          # 主页
├── style.css          # 样式文件
├── xiangcai.html      # 香菜文章页
├── chocolate.html     # 巧克力文章页
├── tomato.html       # 番茄文章页
│
└── images/           # 图片资源目录
    ├── touxiang.jpg  # 头像
    ├── xiangcai.jpg  # 香菜配图
    ├── chocolate.jpg # 巧克力配图
    ├── tomato.jpg   # 番茄配图
    ├── qq.jpg       # QQ图标
    └── wechat.jpg   # 微信图标

三、详细实现步骤

3.1 创建基础HTML结构

首先创建主页index.html（即博客主页.html），设置基本的HTML5文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>我的个人博客</title>
</head>
<body>
    <!-- 内容将在这里添加 -->
</body>
</html>

3.2 构建导航栏

在body标签内添加导航栏结构：

<nav>
    <div class="nav-container">
        <div class="nav-links">
            <a href="#home">首页</a>
            <a href="#article">我的文章</a>
            <a href="#phone">联系我</a>
        </div>
        <div class="search-group">
            <input type="search" placeholder="搜索文章...">
            <button>搜索</button>
        </div>
    </div>
</nav>

3.3 设置CSS变量和全局样式

在style.css中定义全局变量和基础样式：

:root {
    --primary-color: #ff6b6b;    /* 暖红色 */
    --secondary-color: #4ecdc4;  /* 青绿色 */
    --text-color: #2d3436;      /* 深灰色 */
    --bg-color: #f9f9f9;        /* 浅灰背景 */
    --card-bg: #ffffff;         /* 纯白色 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}

3.4 实现侧边栏

添加侧边栏HTML结构：

<aside>
    <h3>热门文章</h3>
    <ul>
        <!-- 热门文章列表 -->
    </ul>

    <h3>个人标签</h3>
    <div class="tag-container">
        <!-- 标签列表 -->
    </div>

    <h3>友情链接</h3>
    <ul>
        <!-- 友情链接列表 -->
    </ul>
</aside>

3.5 创建文章卡片

实现文章展示区域：

<section id="article" class="article-section">
    <h3>我的文章</h3>
    <div class="article-list">
        <!-- 文章卡片 -->
    </div>
</section>

3.6 添加联系方式区域

<div id="phone" class="contact">
    <h3>联系方式</h3>
    <div class="contact-info">
        <!-- 联系方式卡片 -->
    </div>
</div>

3.7 实现页脚

<footer>
    <div class="footer-content">
        <!-- 页脚内容 -->
    </div>
    <div class="footer-bottom">
        <!-- 版权信息 -->
    </div>
</footer>

四、关键CSS样式详解

4.1 导航栏样式

nav {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

4.2 文章卡片样式

[此处可以放置文章卡片效果图]

.article-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

4.3 响应式设计

@media (max-width: 768px) {
    .contact-info {
        grid-template-columns: 1fr;
    }
    .contact {
        padding: 2rem;
    }
}

五、文章页面实现

5.1 创建文章模板

以xiangcai.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>
</head>
<body>
    <h1>被误解的香菜：爱恨背后的科学密码</h1>
    <p><!-- 文章内容 --></p>
</body>
</html>

六、优化与扩展

6.1 图片加载优化

添加图片加载失败的后备方案：

.article-img:not([src]),
.article-img[src=""],
.article-img[src*="undefined"] {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    min-height: 200px;
}