HTML静态网页成品作业(HTML+CSS)—— 香奈儿香水介绍网页(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header">
			<div class="logo">
				<img src="./images/logo.png">
			</div>
			<div class="header_right">
				<img src="./images/i1.png">
				<img src="./images/i2.png">
				<img src="./images/i3.png">
				<img src="./images/i4.png">
			</div>
		</div>

		<div class="nav">
			<div class="on"><a href="">香水</a></div>
			<div><a href="">彩妆</a></div>
			<div><a href="">护肤品</a></div>
			<div class="red"><a href="">1 de CHANEL</a></div>
		</div>

		<div class="banner">
			<div class="w">
				<img src="./images/banner.jpeg">
				<div class="banner_abs">
					<div class="banner_abs1">香水</div>
					<div class="banner_abs2">给你奇幻,给你香奈儿</div>
					<a class="banner_abs_btn" href="">探索</a>
				</div>
			</div>
		</div>

		<div class="cats">
			<div class="w">
				<div class="cats1">
					<div class="cats_left">
						<div class="cats_item">
							<div class="cats_tit">
								<span>香奈儿五号香水系列</span>
								<img src="./images/jiantou.png">
							</div>
							<div class="cats_img">
								<img src="./images/x1.jpeg">
								<div class="cats_img_abs">
									<div class="cats_img_abs2">香奈儿五号香水系列</div>
									<a class="cats_img_abs_btn" href="">探索</a>
								</div>

							</div>
						</div>
					</div>

					<div class="cats_right">
						<div class="cats_item">
							<div class="cats_tit">
								<span>香奈儿嘉柏丽尔香水系列</span>
								<img src="./images/jiantou.png">
							</div>
							<div class="cats_img">
								<img src="./images/x2.jpg">
								<div class="cats_img_abs">
									<div class="cats_img_abs1">香水</div>
									<div class="cats_img_abs2">香奈儿嘉柏丽尔香水系列</div>
									<a class="cats_img_abs_btn" href="">探索</a>
								</div>
							</div>
						</div>
						<div class="cats_item">
							<div class="cats_tit">
								<span>香奈儿蔚蓝男士香水系列</span>
								<img src="./images/jiantou.png">
							</div>
							<div class="cats_img">
								<img src="./images/x3.jpg">
								<div class="cats_img_abs">
									<div class="cats_img_abs1">香水</div>
									<div class="cats_img_abs2">香奈儿蔚蓝男士香水系列</div>
									<a class="cats_img_abs_btn" href="">探索</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/674480.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于Acrel-2000E配电室综合监控系统的实际应用分析-安科瑞 蒋静

摘要:“三大工程”指的是保障性住房建设、“平急两用”公共基础设施建设、城中村改造&#xff0c;是我国在建设领域作出的重大决策部署&#xff0c;是根据房地产市场新形势推出的重要举措。其中城中村改造是解决群众急难愁盼问题的重大民生工程&#xff0c;该工程中配电房的建设…

新闻发稿:8个新闻媒体推广中最常见的错误-华媒舍

在数字时代&#xff0c;新闻媒体的推广手段已经越来越多样化。许多媒体在推广过程中常常会犯下一些常见错误。本文将会介绍八个新闻媒体在推广中最常见的错误&#xff0c;并希望能够帮助各位更好地规避这些问题。 1. 缺乏明确的目标受众 在进行推广前&#xff0c;新闻媒体需要…

华为OD机试 - 最大坐标值(Java 2024 D卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

将HTML页面中的table表格元素转换为矩形,计算出每个单元格的宽高以及左上角坐标点,输出为json数据

export function huoQuTableElement() {const tableData []; // 存储表格数据的数组let res [];// 获取到包含表格的foreignObject元素const foreignObject document.getElementById(mydctable);if (!foreignObject){return ;}// 获取到表格元素let oldTable foreignObject…

Orange AIpro开箱上手

0.介绍 首先感谢官方给到机会&#xff0c;有幸参加这次活动。 OrangePi AIpro(8T)采用昇腾AI技术路线&#xff0c;具体为4核64位处理器AI处理器&#xff0c;集成图形处理器&#xff0c;支持8TOPS AI算力&#xff0c;拥有8GB/16GB LPDDR4X&#xff0c;可以外接32GB/64GB/128GB/2…

从小众到主流:KOC如何凭借微影响力塑造品牌传播新格局

随着数字化的飞速发展&#xff0c;KOC作为社交媒体上的一股新兴力量&#xff0c;正以其微小的粉丝基数和高度互动性&#xff0c;引发一场微影响力革命。与传统的KOL不同&#xff0c;KOC通常拥有较小的粉丝基数&#xff0c;但却能够凭借高度互动性和真实的消费者体验&#xff0c…

编写一个问卷界面 并用JavaScript来验证表单内容

倘若文章和代码中有任何错误或疑惑&#xff0c;欢迎提出交流哦~ 简单的html和css初始化 今天使用JavaScript来实现对表单输入的验证&#xff0c; 首先写出html代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset&qu…

FY-SA-20237·8-WhyWeSpin

Translated from the Scientific American, July/August 2023 issue. Why We Spin (我们为什么旋转) Primates may play with reality by twirling around 翻译&#xff1a;灵长类动物有能力通过旋转或旋转运动来操纵或扭曲他们对现实的感知。 解释&#xff1a; “Primates”…

跟着大佬学RE(二)

[ACTF新生赛2020]easyre enc~}|{zyxwvutsrqponmlkjihgfedcba_^]\[ZYXWVUTSRQPONMLKJIHGFEDCBA?><;:9876543210/.-,*)(\0x27&%$# !" v4*F\"N,\"(I? v4list(map(ord,v4)) print(v4) #( v4[i] ! _data_start__[*((char *)v5 i) - 1] ) flaglist(ACTF…

光猫、路由器的路由模式、桥接模式、拨号上网

下面提到的路由器都是家用路由器 一、联网条件 1.每台电脑、路由器、光猫想要上网&#xff0c;都必须有ip地址。 2.电脑获取ip 可以设置静态ip 或 向DHCP服务器(集成在路由器上) 请求ip 电话线上网时期&#xff0c;猫只负责模拟信号和数字信号的转换&#xff0c;电脑需要使…

折半查找二分查找

简介 折半查找也就是二分查找&#xff0c;也可以叫二分法&#xff0c;本质上都是一样的&#xff0c;通过比对中间值与目标值&#xff0c;一次性就能筛掉一半的数字。 举例&#xff1a; 一个猜数字游戏&#xff0c;让你来猜1-100中我选中的数&#xff0c;如果猜中游戏结束&…

EE trade:量化交易需要什么条件才能做

量化交易结合了金融市场知识和计算机科学技术&#xff0c;利用数学和统计模型来进行交易决策。要成功进行量化交易&#xff0c;需要具备以下几个方面的条件&#xff1a; 1. 知识和技能 金融市场知识&#xff1a;需要理解金融市场的基本原理&#xff0c;包括股票、债券、期货、…

学会读书并不简单,如何真正学会读书

一、教程描述 读书是要讲究方法的&#xff0c;否则就会事倍功半&#xff0c;比如&#xff0c;在学习书本上的每一个问题每一章节的时候&#xff0c;首先应当不只看到书面上&#xff0c;而且还要看到书背后的东西&#xff0c;在对书中每一个问题都经过细嚼慢咽&#xff0c;其次…

AI对话聊天软件有哪些?这5款AI软件值得推荐

AI对话聊天软件有哪些&#xff1f;AI对话聊天软件在现代社会中的重要性日益凸显。它们不仅是沟通的工具&#xff0c;更是人们日常生活中的智能助手。通过深度学习和自然语言处理技术&#xff0c;这些软件能够理解我们的意图&#xff0c;提供个性化的建议和服务&#xff0c;让交…

电生明火电火灶是高科技革命还是营销噱头?

电火灶&#xff0c;一个近年来逐渐进入公众视野的新型厨房烹饪设备&#xff0c;凭借其电生明火的独特技术引起了广泛的讨论和关注。然而&#xff0c;关于其是否真正代表高科技革命&#xff0c;还是仅仅是一个营销噱头&#xff0c;外界众说纷纭。今天&#xff0c;我们就来深度解…

在gitlab上发布npm二进制文件

❝ 允许奇迹发生 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 还记得之前我们讲过如何在 npm 上发布二进制文件&#xff1f;吗。我们通过npm将我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中生成Rust二进制文…

进程通信——管道

什么是进程通信&#xff1f; 进程通信是实现进程间传递数据信息的机制。要实现数据信息传递就要进程间共享资源——内存空间。那么是哪块内存空间呢&#xff1f;进程间是相互独立的&#xff0c;一个进程不可能访问其他进程的内存空间&#xff0c;那么这块空间只能由操作系统提…

私有化部署的无忧企业文档,助力企业实现文档权限的精细化管理

在当今数字化快速发展的时代&#xff0c;企业文档管理已成为企业运营中不可或缺的一部分。文档的安全性和访问权限的精确控制对于企业的信息保护至关重要。在无忧企业文档管理系统中&#xff0c;不仅具备强大的内容管理能力&#xff0c;更在权限管理上做到了细致入微。下面我对…

完全背包(类买卖股票问题)

题目传送门——纪念品 题解&#xff1a;这题我一开始以为是简答的那个买卖股票问题&#xff0c;但是做了之后发现并没有那么简单&#xff0c;但是经过思考时候&#xff0c;我发现其和完全背包类问题差不多&#xff0c;怎么说呢&#xff0c;我们首先用p[i][j]去统计每天每种物品…

手写最小的 Agent 系统 — Tiny Agent

调研Agent核心思想&#xff0c;主要有metagpt、React、Reflexion、Toolformer、Swiftsage、Creator等等。Tiny Agent 实现&#xff0c;主要包括 构造大模型、构造工具、构造Agent、运行Agent等步骤。 Agent 核心思想 1. MetaGPT METAGPT: META PROGRAMMING FOR A MULTI-AGEN…