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>
|
<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
|
<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
<br />
©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">用 户 名: <input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名"/><span>请不要输入汉字</span></div>
<div class="username">密 码: <input class="shurukuang" type="password" name="password" placeholder="请输入你的密码"/><span>请输入6位以上字符</span></div>
<div class="username">确认密码: <input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码"/><span>两次密码要输入一致哦</span></div>
<div class="username">手 机 号: <input class="shurukuang" type="text" name="tel" placeholder="请填写正确的手机号"/><span>填写下手机号吧,方便我们联系您!</span></div>
<div class="username">
<div id="code">验 证 码: <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>
|
<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
|
<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
<br />
©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>
|
<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
|
<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
<br />
©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>
|
<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
|
<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
<br />
©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>
|
<a href="#" style="text-decoration: none; color: #003366;">网站首页</a>
|
<a href="#" style="text-decoration: none; color: #003366;">管理后台</a>
<br />
©XXX
</div>
</body>
</html>
以上都是H5结构的参考。我把源代码发到csdn上,或者可以私我发你。