当前位置： 首页 > article >正文

html css js网页制作成品——HTML+CSS+js迪奥口红网站网页设计（4页）附源码

article 2026/2/25 0:17:22

  目录

一、👨‍🎓网站题目

二、✍️网站描述

三、📚网站介绍

 四、🌐网站效果

 五、🪓 代码实现

          🧱HTML

六、🥇 如何让学习不再盲目

七、🎁更多干货

一、👨‍🎓网站题目


旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述


👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

 四、🌐网站效果

 五、🪓 代码实现

🧱HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>茶百道</title><link rel="stylesheet" href="css/styles.css">
</head>
<body><div class="page"><header><nav class="navbar"><img src="images/logo.png" alt=""><ul class="nav-links"><li><a href="index.html">首页</a></li><li><a href="products.html">产品展示</a></li><li><a href="about.html">关于我们</a></li><li><a href="news.html">新闻资讯</a></li><li><a href="store.html">店铺分布</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></header><img src="images/banana.png" alt="" class="hero-image"><section class="brand-introduction"><h1>Brand</h1><h1>Introduction</h1><h2>品牌介绍</h2><div><p>2008年，第一杯茶百道在“天府之国”成都诞生。秉持着“做人人都喜爱的日常饮品”的品牌使命，多年来，茶百道坚持独立自主的产品研发模式。</br>以“好茶为底，制造新鲜”为品牌核心理念，专注产品构思，并不断探索天然食材与中国茶的搭配。</br>谨记“立足于持续满足消费者对于品质、健康和体验升级的需求，创造更多元的饮品风味与文化体验”的愿景不断前进。​</p><img src="images/t8.png" alt=""></div></section><video width="1200" controls><source src="images/cbd_video2.mp4" type="video/mp4"></video><section class="new"><h1>News Center</h1><h2>新闻中心</h2><div class="product-card"><h3>茶百道：新茶饮食材为乡村振兴贡献力量</h3><p>从田间地头的优质农产品，到消费者手中捧着的新茶饮，茶百道遍寻大江南北风味食材，浓缩...</p></div><div class="product-card"><h3>茶百道发布全新品牌定位，万店时代下的回归与重塑</h3><p>红星资本局4月22日消息，茶百道2023品牌升级发布会在四川成都举办...</p></div><div class="product-card"><h3>茶百道为凉山州捐建乡村儿童操场，助力乡村儿童快乐成长</h3><p>7月3日，四川省凉山州冕宁县新丰村幼教点的乡村儿童操场正式投入使用...</p></div><footer class="footer"><p>&copy;  茶百道. 版权所有.</p></footer>
</div>
</body>
</html>


六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

相关文章：

html css js网页制作成品——HTML+CSS+js迪奥口红网站网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程日记 2026/2/14 8:38:45

PPT 转高精度图片 API 接口

PPT 转高精度图片 API 接口 文件处理 / 图片处理&#xff0c;将 PPT 文件转换为图片序列。 1. 产品功能 支持将 PPT 文件转换为高质量图片序列&#xff1b;支持 .ppt 和 .pptx 格式&#xff1b;保持原始 PPT 的布局和样式&#xff1b;转换后的图片支持永久访问&#xff1b;全…...

编程日记 2026/2/15 4:17:28

python学习笔记--实现简单的爬虫(二)

任务&#xff1a;爬取B站上最爱欢迎的编程课程 网址&#xff1a;编程-哔哩哔哩_bilibili 打开网页的代码模块&#xff0c;如下图&#xff1a; 标题均位于class_"bili-video-card__info--tit"的h3标签中&#xff0c;下面通过代码来实现&#xff0c;需要说明的是URL中…...

编程日记 2026/2/15 0:24:30

【颠覆性缓存架构】Caffeine双引擎缓存实战:CPU和内存双优化，命中率提升到92%，内存减少75%

千万级QPS验证&#xff01;Caffeine智能双缓存实现 92%命中率&#xff0c;内存减少75% 摘要&#xff1a; 本文揭秘千万级流量场景下的缓存革命性方案&#xff01;基于Caffeine打造智能双模式缓存系统&#xff0c;通过冷热数据分离存储与精准资源分配策略&#xff0c;实现CPU利…...

编程日记 2026/2/24 12:49:51

STM32八股【2】-----ARM架构

1、架构包含哪几部分内容 寄存器处理模式流水线MMU指令集中断FPU总线架构 2、以STM32为例进行介绍 2.1 寄存器 寄存器名称作用R0-R3通用寄存器用于数据传递、计算及函数参数传递&#xff1b;R0 也用于存储函数返回值。R4-R12通用寄存器用于存储局部变量&#xff0c;减少频繁…...

编程日记 2026/2/15 6:55:30

智能汽车图像及视频处理方案，支持视频智能包装能力

美摄科技的智能汽车图像及视频处理方案&#xff0c;通过深度学习算法与先进的色彩管理技术&#xff0c;能够自动调整图像中的亮度、对比度、饱和度等关键参数&#xff0c;确保在各种光线条件下&#xff0c;图像都能呈现出最接近人眼的自然色彩与细节层次。这不仅提升了驾驶者的…...

编程日记 2026/2/23 7:57:28

＜C#＞ 详细介绍.net 三种依赖注入：AddTransient、AddScoped、AddSingleton 的区别

在 .NET 8 里&#xff0c;AddTransient、AddScoped 和 AddSingleton 均为依赖注入容器用于注册服务的方法&#xff0c;不过它们的生命周期管理方式存在差异。下面为你详细介绍这三种方法的区别。 1. AddTransient AddTransient 方法所注册的服务&#xff0c;每次被请求时都会…...

编程日记 2026/2/24 14:36:57

jenkins+1panel面板java运行环境自动化部署java项目

本文章不包含1panel面板安装、jenkins部署、jenkins连接git服务器等操作教程&#xff0c;如有需要可以抽空后期补上 jenkins安装插件Publish Over SSH 在系统配置添加服务器 查看项目的工作空间 项目Configure->构Post Steps选择Send files or execute commands over SSH…...

编程日记 2026/2/16 0:08:42

C语言 【实现电脑关机小游戏】非常好玩

引言 在时间限制内做出正确的回答&#xff0c;时间一到&#xff0c;电脑自动关机&#xff0c;听起来是不是很有意思&#xff0c;下面来看看怎么实现吧。 注意&#xff1a;该游戏只在windows系统下可以玩&#xff0c; 一、游戏原理&#xff1a; 在Windows系统下&#xff0c;通…...

编程日记 2026/2/14 14:00:45

备份比赛数据【算法赛】

0备份比赛数据【算法赛】 - 蓝桥云课 问题描述 蓝桥杯大赛的组委会最近遇到了一个棘手的问题。他们有 N 台电脑需要备份比赛数据&#xff0c;每台电脑所需的备份时间分别为 A1​,A2​,…,AN​ 分钟。 备份必须按编号顺序依次进行&#xff0c;即先第 1 台&#xff0c;再第 2 …...

编程日记 2026/2/14 8:47:57

[网络安全] 滥用Azure内置Contributor角色横向移动至Azure VM

本文来源于团队的超辉老师&#xff0c;其系统分析了Azure RBAC角色模型及其在权限滥用场景下的攻击路径。通过利用AADInternals工具提升用户至Contributor角色&#xff0c;攻击者可在Azure VM中远程执行命令&#xff0c;创建后门账户&#xff0c;实现横向移动。文中详述了攻击步…...

编程日记 2026/2/21 16:20:42

人工智能（AI）系统化学习路线

一、为什么需要系统化学习AI&#xff1f; 人工智能技术正在重塑各行各业&#xff0c;但许多初学者容易陷入误区&#xff1a; ❌ 盲目跟风&#xff1a;直接学习TensorFlow/PyTorch&#xff0c;忽视数学与算法基础。 ❌ 纸上谈兵&#xff1a;只看理论不写代码&#xff0c;无法解…...

编程日记 2026/2/17 3:13:27

Ubuntu系统使用nmcli配置静态IP

1. 配置静态IP 以下命令请全部加上sudo, 否则很可能会报错&#xff01;&#xff01;&#xff01; 列出可用的网络连接 nmcli connection show找到你的 WiFi 连接名称&#xff08;如 "WiFi名称"&#xff09;。 设置静态 IP 地址、网关和 DNS nmcli connection modif…...

编程日记 2026/2/14 3:01:04

vue3，element-plus 表格单选、多选、反选、全选

准备 定义数据 // 表格 const table ref(); // 表格数据 import type { User } from "/interface"; const tableData ref<User[]>([]); // 表格选集 const tableSelection ref<User[]>([]); // 表格选择行 const tableSelectedRow ref<User>…...

编程日记 2026/2/14 14:54:14

ngx_http_core_server_name

定义在 src\http\ngx_http_core_module.c static char * ngx_http_core_server_name(ngx_conf_t *cf, ngx_command_t *cmd, void *conf) {ngx_http_core_srv_conf_t *cscf conf;u_char ch;ngx_str_t *value;ngx_uint_t i;ngx_…...

编程日记 2026/2/16 0:28:53

如何提升库存系统的高并发和稳定性：算法与设计模式

库存系统是企业运营的核心模块&#xff0c;尤其是在电商、零售和供应链管理中&#xff0c;系统的高并发和稳定性直接影响订单处理的准确性和效率。面对海量订单、复杂的库存管理需求&#xff0c;如何在高并发环境下确保库存数据的准确性和系统的稳定性&#xff1f;本文将从架构…...

编程日记 2026/2/14 3:35:06

【Linux】从开发到系统管理深入理解环境变量

文章目录 前言一、环境变量概念1.1 为什么需要环境变量&#xff1f;1.2 环境变量的本质特征 二、环境变量PATH2.1 PATH的运作机制2.2 常见环境变量及其作用2.3 环境变量操作指南 三、再谈环境变量3.1main函数命令行参数解析3.2 环境变量的继承机制3.3 本地变量与内部构建命令 总…...

编程日记 2026/2/15 10:28:05

C++相关

1.定义pos时最好用无符号整型 如uint8_t size_t 编译器可能会有&#xff08;有符号/无符号不匹配&#xff09;的警告 总的来说就是符号一致 2.遇到俩个lambda相互调用的情况 使用std:funtion前置声明 3.回顾了虚函数&#xff0c;定义virtual 就是虚函数 一般是父类指针指向子…...

编程日记 2026/2/16 3:14:36

智算中心系统化建设与运营框架

智算中心系统化建设与运营框架 围绕智算中心全生命周期&#xff0c;从政策驱动到技术落地构建完整解决方案&#xff1a; 一、政策与产业生态 政策支撑体系 算力补贴机制&#xff1a; 国家层面&#xff1a;工信部“东数西算”工程对西部智算中心给予电价优惠&#xff08;0.3元/…...

编程日记 2026/2/14 15:15:19

空气质量查询API：助力健康生活与环境监测的智能工具

引言 随着工业化和城市化的快速发展&#xff0c;空气质量问题日益受到人们的关注。空气质量不仅影响我们的日常生活&#xff0c;还直接关系到我们的健康。因此&#xff0c;了解空气质量指数&#xff08;AQI&#xff09;以及各项污染物的浓度&#xff0c;对于保障人们的健康至关…...

编程日记 2025/7/25 1:55:20

【CGE】社会核算矩阵构建（一）：SAM基本结构

【CGE】社会核算矩阵构建&#xff08;一&#xff09;&#xff1a;SAM基本结构 社会核算矩阵构建&#xff08;一&#xff09;&#xff1a;SAM基本结构一、SAM的概念和基本特点二、SAM的基本结构1.开放经济体的SAM表结构2.SAM表各账户的主要核算内容&#xff08;1&#xff09;社会…...

编程日记 2026/2/16 9:04:36

Ubuntu 系统部署 Ollama + DeepSeek + Docker + Ragflow

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; Mysql数据库规范 一、Ol…...

编程日记 2026/2/14 14:14:01

深入探究 JVM 堆的垃圾回收机制（二）— 回收

GC Roots 枚举需要遍历整个应用程序的上下文&#xff0c;而在进行可达性分析或者垃圾回收时&#xff0c;如果我们还是进行全堆扫描及收集&#xff0c;那么会非常耗时。JVM 将堆分为新生代及老生代&#xff0c;它们的回收频率及算法不一样。 1 回收算法 在进行可达性分析时&am…...

编程日记 2025/9/21 20:09:47

第三讲 | C/C++内存管理完全手册

C/C内存管理 一、 C/C内存分布二、 C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三、 C内存管理方式1. new/delete操作内置类型2. new和delete操作自定义类型 四、operator new和operator delete函数&#xff08;重点&#xff09;五、new和delete的实现原理…...

编程日记 2026/2/14 18:31:22

2021年蓝桥杯第十二届CC++大学B组真题及代码

目录 1A&#xff1a;空间&#xff08;填空5分_单位转换&#xff09; 2B&#xff1a;卡片&#xff08;填空5分_模拟&#xff09; 3C&#xff1a;直线&#xff08;填空10分_数学排序&#xff09; 4D&#xff1a;货物摆放&#xff08;填空10分_质因数&#xff09; 5E&#xf…...

编程日记 2026/2/13 18:46:31

秒杀业务优化之从分布式锁到基于消息队列的异步秒杀

一、业务场景介绍 优惠券、门票等限时抢购常常出现在各类应用中&#xff0c;这样的业务一般为了引流宣传而降低利润&#xff0c;所以一旦出现问题将造成较大损失&#xff0c;那么在业务中就要求我们对这类型商品严格限时、限量、每位用户限一次、准确无误的创建订单&#xff0c…...

编程日记 2026/2/18 11:45:12

IntelliJ IDEA 将 Spring Boot 项目远程部署到服务器

使用 IntelliJ IDEA 将 Spring Boot 项目远程部署到服务器的详细步骤&#xff0c;涵盖多种常见方法&#xff1a; 方法一&#xff1a;通过 SSH Maven 插件直接部署 1. 服务器环境准备 确保服务器已安装&#xff1a; Java 运行环境&#xff08;与项目 JDK 版本一致&#xff0…...

编程日记 2026/2/14 15:47:13

Qt 重入和线程安全

重入和线程安全 在整个文档中&#xff0c;"重入"和 "线程安全 "这两个术语被用来标记类和函数&#xff0c;以表明它们在多线程应用程序中的使用方式&#xff1a; 线程安全函数可以同时被多个线程调用&#xff0c;即使调用使用的是共享数据&#xff0c;因…...

编程日记 2026/2/14 18:54:46

23种设计模式中的策略模式

在策略模式定义了一系列算法或策略&#xff0c;并将每个算法封装在独立的类中&#xff0c;使得它们可以互相替换。通过使用策略模式&#xff0c;可以在运行时根据需要选择不同的算法&#xff0c;而不需要修改客户端代码。 策略模式&#xff1a;Strategy。指的是&#xff0c;定义…...

编程日记 2026/2/14 18:16:38

纯vue手写流程组件

前言 网上有很多的vue的流程组件&#xff0c;但是本人不喜欢很多冗余的代码&#xff0c;喜欢动手敲代码&#xff1b;刚开始写的时候&#xff0c;确实没法下笔&#xff0c;最后一层一层剥离&#xff0c;总算实现了&#xff1b;大家可以参考我写的代码&#xff0c;可以拿过去定制…...

编程日记 2026/2/22 11:51:13