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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上位机图像处理和嵌入式模块部署(f407 mcu中tf卡模拟u盘)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在f407开发板上面&#xff0c;本身是有一个usb接口的。这个usb接口也不仅仅是作为电源使用的&#xff0c;它还可以用来做很多的事情。一方面&#…

pymupdf提取pdf表格及表格数据合并

pymupdf提取pdf表格非常快速&#xff0c;相比其他库是个更好的选择&#xff0e; 一个行列多的表格打印成pdf后会由于页宽分页原因变成多个表格&#xff0c;提取的多个表格需要合并为一个表格&#xff0c;再来处理数据&#xff0e; 下面代码中merge函数用于合并表格&#xff0…

label标签

01、label标签 概述 label标签页属于&#xff1a;form元素的成员之一&#xff0c;它有啥意义呢&#xff1f;它主要用来修饰文本和form元素的指向和体验问题。我们只需要把文本和form元素使用label标签包裹&#xff0c;就可以产生一个奇妙的化学反应。就是&#xff1a;我们点击…

在Spring中如何实现条件化Bean的创建?

在Spring中&#xff0c;实现条件化Bean的创建主要依靠Conditional注解&#xff0c;这个注解允许基于一定的条件来注册Bean。如果条件不满足&#xff0c;那么对应的Bean将不会被创建和注册到Spring的应用上下文中。 以下是如何使用Conditional注解来实现条件化Bean创建的步骤&a…

计算机网络错题答案汇总

王道学习 第1章 计算机网络体系结构 1.1 1.2

vue配置代理服务器解决跨域方法

一.vue配置代理服务器解决跨域方法一 过程如图&#xff1a; 1.在配置文件中设置代理服务器的地址 //vue.config.js module.exports{pages:{index:{// 入口entry:src/main.js,},},lintOnSave:false, //关闭语法检测// 开启代理服务器devServer:{proxy:http://localhost:8000//…

Java基础教程:算术运算符快速掌握

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

SD-WAN简介

一、SD-WAN 定义概念 SD-WAN&#xff08;Software-Defined Wide Area Network&#xff09;&#xff0c;即软件定义广域网&#xff0c;代表了一种具有深远变革意义的网络技术架构和理念。 在传统广域网基础上的创新性演进&#xff0c;融合了软件定义网络&#xff08;SDN&#…

操作系统之银行家算法

目录 前言 银行家算法 定义 举例 策略 思路 结束语 前言 今天是坚持写博客的第16天&#xff0c;已经超过半个月了&#xff0c;希望可以继续坚持&#xff0c;不断积累与回顾&#xff0c;夯实基础知识体系的基础。我们今天来讲讲操作系统当中的另一个重要知识点——银行家…

vue2组件传参方法

一、父传子 1、$refs方法 <template><div class"father"><h1>我是父亲</h1><button click"getHeight">获取身高</button><ChildView ref"childRef"></ChildView></div> </template&…

MATLAB中扩展卡尔曼滤波误差估计的关键点

在MATLAB中&#xff0c;对于扩展卡尔曼滤波&#xff08;EKF&#xff09;的误差估计&#xff0c;主要涉及对系统状态估计的准确性和精度的评估。EKF是一种适用于非线性系统的状态估计方法&#xff0c;它通过递归的方式&#xff0c;结合系统的动态模型和观测模型&#xff0c;来预…

第4章:车辆的横向优化控制

4.1 车辆动力学模型 注1&#xff1a;运动学模型和动力学模型最大的不同点在于 运动学模型是在我们不考虑车辆的受力情况下建立的&#xff08;回顾我们推导出运动学模型的过程&#xff0c;我们没有使用到任何车辆所受的外力作为公式中的已知量&#xff0c;而是直接通过 “ 车速…

2024年BCSP-X小学高年级组初赛真题

一、单项选择题(共15题,每题2分,共计30分) 计算机在工作过程中突然停电,() 中的信息不会丢失。 A. 缓存 B. 寄存器 C. RAM D. ROM中级表达式a*(b+c)-d的后缀形式是( )。 A. a b c d * + - B. a b c + * d - C. a b c * + d - D. - + *a b c d设栈S的初始状态为空,元素a,b,c,d,e…

云计算-云基础设施的配置 (Provisioning Cloud Infrastructure)

AWS CloudFormation (AWS CloudFormation) 它是一项服务&#xff0c;允许我们自动建模和配置所需的AWS资源。可以使用模板来实现这一目的。这个模板基本上是用JSON或YAML格式编写的。AWS CloudFormation会根据模板描述的内容来实施资源的配置和管理。我们可以成组配置和管理一组…

华为交换机的基本配置

实验拓扑&#xff1a; 实验目的&#xff1a;认识二层交换机和二层交换技术的工作原理&#xff1b;认识三层交换和三层交换技术。 三层功能简而言之就是了具有路由的功能&#xff0c;设备可以充当网关和路由器。 实验要求&#xff1a;公司的两个部门用vlan进行划分&#xff0c…

vs中.\ 与 ..\ 区别

100编程书屋_孔夫子旧书网 在 Visual Studio 中&#xff0c;. 和 .. 是表示相对路径的两个特殊符号。 . 表示当前目录&#xff0c;例如&#xff1a;.\file.txt 表示当前目录下的文件 "file.txt"。 .. 表示上一级目录&#xff0c;例如&#xff1a;..\file.txt 表示上…

喵星人必备!福派斯三文鱼猫粮,营养满分!

猫粮品牌&#xff1a;福派斯三文鱼猫粮测评体验 在快节奏的都市生活中&#xff0c;我们的宠物猫也需要适应当下的生活环境&#xff0c;并保持健康和活力。作为一名合格的铲屎官&#xff0c;我们总是关心如何为猫咪提供既健康又美味的饮食。今天&#xff0c;我有幸为大家带来一…

测试计划中都包含哪些内容

测试目的和范围&#xff1a;要明确测试的目的&#xff0c;需要测试哪个功能&#xff1f;要测试哪个软件系统&#xff1f;测试的类型是什么&#xff0c;功能测试、性能测试还是接口测试&#xff0c;测试的阶段是什么&#xff1f;单元测试、集成测试还是系统测试&#xff0c;以及…

Harmony os Next——Retrofit网络库的使用和封装

这里写目录标题 Harmony os Next——Retrofit网络库的使用和封装描述Retrofit的使用BaseService部分功能使用GETPOST 创建拦截器创建实例全局封装 Harmony os Next——Retrofit网络库的使用和封装 描述 Retrofit作为Android平台最为常用的一个第三方网络库&#xff0c;搭配Ko…

【TensorFlow深度学习】循环神经网络RNN的基本结构与功能

循环神经网络RNN的基本结构与功能 循环神经网络&#xff08;RNN&#xff09;的基本结构与功能&#xff1a;时间序列数据的深度解析RNN的基本结构功能与应用场景代码示例&#xff1a;TensorFlow实现简单RNN结语 循环神经网络&#xff08;RNN&#xff09;的基本结构与功能&#x…