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.想要获取本文源码，点击前往吧