当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 4:36:59

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

文章目录

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

一、作品介绍

🏷️本套采用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>