利用html+css+javascript 仿 THE ONE奶茶官网

最新推荐文章于 2024-04-12 18:12:17 发布
最新推荐文章于 2024-04-12 18:12:17 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： HTML CSS JavaScript 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43816826/article/details/121343492
版权

THE ONE目录

一、实现效果

在这里插入图片描述

二、HTML代码

<!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>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="./js/swiper.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 幻灯片开始 -->
    <div class="swiper-container">
        <img src="./images/logo.png" alt="" class="logo">
        <div class="yezhu"><img src="./images/top_ico.png" alt="">&nbsp;<a href="http://i.hktheone.com/"
                target="_blank">
                <h4>业主专区</h4>
            </a></div>
        <div class="fixed-menu"></div>

        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./images/5c908e3a33ef3.jpg" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./images/5c9092286895c.jpg" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./images/5c9093cf93bf5.jpg" alt="" srcset=""></div>
        </div>
        <div class="pagination">
            <div class="swiper-button-prev"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </div>
    </div>
    <!-- 幻灯片结束 -->
    <!-- 品牌说明开始 -->
    <div class="brand">
        <div class="brand-desc">
            <div class="brand-name">THE ONE 品牌</div>
            <p>THE ONE创立于香港，2011年在海口市推出第一家分店。THE ONE HOUSE以东方时尚新茶风的时尚概念，改变了传统泡沫红茶及 珍珠奶茶的市场经营模式，
                导入全面化科技茶饮技术，让各地喜爱港式饮品珍珠奶茶的朋友们都可以喝到如同在香港一样味道的健康 饮料。</p>
            <p>时尚优雅色系茶饮强调健康与精致，高贵的 咖啡色装潢和设计不管是白天夜晚都十分醒目，而且透着时尚的质感。让人喝奶茶 都有种高雅感。</p>
            <p>新鲜概念--THE ONE对消费都有绝对的品质保证， 在原料上更是严格把关，用心调制，承诺绝不贩卖超过4小时的红 茶、绿茶、珍珠等茶饮。多种茶饮选择--有特调茶品、咖啡系列、奶钻系列、超人气饮品、
                冰沙系列、香浓奶郁系列、单品系列， 还可自行选择糖份分类，温暖贴心。</p>
            <div class="ewm">
                <img src="./images/ewm.png" alt="" srcset="">
            </div>
        </div>
    </div>
    <!-- 品牌说明结束 -->

    <!-- THE ONE 产品开始 -->
    <div class="product">
        <div class="product-name">THE ONE 产品</div>
        <p class="product-desc">THE ONE -- 浓香、蜜意、雅怡,幸福的味道。德旺 · 海南知名品牌</p>

        <div class="product-imgs">
            <img src="./images/6008eaa9aa2d0.gif" alt="">
            <img src="./images/6008eabe074ff.gif" alt="">
            <img src="./images/6008eae1bb6ff.gif" alt="">
        </div>
    </div>
    <!-- THE ONE 产品结束 -->

    <!-- THE ONE 门店开始 -->
    <div class="stores">
        <div class="store">THE ONE 门店</div>
        <div class="place-store" id="sto">
            <p class="place">海口地区</p>
            <div class="store">
                <table id="store_table">
                    <tr>
                        <td><a href="">新城吾悦广场店</a></td>
                        <td><a href="">日月广场店</a></td>
                        <td><a href="">南沙路店</a></td>
                        <td><a href="">星海湾店</a></td>
                        <td><a href="">美兰国际机场店</a></td>
                    </tr>
                    <tr>
                        <td><a href="">海甸二东路店</a></td>
                        <td><a href="">泰龙城店</a></td>
                        <td><a href=
最低0.47元/天 解锁文章
酸橙派SVT
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS静态页面网页设计作业——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
06-09 934
HTML5期末大作业：甜品奶茶网站设计——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
基于html的美食网站 奶茶网页设计与实现(HTML+CSS+JavaScript)
专注于dreamweaver网页设计制作
08-17 780
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV......
83. Web前端网页制作 高端大气甜品奶茶店网页设计实例 大学生期末大作业 html+css+js
A240307的博客
04-12 874
高端大气甜品奶茶店网页，应用html+css+js，自适应响应式网页，图片轮翻、多级菜单导航、搜索等，该案例模板适用于高端餐饮、奶茶店、大学生网页课程作业设计，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
基于HTML(甜品奶茶店)餐饮美食项目的设计与实现（html前端源码和论文设计）
m0_73260518的博客
08-13 387
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网...
利用html+css+js设计的仿原神网页
最新发布
05-06
html css js网页设计 ...利用html+css+js设计的仿原神网页 利用html+css+js设计的仿原神网页 利用html+css+js设计的仿原神网页 利用html+css+js设计的仿原神网页 利用html+css+js设计的仿原神网页
2022最新仿小米商城首页html+css+js
09-22
然而，这个项目可能更侧重于基础的HTML、CSS和JavaScript实践，适合初学者学习和理解电商网站的基本构建原理。 压缩包中的文件名为“mi”，可能是代码文件夹的简写，其中应该包含了HTML文件（如index.html）、CSS...
HTML+CSS+JavaScript编程入门指南
12-30
下载文件是HTML+CSS+JavaScript编程入门指南这本书的示例代码，全书分HTML，CSS与JavaScript三个部分，然后结合三个部分用项目说明应用方法。各部分的代码展示了三种语言的使用方法，可以搭配webstorp执行
仿华为商城部分前端界面html+css+js
06-28
在本项目"仿华为商城部分前端界面html+css+js"中，我们主要探讨的是如何利用Web前端技术来构建一个类似华为商城的电子商务网站的用户界面。这个项目着重于实现HTML结构、CSS样式以及JavaScript交互功能，从而为用户...
html+bootstrap+css+javascript仿Epic商店的前端网页
07-21
仿照Epic游戏商店的官网网页，主题简洁好看，上手简单，基本不需要什么额外操作，整体网页使用的都是1080像素以上的图片，极度清晰，都是壁纸级的享受，建议体验！（若有任何侵权之处请联系我，立即处理，谢谢）。...
水果果汁CSS网页模板
12-01
水果果汁CSS网页模板 黄色 商务 网页 模板 企业 商业 公司 设计 主页 HTML DIV+CSS 模板下载
仿华为官网纯原生JS+Css编写，无jquery
07-30
仿华为官网,使用纯原生JS和Css编写网站，不使用JQuery等开源包
珍珠奶茶网站源码 v1.0
10-18
珍珠奶茶网站源码这是一套珍珠奶茶网站的源码，有兴趣的朋友可以下载试用！后台用户名：admin　　密码：admin
蜜雪冰城官网
01-07
利用HTML、css和JavaScript做的，还应有bootstrap做的响应式布局
奶茶
02-15
该项目在制作美味奶茶的同时集合了各种摇头动作。 使用称为加速度计的简单传感器，它可以从手机中收集各种数据，然后使用该信息从美味的奶茶中生成音乐。 快速开始 git clone https://github.com/digitalmediabremen/jatawankruesilp.git cd milktea npm i npm start 科技类 Tone.js React React本机Web React灵敏 Webpack
HTML5期末大作业：奶茶网站设计——带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品
11-27 1509
HTML5期末大作业：奶茶网站设计——带音乐图片滚动奶茶(6页) 美食网页设计作业 简单大学生静态HTML网页作品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码
3 css 奖品出现弹出动画_喝一杯奶茶时间，快速上手网页三剑客的炫酷动画制作...
weixin_29839415的博客
12-19 197
前言许多年前，网站更专注于向用户显示信息，而没有考虑如何创建视觉体验以使网站更加用户友好。在过去的几年中，许多事情发生了变化：网站所有者正在创造视觉体验，以使用户留在自己的网站上。开发人员发现，由于我们对运动的自然反应，人类倾向于更多地关注运动的物体。通过扩展，将动画添加到您的网站或应用程序中是吸引用户注意您网站的重要区域并显示有关产品的更多信息的一种非常重要的方法。注意：有效的动画能够...
利用HTML+CSS+JavaScript制作致敬逆行者的动态网页
06-11
以下是利用HTML+CSS+JavaScript制作致敬逆行者的动态网页的步骤： 1. 创建HTML文件 首先，您需要创建一个HTML文件，并为其添加基本的结构，包括<html>、和标记。 2. 添加CSS样式 接下来，您需要使用CSS样式来美化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值