小米商城秒杀页面仿写（html与css学习）（静态页面）

最新推荐文章于 2024-07-14 18:50:22 发布

王子病12

最新推荐文章于 2024-07-14 18:50:22 发布

阅读量4.5k

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/m0_46432295/article/details/104703929

版权

本文介绍了如何使用HTML和CSS仿写小米商城的秒杀页面，虽然过程中遇到挑战，但最终实现了静态页面的相似效果。文章包含原始图片、完成后的展示以及详细的HTML和CSS代码。

摘要由CSDN通过智能技术生成

小米商城秒杀页面仿写

果然写个商城页面太难了。静态也很难写。只能尽量相像。商品图我就不写在页面上了。

小米原图：

在这里插入图片描述

我的成品图：

在这里插入图片描述

html代码：

<! doctype html>
<html>
	<head lang="zh-CN">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!--视窗，宽度默认设备宽度,开始缩放1倍-->
		<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css">
		<!---标准格式-->
		<link rel="stylesheet" href="text.css">
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<title>小米商城</title>
	</head>
	<body class="clear-float">
		<div class="top-nav">
			<div class="border">
				<div class="nav container">
					<div class="left">小米商城 | MIUI | IoT | 云服务 | 金融 | 有品 | 小爱开放平台 | 企业团购 | 资质证照 | 协议规则 | 下载app</div>
					<div class="right">购物车</div>
					<div class="right">登录 | 注册 | 消息通知 |</div>
				</div>
			</div>
		</div>
		<div class="header">
				<div class="container">
					<div class="left picture">
						<img class="logo" src="http://pic192.nipic.com/file/20181119/20144696_101353530633_2.jpg">
					</div>
					<div class="left classify">
						<span>全部商品分类</span>
						<span>小米手机</span>
                        <span>Redmi 红米</span>
						<span>电视</span>
						<span>笔记本</span>	
						<span>家电</span>
						<span>路由器</span>
						<span>智能硬件</span>	
						<span>服务</span>	
						<span>社区</span

最低0.47元/天解锁文章

王子病12

关注

4
点赞
踩
40

收藏

觉得还不错? 一键收藏
3
评论
小米商城秒杀页面仿写（html与css学习）（静态页面）

#小米商城秒杀页面仿写果然写个商城页面太难了。静态也很难写。只能尽量相像。商品图我就不写在页面上了。##小米原图：##我的成品图：html代码：<! doctype html><html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" c...
复制链接

扫一扫