H5商城网站

login
在这里插入图片描述
login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Login</title>
		<link href="css/login.css" rel="stylesheet" />
	</head>
	<body>
		<div class="welcome">
			<p class="left">欢迎来到Floda网上商城</p>
		</div>
		<div class="welcome">
			<a class="link" href="login.html">
				<p class="right">请登录</p>
			</a>
		</div>
		<hr class="hr"/>
		<div class="img">
			<img src="img/logo.png" />
		</div>
		<div style="height: 450px;">
			<div class="form">
				<form action="/action_page.php">
					<label for="name">用户名</label>
					<input class="text" type="text" id="name" name="用户名" placeholder="您的用户名">
					<label for="password">密码</label>
					<input class="text" type="password" id="password" name="密码" placeholder="您的密码">
					<div style="text-align: center;">
						<a href="index.html">
						<input class="submit" type="button" value="确定">
						</a>
					</div>
				</form>
			</div>
		</div>
	<div class="footer">
		<div style="height: 5px; background-color: #CCCCCC;"></div>
			<a href="#" style="text-decoration: none; color: #003366; ">联系我们</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
			<br />
			&copy;XXX
	</div>
	</body>
</html>

register
在这里插入图片描述
register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>Register</title>
		<link rel="stylesheet" type="text/css" href="css/register.css">
	</head>
	<body>
		<div>
			<div class="welcome">
				<p class="left">欢迎来到Floda网上商城</p>
			</div>
			<div class="welcome">
				<p class="right">正在注册</p>
			</div>
		</div>
		
		<hr class="hr" />
		<form  method="post">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">用户注册</div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
					<div class="username">&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名"/><span>请不要输入汉字</span></div>
					<div class="username">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="password" placeholder="请输入你的密码"/><span>请输入6位以上字符</span></div>
					
					<div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码"/><span>两次密码要输入一致哦</span></div>
					<div class="username">&nbsp;&nbsp;&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" name="tel" placeholder="请填写正确的手机号"/><span>填写下手机号吧,方便我们联系您!</span></div>
					<div class="username">
						<div id="code">&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma" type="text" name="username" placeholder="请输入验证码"/>
							<span style="padding-left: 3px;"><img src="img/yanzhengma.jpg"></span>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="button" onclick="window.location.href='index.html'" value="立即注册" >
				</div>
				
			</div>
		</div>
		</form>
		<div class="footer">
			<div style="height: 5px; background-color: #CCCCCC;"></div>
				<a href="#" style="text-decoration: none; color: #003366; ">联系我们</a>
				&nbsp;|&nbsp;
				<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
				&nbsp;|&nbsp;
				<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
				<br />
				&copy;XXX
		</div>
	</body>
</html>

index1
然后上面的广告页的那块是轮播图。
在这里插入图片描述
注意这个小细节,这个模块不仅做了返显,还有做了子类模块。
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Home</title>
	    <link rel="stylesheet" href="css/index.css">
	    <script src="js/index.js"></script>
	</head>
	<body>
		<div >
			<div class="welcome">
				<p class="left">欢迎来到Floda网上商城</p>
			</div>
			<div class="welcome">
				<p class="right">
					<a href="login.html">登录</a>|<a href="register.html">注册</a>
				</p>
			</div>
		</div>
		
		<hr class="hr" />
		
		<div class="row">
		<div class="one">
			<p class="one_img"><img src="img/logo.png" /></p>	
		</div>
		<div class="tow">
			<div class="topnav">
			  <a href="index.html">主页</a>
			  <a href="product.html">商品</a>
			  <a href="register.html">注册</a>
			  <a href="cart.html">购物车</a>
			  <a href="#">联系我们</a>
			</div>
		</div>
		<div class="three">
			<div class="container">
			    <form action="" class="parent">
			        <input type="text" placeholder=" 请输入搜索条件...">
			        <input type="button" value="搜索" >
			    </form>
			</div>
		</div>
	</div>

	<div class="app">
        <div class="scroll">

            <img src="img/20190919083619958.jpg" alt="scrollImage" class="img current">
            <img src="img/20190919083711843.jpg" alt="scrollImage" class="img">
            <img src="img/20190919083634298.jpg" alt="scrollImage" class="img">
            <img src="img/2019091908370050.jpg" alt="scrollImage" class="img">
            <img src="img/20190919083723426.jpg" alt="scrollImage" class="img">
 

            <div class="lf"></div>
            <div class="lr"></div>

            <div class="dots">
                <span class="square"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

	<div class="sub_banner center">
					<div class="sidebar fl">
						<div class="fl"><a href=""><img src="img/hjh_01.gif"></a></div>
						<div class="fl"><a href=""><img src="img/hjh_02.gif"></a></div>
						<div class="fl"><a href=""><img src="img/hjh_03.gif"></a></div>
						<div class="fl"><a href=""><img src="img/hjh_04.gif"></a></div>
						<div class="fl"><a href=""><img src="img/hjh_05.gif"></a></div>
						<div class="fl"><a href=""><img src="img/hjh_06.gif"></a></div>
						<div class="clear"></div>
					</div>
					<div class="datu fl"><a href=""><img src="img/hongmi4x.png" alt="" /></a></div>
					<div class="datu fl"><a href=""><img src="img/xiaomi5.jpg" alt=""></a></div>
					<div class="datu fr"><a href=""><img src="img/pinghengche.jpg" alt=""></a></div>
					<div class="clear"></div>
			
			
				</div>

				<div class="danpin center">
					
					<div class="biaoti center">Main Products</div>
					<div class="main center">
						<div class="mingxing fl">
							<div class="sub_mingxing"><a href=""><img src="img/pinpai1.png" alt=""></a></div>
							<div class="pinpai"><a href="">小米MIX</a></div>
							<div class="youhui">5月9日-21日享花呗12期分期免息</div>
							<div class="jiage">3499元起</div>
						</div>
						<div class="mingxing fl">
							<div class="sub_mingxing"><a href=""><img src="img/pinpai2.png" alt=""></a></div>
							<div class="pinpai"><a href="">小米5s</a></div>
							<div class="youhui">5月9日-10日,下单立减200元</div>
							<div class="jiage">1999元</div>
						</div>
						<div class="mingxing fl">
							<div class="sub_mingxing"><a href=""><img src="img/pinpai3.png" alt=""></a></div>
							<div class="pinpai"><a href="">小米手机5 64GB</a></div>
							<div class="youhui">5月9日-10日,下单立减100元</div>
							<div class="jiage">1799元</div>
						</div>
						<div class="mingxing fl"> 	
							<div class="sub_mingxing"><a href=""><img src="img/pinpai4.png" alt=""></a></div>
							<div class="pinpai"><a href="">小米电视3s 55英寸</a></div>
							<div class="youhui">5月9日,下单立减200元</div>
							<div class="jiage">3999元</div>
						</div>
						<div class="mingxing fl">
							<div class="sub_mingxing"><a href=""><img src="img/pinpai5.png" alt=""></a></div>
							<div class="pinpai"><a href="">小米笔记本</a></div>
							<div class="youhui">更轻更薄,像杂志一样随身携带</div>
							<div class="jiage">3599元起</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
	
	<div class="footer">
		<div style="height: 5px; background-color: #CCCCCC;"></div>
			<a href="#" style="text-decoration: none; color: #003366; ">联系我们</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
			<br />
			&copy;XXX
	</div>
	
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Product</title>
		<link rel="stylesheet" href="css/product.css">
	</head>
	<body>
		<div>
			<div class="welcome">
				<p class="left">欢迎来到Floda网上商城</p>
			</div>
			<div class="welcome">
				<p class="right">已登录</p>
			</div>
		</div>
		
		<hr class="hr" />
		
		<div class="danpin center">
			
			<div class="biaoti center">Product</div>
			<div class="main center">
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href="" target="_blank"><img src="img/liebiao_xiaomi6.jpg" alt=""></a>
					</div>
					<div class="pinpai">
						<a href="" target="_blank">小米6</a>
					</div>
					<div class="youhui">5.16早10点开售</div>
					<div class="jiage">2499.00元</div>
				</div>
				
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_xiaomi5c.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米手机5c</a></div>
					<div class="youhui">搭载澎湃S1 八核高性能处理器</div>
					<div class="jiage">1499.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_xiaomint2.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米Note 2</a></div>
					<div class="youhui">5月9日-20日 小米Note 2 享花呗12期分期免息</div>
					<div class="jiage">2799.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_xiaomimix.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米MIX</a></div>
					<div class="youhui">5月9日-20日小米MIX 享花呗12期分期免息</div>
					<div class="jiage">3499.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_xiaomi5s.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米5s</a></div>
					<div class="youhui">“暗夜之眼”超感光相机 / 无孔式超声波</div>
					<div class="jiage">1999.00元</div>
				</div>
		
				<div class="clear"></div>
			</div>
			<div class="main center mb20">
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_xiaomi5.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米手机5</a></div>
					<div class="youhui">骁龙820处理器 / UFS 2.0 闪存</div>
					<div class="jiage">1799.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_hongmin4.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">红米Note 4</a></div>
					<div class="youhui">十核旗舰处理器 / 全金属一体化机身 </div>
					<div class="jiage">1399.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/pinpai3.png" alt=""></a>
					</div>
					<div class="pinpai"><a href="">小米手机5 64GB</a></div>
					<div class="youhui">5月9日-10日,下单立减100元</div>
					<div class="jiage">1799元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_hongmin42.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">红米4</a></div>
					<div class="youhui">2.5D 玻璃,金属一体化机身</div>
					<div class="jiage">999.00元</div>
				</div>
				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid #003366'">
					<div class="sub_mingxing">
						<a href=""><img src="img/liebiao_hongmin4x.jpg" alt=""></a>
					</div>
					<div class="pinpai"><a href="">红米Note 4X 全网通版</a></div>
					<div class="youhui">多彩金属 / 4100mAh 超长续航</div>
					<div class="jiage">1299.00元</div>
				</div>
				
				<div class="clear"></div>

			</div>
			<div class="footer">
				<div style="height: 5px; background-color: #CCCCCC;"></div>
				<a href="#" style="text-decoration: none; color: #003366; ">联系我们</a>
				&nbsp;|&nbsp;
				<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
				&nbsp;|&nbsp;
				<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
				<br />
				&copy;XXX
				</div>
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Shopping Cart</title>
		<link rel="stylesheet" href="css/cart.css">
	</head>
	<body>
		<div>
			<div class="welcome">
				<p class="left">欢迎来到Floda网上商城</p>
			</div>
			<div class="welcome">
				<p class="right">已登录</p>
			</div>
		</div>
		
		<hr class="hr" />
		
		<div class="gwcxqbj">
			<div class="biaoti center">Shopping Cart</div>
			<div class="gwcxd center">
				<div class="top2 center">
					<div class="sub_top fl">
						<input type="checkbox" value="quanxuan" class="quanxuan" />全选
					</div>
					<div class="sub_top fl">商品名称</div>
					<div class="sub_top fl">单价</div>
					<div class="sub_top fl">数量</div>
					<div class="sub_top fl">小计</div>
					<div class="sub_top fr">操作</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center">
					<div class="sub_content fl ">
						<input type="checkbox" value="quanxuan" class="quanxuan" />
					</div>
					<div class="sub_content fl"><img src="./img/gwc_xiaomi6.jpg"></div>
					<div class="sub_content fl ft20">小米6全网通6GB内存+64GB 亮黑色</div>
					<div class="sub_content fl ">2499元</div>
					<div class="sub_content fl">
						<input class="shuliang" type="number" value="1" step="1" min="1" >
					</div>
					<div class="sub_content fl">2499元</div>
					<div class="sub_content fl"><a href="">×</a></div>
					<div class="clear"></div>
				</div>
				<div class="content2 center">
					<div class="sub_content fl ">
						<input type="checkbox" value="quanxuan" class="quanxuan" />
					</div>
					<div class="sub_content fl"><img src="img/gwc_xiaomi6.jpg"></div>
					<div class="sub_content fl ft20">小米6全网通6GB内存+64GB 亮黑色</div>
					<div class="sub_content fl ">2499元</div>
					<div class="sub_content fl">
						<input class="shuliang" type="number" value="1" step="1" min="1" >
					</div>
					<div class="sub_content fl">2499元</div>
					<div class="sub_content fl"><a href="">×</a></div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="jiesuandan mt20 center">
				<div class="tishi fl ml20">
					<ul>
						<li><a href="product.html">继续购物</a></li>
						<li>|</li>
						<li><span>2</span>件商品,已选择<span>1</span></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="jiesuan fr">
					<div class="jiesuanjiage fl">合计(不含运费):<span>2499.00元</span></div>
					<div class="jsanniu fr"><input class="jsan" type="submit" name="jiesuan"  value="去结算"/></div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<div style="height: 5px; background-color: #CCCCCC;"></div>
			<a href="#" style="text-decoration: none; color: #003366; ">联系我们</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
			&nbsp;|&nbsp;
			<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
			<br />
			&copy;XXX
			</div>
	</body>
</html>

以上都是H5结构的参考。我把源代码发到csdn上,或者可以私我发你。

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值