资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

我的个人博客

创作时间:

作者:

@小白创作中心

我的个人博客

引用

CSDN

https://blog.csdn.net/qq_73333990/article/details/145528700

本文将详细介绍如何使用HTML和CSS构建一个美观实用的个人美食博客网站。通过合理的HTML结构和CSS样式设计，使网站具有良好的用户体验和视觉效果。

项目概述

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

项目结构

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   # 微信图标

详细实现步骤

创建基础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>

在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>

设置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);
}

实现侧边栏

添加侧边栏HTML结构：

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

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

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

创建文章卡片

实现文章展示区域：

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

添加联系方式区域

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

实现页脚

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

关键CSS样式详解

导航栏样式

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);
}

文章卡片样式

.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);
}

响应式设计

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

文章页面实现

创建文章模板

以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>

优化与扩展

图片加载优化

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

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