HTML+CSS静态页面网页设计作业——甜品蛋糕网页设计(5页) 甜品网页设计制作简单静态HTML网页作品美食网页作业成品学生水果生鲜网站模板

最新推荐文章于 2022-12-22 20:37:07 发布

原创

最新推荐文章于 2022-12-22 20:37:07 发布 · 1.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #javascript

本文档详细介绍了使用HTML和CSS技术制作的一款甜品蛋糕主题的静态网页作品，包括5页的设计内容。涵盖了从作品展示、文件目录到具体代码实现的全过程，适合学生和初学者学习美食网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <title>21cake</title>
</head>

<body>
    <!-- 头部导航栏部分  start -->
    <header>
        <div class="inner">
            <div class="logo">
                <img src="picture/logo.png" width="120px" height="44px" alt="21cake 蛋糕官网">
            </div>
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="class.html">蛋糕</a></li>
                <li><a href="class.html">面包</a></li>
                <li><a href="class.html">冰淇淋</a></li>
                <li><a href="class.html">咖啡下午茶</a></li>
                <li><a href="class.html">全国送</a></li>
                <li><a href="class.html">企业专区</a></li>
            </ul>
            <ul class="join">
                <li><a href="#">APP下载</a></li>
                <li><a href="#">北京</a><i class="city"></i></li>
                <li><a href="#">消息</a></li>
                <li><a href="login.html">登录</a>/<a href="register.html">注册</a></li>
                <li class="cart"><i></i></li>
            </ul>
        </div>
    </header>
    <!-- 轮播图部分 -->
    <div class="slider">
        <img src="picture/slider-1.jpg" alt="">
    </div>
    <!-- 中间部分  start -->
    <div class="content">
        <div class="home-module home-menu">
            <a href="#1">
                <img src="picture/menu-1.jpg" alt="新品" title="新品">
            </a>
            <a href="#2">
                <img src="picture/menu-2.jpg" alt="新品" title="新品">
            </a>
            <a href="#3">
                <img src="picture/menu-3.jpg" alt="新品" title