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

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

文章目录


一、作品介绍

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

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<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.想要获取本文源码,点击前往吧

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css