本文主要是介绍HTML静态网页成品作业(HTML+CSS)—— 兰蔻化妆品网页(1个页面),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- 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>
五、源码获取
🥇 ~ 关注我,点赞博文~
每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]
三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧
这篇关于HTML静态网页成品作业(HTML+CSS)—— 兰蔻化妆品网页(1个页面)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!