html网页设计代码作业设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript web期末作业设计网页_美食网页设计作业成品

最新推荐文章于 2023-12-20 11:23:07 发布

优质内容贡献

最新推荐文章于 2023-12-20 11:23:07 发布

阅读量371

点赞数

分类专栏： web大学生个人网站作业模 HTML5期末大作业学生div+css静态网页设计成品文章标签：前端 css html html5 美食

本文链接：https://blog.csdn.net/qq_524614081/article/details/122399313

版权

这是一份HTML5期末大作业，设计了一个美食甜品店铺加盟企业的1页网站，涵盖了HTML+CSS+JavaScript的实现。作品展示了甜品店的网页设计，并提供了文件目录和代码实现的详细内容。

摘要由CSDN通过智能技术生成

HTML5期末大作业：甜品店网站设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript

文章目录

HTML5期末大作业：甜品店网站设计——美食甜品店铺加盟企业(1页) HTML+CSS+JavaScript
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>甜品加盟首页</title>
		<link rel="stylesheet" type="text/css" href="statics/css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
		<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--顶部导航-->
		<div class="header">
			<div class="top-bar">
				<div class="w1200">
					<div class="l">期待您的加入！</div>
					<div class="r">
						<span class="address">总店地址：北京市海淀区某某街某号</span>
						<span>加盟热线：<span class="red">188-XXXX-XXXX</span></span>
					</div>
				</div>
			</div>
			<div class="w1200">
				<div class="logo">
					<a href="#"><img src="statics/images/logo.png" /></a>
				</div>
				<div class="nav">
					<ul>
						<li>
							<a class="active" href="#">首页</a>
						</li>
						<li>
							<a href="#">成功案例</a>
						</li>
						<li>
							<a href="#">加盟热线</a>
						</li>
						<li>
							<a href="#">员工培训</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
						<li>
							<a href="#">关于我们</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--轮播图-->
		<div class="slider swiper-container">
			<ul class="swiper-wrapper">
				<li class="swiper-slide">
					<img src="statics/images/slider.jpg" />
					<div class="w1200">
						<div class="slider-txt">
							<div class="title">芒果草莓奶油蛋糕</div>
							<div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div>
							<a href="#" class="btn"><span>立即加盟</span></a>
						</div>
					</div>
				</li>
				<li class="swiper-slide">
					<img src="statics/images/slider.jpg" />
					<div class="w1200">
						<div class="slider-txt">
							<div class="title">芒果草莓奶油蛋糕</div>
							<div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div>
							<a href="#" class="btn"><span>立即加盟</span></a>
						</div>
					</div>
				</li>
				<li class="swiper-slide">
					<img src="statics/images/slider.jpg" />
					<div class="w1200">
						<div class="slider-txt">
							<div class="title">芒果草莓奶油蛋糕</div>
							<div class="sub-title">冬季爆款 / 超高颜值 / 网红食品</div>
							<a href="#" class="btn"><span>立即加盟</span></a>
						</div>
					</div>
				</li>
			</ul>
			<div class="arrow">
				<div class="swiper-button-next"></