如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。
1.网页作品简介 ：
HTML期末大学生网页设计作业，一个商场系统，有登录注册界面，可单独作为登录注册的作业使用
2.知识应用：
在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api
3.相关功能介绍
(1) 采用html5+css相关布局
(2) 单独的登录注册界面可以用来单独作为登录注册的相关作业
(3)登录以及注册表单会有相关的验证
4. 内容介绍：
相关界面如下：
首页，首页主要有轮播图，以及商品展示，主要能够学习到前端一些布局，还有轮播图的使用，这里轮播图有两种方式，一种是使用插件，一种是使用原生js的方式，可以根据自己作业的需求来改变，如下是页面图：
核心代码如下：
<div class="header">
<div class="container">
<div class="logo-nav">
<!-- LOGO -->
<div class="logo-nav-left animated wow zoomIn" data-wow-delay=".5s">
<h1><a href="商城首页.html"> YouT<span>你的IT购物网站</span></a></h1>
</div>
<div class="logo-nav-left1">
<nav class="navbar navbar-default">
<div class="navbar-header nav_2">
<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse"
data-target="#bs-megadropdown-tabs">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航栏开始 -->
<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul class="nav navbar-nav">
<li class="active"><a href="商城首页.html" class="act">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">目录 <b
class="caret"></b></a>
<!-- 下拉菜单开始 -->
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4" style="font-size:.8em;">
<ul class="multi-column-dropdown">
<h6>手机/运营商/数码</h6>
<li><a href="products.html">手机通讯</a></li>
<li><a href="products.html">运营商</a></li>
<li><a href="products.html">手机配件</a></li>
<li><a href="products.html">数码配件</a></li>
<li><a href="products.html">智能设备</a></li>
</ul>
</div>
<div class="col-sm-4" style="font-size:.8em;">
<ul class="multi-column-dropdown">
<h6>电脑/办公</h6>
<li><a href="products.html">电脑整机</a></li>
<li><a href="products.html">电脑配件</a></li>
<li><a href="products.html">外设产品</a></li>
<li><a href="products.html">游戏设备</a></li>
<li><a href="products.html">网络产品</a></li>
<li><a href="products.html">办公设备</a></li>
<li><a href="products.html">电脑软件</a></li>
</ul>
</div>
<div class="col-sm-4" style="font-size:.8em;">
<ul class="multi-column-dropdown">
<h6>IT学院</h6>
<li><a href="products.html">Python全栈工程师</a></li>
<li><a href="products.html">PHP入门课程</a></li>
<li><a href="products.html">c++后台开发</a></li>
<li><a href="products.html">云计算/大数据培训</a></li>
<li><a href="products.html">UI/UE设计培训</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</ul>
<!-- 下拉菜单结束 -->
</li>
<li><a href="登录.html">登录</a></li>
<li><a href="注册.html">注册</a></li>
</ul>
</div>
</nav>
</div>
<!-- 搜索框开始 -->
<div class="logo-nav-right">
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="输入你想查找的商品" type="search" id="search">
<input class="sb-search-submit" type="submit" value="" onmouseover="show(1)" ;
onmouseout="show(2)">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch(document.getElementById('sb-search'));
</script>
</div>
<!-- 搜索框结束 -->
<!-- 导航栏结束 -->
<!-- 购物车状态 -->
<div class="header-right">
<div class="cart box_1">
<a href="#">
<h3>
<div class="total">
¥0.00（<span id="simpleCart_quantity" class="simpleCart_quantity">0</span> 件物品）</div>
<img src="images/bag.png" alt="">
</h3>
</a>
<p><a href="javascript:;" class="simpleCart_empty">空购物车</a></p>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- 头部结束 -->
<!-- 巨幕开始 -->
<div class="banner">
<div class="container">
<div class="banner-info animated wow zoomIn" data-wow-delay=".5s">
<h3>欢迎光临YouT</h3>
<h4>全场低至<span span style="font-size:2em;background: transparent;padding: 11px;font-weight:400;">6
</span>折 <span>60% <i>Off/-</i></span></h4>
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-info1">
<p>手机 · 笔记本 · 平板电脑</p>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-info1">
<p>DIY · 台式机 · 外设 · 硬件</p>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-info1">
<p>Python全栈课程 · Web入门 · PHP工程师</p>
</div>
</div>
</article>
</div>
</div>
<!-- 幻灯片效果 -->
<script src="js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
</div>商城列表页主要展示的是商品的列表，这里可以学习到如何排版商品列表，使用了flex的布局
核心代码如下：
<div class="products" style="background: #FFF;">
<div class="container">
<!-- 左侧栏开始 -->
<div class="col-md-4 products-left" style="margin-top:-48px;">
<!-- 目录开始 -->
<div class="categories animated wow slideInUp" data-wow-delay=".5s">
<h3>商品目录</h3>
<ul class="cate">
<li><a href="products.html">热卖商品</a> <span>(10)</span></li>
<li><a href="products.html">数码/手机</a> <span>(18)</span></li>
<ul>
<li><a href="products.html">手机配件</a> <span>(20)</span></li>
<li><a href="products.html">运营商</a> <span>(15)</span></li>
<li><a href="products.html">摄影设备</a> <span>(18)</span></li>
<li><a href="products.html">数码配件</a> <span>(7)</span></li>
<li><a href="products.html">影音娱乐</a> <span>(12)</span></li>
<li><a href="products.html">智能设备</a> <span>(10)</span></li>
</ul>
<li><a href="products.html">软件/网络设备</a> <span>(23)</span></li>
<li><a href="products.html">电脑/办公</a> <span>(24)</span></li>
<ul>
<li><a href="products.html">台式机</a> <span>(12)</span></li>
<li><a href="products.html">笔记本/超级本</a> <span>(15)</span></li>
<li><a href="products.html">电脑配件</a> <span>(4)</span></li>
<li><a href="products.html">外设</a> <span>(10)</span></li>
<li><a href="products.html">办公设备</a> <span>(2)</span></li>
</ul>
</ul>
</div>
<!-- 目录结束 -->
<!-- 新货列表开始 -->
<div class="new-products animated wow slideInUp" data-wow-delay=".5s">
<h3>新货上架</h3>
<!-- 从上至下共三块 -->
<div class="new-products-grids">
<!-- 1开始 -->
<div class="new-products-grid">
<div class="new-products-grid-left">
<a href="single.html"><img src="images/6.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="new-products-grid-right">
<h4><a href="single.html">佳能迷你单反EOS 200D</a></h4>
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
<p> <span class="item_price">¥3999</span><a class="item_add" href="#">添加到购物车 </a>
</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- 1结束 -->
<!-- 2开始 -->
<div class="new-products-grid">
<div class="new-products-grid-left">
<a href="single.html"><img src="images/9.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="new-products-grid-right">
<h4><a href="single.html">苹果IPHONE X 64GB</a></h4>
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
<p> <span class="item_price">¥6999</span><a class="item_add" href="#">添加到购物车 </a>
</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- 2结束 -->
<!-- 3开始 -->
<div class="new-products-grid">
<div class="new-products-grid-left">
<a href="single.html"><img src="images/11.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="new-products-grid-right">
<h4><a href="single.html">戴尔灵越MAX·战台式电脑主机</a></h4>
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
<div class="simpleCart_shelfItem new-products-grid-right-add-cart">
<p> <span class="item_price">¥5666</span><a class="item_add" href="#">添加到购物车 </a>
</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- 3结束 -->
</div>
</div>
<!-- 新货列表结束 -->
<!-- 广告栏 -->
<div class="men-position animated wow slideInUp" data-wow-delay=".5s">
<a href="single.html"><img src="images/27.jpg" alt=" " class="img-responsive" /></a>
<div class="men-position-pos">
<h4>四月<br>销量排行</h4>
<h5>台式电脑<span style="font-size: 2em;">7</span>折起</h5>
</div>
</div>
</div>
<!-- 左侧栏结束 -->
<!-- 商品列表主体开始 -->
<div class="col-md-8 products-right">
<!-- 封面开始 -->
<div class="products-right-grid">
<div class="products-right-grids-position animated wow slideInRight" data-wow-delay=".5s">
<img src="images/18.jpg" alt=" " class="img-responsive" />
<div class="products-right-grids-position1">
<h4 style="font-size:2.4em;">五月特辑</h4>
<p style="font-size: 1.2em;">潮玩科技，从“刷脸”开始——面部识别手机</p>
</div>
</div>
</div>
<!-- 封面结束 -->
<!-- 详细列表开始 -->
<div class="products-right-grids-bottom">
<!-- 从上至下从左至右共九块 -->
<div class="col-md-4 products-right-grids-bottom-grid">
<!-- 1开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/10.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">联想拯救者游戏耳机</a></h4>
<p>虚拟7.1环绕音效</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥299</i> <span class="item_price">¥289</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 1结束 -->
<!-- 2开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/8.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">腾讯听听人工智能音箱</a></h4>
<p>轻轻一按发微信</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥699</i> <span class="item_price">¥599</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 2结束 -->
<!-- 3开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/24.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">威刚2280固态硬盘</a></h4>
<p>支持主板RGB4针控制器</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥199</i> <span class="item_price">¥99</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
</div>
<!-- 3结束 -->
<!-- 4开始 -->
<div class="col-md-4 products-right-grids-bottom-grid">
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/7.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">小度在家智能视频音箱</a></h4>
<p>听歌 看剧 视频</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥599</i> <span class="item_price">¥499</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 4结束 -->
<!-- 5开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/22.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">联想ThinkPad笔记本</a></h4>
<p>i3-6006U 4G 500G 2G独显</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥3599</i> <span class="item_price">¥3099</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 5结束 -->
<!-- 6开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/25.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">宏碁暗影骑士3游戏本</a></h4>
<p>i5-8300H 8G 128G SSD+1T GTX1050</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥5499</i> <span class="item_price">¥5099</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
</div>
<!-- 6结束 -->
<!-- 7开始 -->
<div class="col-md-4 products-right-grids-bottom-grid">
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/20.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">酷孩PSP掌上游戏机5.0</a></h4>
<p>怀旧游戏机 X9 贵族白32G</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥329</i> <span class="item_price">¥199</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 7结束 -->
<!-- 8开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/23.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">金士顿32GB金属U盘</a></h4>
<p>DT SE9H 迷你型 银色亮薄</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥65</i> <span class="item_price">¥35</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
<!-- 8结束 -->
<!-- 9开始 -->
<div class="new-collections-grid1 products-right-grid1 animated wow slideInUp"
data-wow-delay=".5s">
<div class="new-collections-grid1-image">
<a href="single.html" class="product-image"><img src="images/26.jpg" alt=" "
class="img-responsive"></a>
<div class="new-collections-grid1-image-pos products-right-grids-pos">
<a href="single.html">查看详情</a>
</div>
<div class="new-collections-grid1-right products-right-grids-pos-right">
<div class="rating">
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/2.png" alt=" " class="img-responsive">
</div>
<div class="rating-left">
<img src="images/1.png" alt=" " class="img-responsive">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h4><a href="single.html">神画TT-P办公互动投影仪</a></h4>
<p>720P分辨率 隔空触控 自动对焦</p>
<div class="simpleCart_shelfItem products-right-grid1-add-cart">
<p><i>¥2599</i> <span class="item_price">¥1999</span><a class="item_add" href="#">添加到购物车
</a></p>
</div>
</div>
</div>
<!-- 9结束 -->
<div class="clearfix"> </div>
</div>
<!-- 选页框 -->
<nav class="numbering animated wow slideInRight" data-wow-delay=".5s">
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
</ul>
</nav>
<!-- 详细列表结束 -->
</div>
<!-- 商品列表主体结束 -->
<div class="clearfix"> </div>
</div>
</div>
登录注册界面，登录注册界面可以学习一些表单的使用，同时学习到校验的使用
主要代码如下：
<div class="login" style="background: #FFF;">
<div class="container">
<!-- 大标题 -->
<h3 class="animated wow zoomIn" data-wow-delay=".5s">登录</h3>
<p class="est animated wow zoomIn" data-wow-delay=".5s">输入您的账号名和密码以登录YouT</p>
<div class="login-form-grids animated wow slideInUp" data-wow-delay=".5s">
<!-- 表单开始 -->
<form>
<input type="email" placeholder="账号名/邮箱地址" required=" ">
<input type="password" placeholder="密码" required=" ">
<div class="forgot">
<a href="#">忘记密码？</a>
</div>
<input type="submit" value="Login">
</form>
<!-- 表单结束 -->
</div>
<h4 class="animated wow slideInUp" data-wow-delay=".5s">没有账号？</h4>
<p class="animated wow slideInUp" data-wow-delay=".5s"><a href="注册.html">点此注册</a> 或 <a
href="商城首页.html">返回首页<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></p>
</div>
</div>获取完整代码，请关注公众号（coding加油站）获取。
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
