HTML静态网页成品作业(HTML+CSS)—— 兰蔻化妆品网页(1个页面)

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

---

一、作品介绍

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

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

<div class="t"><div class="logo"><img src="./images/logo.png" alt=""></div><ul class="nav"><li><a href="">首页</a></li><li><a href="">护肤</a></li><li><a href="">彩妆</a></li><li><a href="">香水</a></li></ul></div><div class="banner"><img src="./images/banner_01.png" width="100%" alt=""></div><div class="content"><div class="c-i"><div class="c-tit">热销产品</div><div class="pro-list"><div class="pro-one"><img src="./images/p1.webp" alt=""><div class="pro-name">「小黑瓶」</div><div class="pro-s-name">¥780/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p2.webp" alt=""><div class="pro-name">「大眼精华」</div><div class="pro-s-name">¥790/20ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p3.webp" alt=""><div class="pro-name">「发光眼霜」</div><div class="pro-s-name">¥600/15ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p4.webp" alt=""><div class="pro-name">「安神精华」</div><div class="pro-s-name">¥860/50ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p5.webp" alt=""><div class="pro-name">菁纯气垫</div><div class="pro-s-name">¥750</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p6.webp" alt=""><div class="pro-name">菁纯面霜</div><div class="pro-s-name">¥1580/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p7.webp" alt=""><div class="pro-name">菁纯眼霜</div><div class="pro-s-name">¥1200/20ml</div><div class="pro-s-buy"><button>立即选购</button></div></div><div class="pro-one"><img src="./images/p8.webp" alt=""><div class="pro-name">菁纯面霜</div><div class="pro-s-name">¥1580/30ml</div><div class="pro-s-buy"><button>立即选购</button></div></div></div></div><div class="c-i"><div class="c-tit">尊享服务</div><div class="w-img"><img src="./images/fw.png" alt=""></div></div></div>

五、源码获取

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