<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线上鲜花商店</title>
<link rel="icon" href="./images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/carstyle.css">
</head>
<body>
<header>
<input type="checkbox" name="" id="toggler">
<a href="#" class="logo">鲜花<span>商城</span></a>
<nav class="navbar">
<a href="#home">开始</a>
<a href="#products">商品</a>
<a href="#about">关于我们</a>
</nav>
<div class="search-box">
<input type="text" id="search-input" placeholder="搜索鲜花...">
<a href="./detail.html" class="cart-btn">搜索</a>
</div>
<div class="icon-cart">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 0h8m-8 0-1-4m9 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-9-4h10l2-7H3m2 7L3 4m0 0-.792-3H1"/>
</svg>
<span>0</span>
</div>
<div class="icon1">
<a href="#" class="fas fa-user"></a>
</div>
</header>
<div class="cartTab">
<h1>Shopping Cart</h1>
<div class="listCart">
</div>
<div class="btn">
<button class="close">CLOSE</button>
<button class="checkOut">Check Out</button>
</div>
</div>
<script src="./js/cart.js" type="module"></script>
<div id="contentTab">
Content in template file
</div>
<section class="home" id="home">
<div class="content">
<h3>鲜花商城</h3>
<span> natural & beautiful flowers </span>
<p>为新鲜，艳丽，馥郁，快捷买单</p>
</div>
</section>
<!-- home section ends -->
<!-- about section ends -->
<!-- icons section starts -->
<!-- prodcuts section starts -->
<!-- products section starts -->
<section class="products" id="products">
<h1 class="heading"> 热门 <span>产品</span> </h1>
<div class="box-container">
<div class="background">
<!-- 热门商品 -->
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="images/img-1.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名1" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名1</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-15%</span>
<div class="image">
<img src="images/img-2.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名2" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名2</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-5%</span>
<div class="image">
<img src="images/img-3.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名3" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名3</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
</div>
</div>
</section>
<section class="products" id="products1">
<h1 class="heading1"> 更多种类</h1>
</section>
<section class="products" id="tulip-products">
<h1 class="heading3"> 郁金香 </h1>
<div class="box-container">
<!-- 热门商品 -->
<div class="box">
<span class="discount">-10%</span>
<div class="image">
<img src="images/img-1.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名1" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名1</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-15%</span>
<div class="image">
<img src="images/img-2.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名2" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名2</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-5%</span>
<div class="image">
<img src="images/img-3.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名3" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名3</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="more-btn">
<a href="#" class="btn">全部郁金香>></a>
</div>
</section>
<section class="products" id="rose-products">
<h1 class="heading2"> 玫瑰 </h1>
<div class="box-container">
<div class="box">
<span class="discount">-20%</span>
<div class="image">
<img src="images/img-4.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名4" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名4</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
<span class="discount">-17%</span>
<div class="image">
<img src="images/img-5.jpg" alt="">
<div class="icons">
<a href="./detail.html" class="cart-btn">详情</a>
<button class="add-to-cart-btn" data-name="花名5" data-price="12.99">+</button>
</div>
</div>
<div class="content">
<h3>花名5</h3>
<div class="price"> $12.99 <span>$15.99</span> </div>
</div>
</div>
<div class="box">
flower shop.zip （34个子文件） 
flower shop js 
detail.js 3KB cart.js 2KB index.js 1KB script.js 3KB
detail.html 5KB css style.css 13KB detail.css 6KB carstyle.css 2KB index.html 14KB images 
img-1.jpg 89KB
111.png 2KB img-8.jpg 32KB 333.png 2KB img-6.jpg 88KB img-5.jpg 71KB img-4.jpg 19KB
contact-img.svg 191KB img-9.jpg 54KB icon-2.png 2KB pic-3.png 101KB icon-1.png 1KB payment.png 8KB title.png 244KB pic-2.png 165KB pic-1.png 102KB home-bg.jpg 1MB favicon.ico 4KB 222.png 3KB img-2.jpg 102KB icon-4.png 1KB img-7.jpg 17KB icon-3.png 2KB img-3.jpg 59KB template.html 1KB资源评论
代码江湖小虾米
- 粉丝: 21
最新资源
- 计算机组成原理期末考试试卷及答案.doc
- 测绘档案信息化建设中存在的问题及解决方案.docx
- 互联网+背景下辅导员做好高校学生管理教育工作的路径探索.docx
- VB-SQL学生信息管理完整.doc
- 综合实训项目课程标准《JavaBS架构应用软件》.doc
- 计算机应用基础离线作业.doc
- 计算机网络可靠性分析与设计.docx
- 如何找到真正有价值的物联网项目.docx
- 中小企业电子商务发展中问题通读对策稿.doc
- 教室灯光自动控制系统嵌入式系统设计.doc
- 局域网打字比赛系统(软件工程).doc
- 业界桌面虚拟化产品对比.xls
- AI+教育：人工智能口语学习App鲸小爱首度亮相.docx
- 《SQL管理开发》试题O卷.doc
- EICAD-在现代道路设计方案中的使用.doc
- 实训5-电子商务安全认识.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
