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="">N°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>