一、作品展示





二、文件目录

三、代码实现
<!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

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

被折叠的 条评论
为什么被折叠?



