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

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

这篇关于HTML静态网页成品作业(HTML+CSS)—— 香奈儿香水介绍网页(1个页面)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1027248

相关文章

React 记忆缓存的三种方法实现

《React记忆缓存的三种方法实现》本文主要介绍了React记忆缓存的三种方法实现,包含React.memo、useMemo、useCallback,用于避免不必要的组件重渲染和计算,感兴趣的可以... 目录1. React.memo2. useMemo3. useCallback使用场景与注意事项在 Re

Vue3 如何通过json配置生成查询表单

《Vue3如何通过json配置生成查询表单》本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录功能实现背景项目代码案例功能实现背景通过vue3实现后台管理项目一定含有表格功能,通常离不开表单

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Java中HashMap的用法详细介绍

《Java中HashMap的用法详细介绍》JavaHashMap是一种高效的数据结构,用于存储键值对,它是基于哈希表实现的,提供快速的插入、删除和查找操作,:本文主要介绍Java中HashMap... 目录一.HashMap1.基本概念2.底层数据结构:3.HashCode和equals方法为什么重写Has

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.

通过配置nginx访问服务器静态资源的过程

《通过配置nginx访问服务器静态资源的过程》文章介绍了图片存储路径设置、Nginx服务器配置及通过http://192.168.206.170:8007/a.png访问图片的方法,涵盖图片管理与服务... 目录1.图片存储路径2.nginx配置3.访问图片方式总结1.图片存储路径2.nginx配置