用HTML，css,boostrap写一个综合大型购物网站
首先来看看页面的效果：
有需要的可以参考
首先是首页index:
<!DOCTYPE html>
<html>
<head>
<!-- 先把bootstrap里面的css、jQuery和bootstrap.js三个文件按顺序加载进来 -->
<meta charset="utf-8">
<title>Mrsjiang</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="wangzhang.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- 页面小屏的时候（这里设置的是(min-width: 768px)）出现的汉堡按钮 -->
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
<!-- 这里是汉堡式菜单显示隐藏的折叠开关 -->
<!-- data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 .icon-bar 的 <span> 创建汉堡按钮里面的那三根线。 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 页面大屏的时候出现导航栏 -->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">最近浏览</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</li>
</ul>
</div>
</nav>
<div class="fl">
<span class="dong fl-font"> 欢迎下载折扣店APP,折扣店随时随地带你购物！
</span>
<div class="one">
<a class="navbar-brand left1" href="#">
<img alt="Brand" src="logo1.png">
</a>
<div class="one1 right1">
<form class="form-inline in-bl">
<div class="form-group bl">
<input type="text" class="form-control input-lg" id="sub" placeholder="搜索一下">
</div>
<button type="submit" class="btn btn-default btn-lg ">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
<div class="img1">
<img src="love.png" alt=""></div>
<div class="img1"> <img src="bag.png" alt=""></div>
<div>
<a href="register.html">
<button class="btn btn-default btn-lg btn1">注册账户</button>
</a>
</div>
</div>
</div>
<ul class="nav nav-pills">
<li role="presentation" class="dropdown"><a href="#">首页</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
今日最新 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">精选女装</a></li>
<li><a href="#">秋装外套</a></li>
<li><a href="#">温暖毛衣</a></li>
<li><a href="#">毛呢外套</a></li>
<li><a href="#">夏季短袖</a></li>
<li><a href="#">夏季热卖</a></li>
<li><a href="#">长袖衬衫</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
女装 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">秋款风衣</a></li>
<li><a href="#">机车皮衣</a></li>
<li><a href="#">秋款连衣裙</a></li>
<li><a href="#">小脚裤</a></li>
<li><a href="#">乞丐裤</a></li>
<li><a href="#">潮流裤</a></li>
<li><a href="#">休闲裤</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
男装 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">个性潮男</a></li>
<li><a href="">时尚休闲</a></li>
<li><a href="">商务绅士</a></li>
<li><a href="">休闲衬衫</a></li>
<li><a href="">西服套装</a></li>
<li><a href="">直筒西裤</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
儿童服饰 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">毛衣|针织衫</a></li>
<li><a href="">儿童男装</a></li>
<li><a href="">儿童女装</a></li>
<li><a href="">表演服饰</a></li>
<li><a href="">亲子装</a></li>
<li><a href="">休闲套装</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
男包|女包 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">秋新款</a></li>
<li><a href="">单肩包</a></li>
<li><a href="">斜挎包</a></li>
<li><a href="">手提包</a></li>
<li><a href="">大牌包</a></li>
<li><a href="">钱包</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
潮流前线 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">珠宝首饰</a></li>
<li><a href="">时尚饰品</a></li>
<li><a href="">品质手表</a></li>
<li><a href="">眼镜配饰</a></li>
<li><a href="">男人饰品</a></li>
<li><a href="">原创饰品</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
大牌领先看 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href=""> CHANEL</a></li>
<li><a href=""> PARADA</a></li>
<li> <a href=""> GUCCI</a></li>
<li> <a href=""> HERMES</a></li>
<li><a href=""> Armani</a></li>
<li> <a href=""> Versace</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
今日折扣 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href=""> 香奈儿8折</a></li>
<li><a href=""> 普拉达7折</a></li>
<li> <a href=""> 古驰5折</a></li>
<li> <a href="">爱马仕9折</a></li>
<li><a href=""> 阿玛尼8折</a></li>
<li> <a href="">范思哲9折</a></li>
</ul>
</li>
</ul>
<div class="row">
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active img-h">
<img src="images/banner_04.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item img-h">
<img src="images/banner_01.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item img-h">
<img src="images/banner_02.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item img-h">
<img src="images/banner_03.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item img-h">
<img src="images/banner_05.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="right">
<div class="right-left">
<img src="images/sale (2).jpg" title="粉色衬衣" />
</div>
<div class="right-right">
<h4><a href="card.html">纯棉商务休闲衬衣</a></h4>
<p> 精致与休闲造型兼备的牛津纺衬衫。简约素雅的风格，新潮百搭
<h5 style="color:#F30 "> 特价￥299</h5>
</div>
</div>
<div class="right">
<div class="right-left">
<img src="images/sale (3).jpg" title="儿童卫衣" />
</div>
<div class="right-right">
<h4><a href="card.html">亲子儿童卫衣</a></h4>
<p> 2020秋装新款女神的新衣张馨予同款亲子装儿童装卫衣 朗姿LANCY
<h5 style="color:#F30 "> 特价￥399</h5>
</div>
</div>
<div class="right">
<div class="right-left">
<img src="images/sale (1).jpg" title="女士靴子" /> </div>
<div class="right-right">
<h4><a href="card.html">防水台真皮靴子</a></h4>
<p> 佰缌2014秋冬新款欧美尖头粗跟短靴高跟 防水台真皮铆钉女式靴子
<h5 style="color:#F30 "> 特价￥699</h5>
</div>
</div>
<div class="right">
<div class="right-left">
<img src="images/sale(4).jpg" title="女士靴子" /> </div>
<div class="right-right">
<h4><a href="card.html">黑色帽子</a></h4>
<p> 2020秋季新款女神的新衣张馨予同款帽子 朗姿LANCY
<h5 style="color:#F30 "> 特价￥699</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6 col-sm-6">
<a href="card.html"><img src="images/pic1.jpg" />
<div class="center1">
<h4>流行风向</h4>
<a href="">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<a href="card.html"><img src="images/pic2.jpg" />
<div class="center1">
<h4>时尚前沿</h4>
<a href="">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<a href="card.html"> <img src="images/pic3.jpg" />
<div class="center1">
<h4>踮起脚尖</h4>
<a href="">查看更多</a>
</div>
</div>
<div class="col-md-3 col-xs-6 col-sm-6">
<a href="card.html"><img src="images/pic4.jpg" />
<div class="center1">
<h4>独一无二</h4>
<a href="">查看更多</a>
</div>
</div>
</div>
<div class="down">
<div class="down-one">
<h4>购物指南</h4>
<ul class="f_nav">
<li><a href="goodslist.html">购物流程</a></li>
<li><a href="goodslist.html">会员介绍</a></li>
<li><a href="goodslist.html">团购|机票</a></li>
<li><a href="goodslist.html">常见问题</a></li>
<li><a href="goodslist.html">意见反馈</a></li>
<li><a href="goodslist.html">联系客服</a></li>
</ul>
</div>
<div class="down-one">
<h4>配送方式</h4>
<ul class="f_nav">
<li><a href="goodslist.html">上门自取</a></li>
<li><a href="goodslist.html">211限时到达</a></li>
<li><a href="goodslist.html">配送服务查询</a></li>
<li><a href="goodslist.html">配送费收取标准</a></li>
<li><a href="goodslist.html">同城配送</a></li>
<li><a href="goodslist.html">海外配送</a></li>
</ul>
</div>
<div class="down-one">
<h4>支付方式</h4>
<ul class="f_nav">
<li><a href="#">支付政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修|退换货</a></li>
<li><a href="#">取消订单</a></li>
<li><a href="#">订单详情</a></li>
</ul>
</div>
<div class="down-one">
<h4>售后服务</h4>
<ul class="f_nav">
<li><a href="#">售后政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修|退换货</a></li>
<li><a href="#">取消订单</a></li>
<li><a href="#">订单详情</a></li>
</ul>
</div>
<div class="down-one">
<h4>商家服务</h4>
<ul class="f_nav">
<li><a href="#">商家帮助</a></li>
<li><a href="#">商家入驻</a></li>
<li><a href="#">新手指导</a></li>
<li><a href="#">培训中心</a></li>
<li><a href="#">信息公告</a></li>
<li><a href="#">广告服务</a></li>
</ul>
</div>
</div>
<div class="down">
<div class="">
<div class="fl">
<img src="images/picll.jpg" title="点击领取优惠券" />
<span class="dong">领取优惠券后购买更实惠</span>
</div>
</div>
<div class="fra">
折扣店服装公司地址：<br />
中国<br />
陕西/安康市<br />
高新区高新现代城<br />
Tel: 1988435162523<br />
Email: <a href="http://weibo.com/">jhl@qq.com</a>
</div>
<div class="">
<div class="fl">
<span class="dong fl-color"> 美丽百分百，折扣店让你快人一步</span>
<img src="images/social.png" title="分享更快乐" usemap="#mapxie" />
<map name="mapxie" id="mapxie">
<area shape="rect" coords="5,5,50,45" href="http://weibo.com/" alt="" target="_blank">
<area shape="rect" coords="55,5,100,45"
href="http://openapi.qzone.qq.com/oauth/show?client_id=217921&display=pc&redirect_uri=http%3A%2F%2Fwww.douguo.com%2Fapi%2Ftx_get_access_token&response_type=code&scope=all&which=Login"
alt="" target="_blank">
<area shape="rect" coords="110,5,150,45" href="http://wx.qq.com/" alt="" target="_blank">
<area shape="rect" coords="165,5,200,45" href="http://www.renren.com/" alt="" target="_blank">
<area shape="rect" coords="220,5,260,45" href="http://t.qq.com/" alt="" target="_blank">
</map>
<textarea class="form-control" rows="3" placeholder="亲留下您的宝贵意见"></textarea>
<button type="submit" class="pull-right btn btn-primary bt-margin">留言</button>
</div>
</div>
</div>
<div class="footer">
<p>关于我们 - 版权声明 - 帮助(？) - 联系我们 - 友情链接 - 用户注册 - 地图<br />
hill may的折扣店 版权所有 jinaghanlin 2020-2021 Hill may.com 陕西省安康市汉滨区</p>
</div>
</body>
</html>
接下来是购物车页面cardlist:
<!DOCTYPE html>
<html>
<head>
<!-- 先把bootstrap里面的css、jQuery和bootstrap.js三个文件按顺序加载进来 -->
<meta charset="utf-8">
<title>Mrsjiang</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="wangzhang.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- 页面小屏的时候（这里设置的是(min-width: 768px)）出现的汉堡按钮 -->
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
<!-- 这里是汉堡式菜单显示隐藏的折叠开关 -->
<!-- data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 .icon-bar 的 <span> 创建汉堡按钮里面的那三根线。 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 页面大屏的时候出现导航栏 -->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">最近浏览</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</li>
</ul>
</div>
</nav>
<div class="fl">
<span class="dong fl-font"> 欢迎下载折扣店APP,折扣店随时随地带你购物！
</span>
<div class="one">
<a class="navbar-brand left1" href="#">
<img alt="Brand" src="logo1.png">
</a>
<div class="one1 right1">
<form class="form-inline in-bl">
<div class="form-group bl">
<input type="text" class="form-control input-lg" id="sub" placeholder="搜索一下">
</div>
<button type="submit" class="btn btn-default btn-lg ">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
<div class="img1">
<img src="love.png" alt=""></div>
<div class="img1"> <img src="bag.png" alt=""></div>
<div>
<a href="register.html">
<button class="btn btn-default btn-lg btn1">注册账户</button>
</a>
</div>
</div>
</div>
<ul class="nav nav-pills">
<li role="presentation" class="dropdown"><a href="#">首页</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
今日最新 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">精选女装</a></li>
<li><a href="#">秋装外套</a></li>
<li><a href="#">温暖毛衣</a></li>
<li><a href="#">毛呢外套</a></li>
<li><a href="#">夏季短袖</a></li>
<li><a href="#">夏季热卖</a></li>
<li><a href="#">长袖衬衫</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
女装 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">秋款风衣</a></li>
<li><a href="#">机车皮衣</a></li>
<li><a href="#">秋款连衣裙</a></li>
<li><a href="#">小脚裤</a></li>
<li><a href="#">乞丐裤</a></li>
<li><a href="#">潮流裤</a></li>
<li><a href="#">休闲裤</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
男装 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">个性潮男</a></li>
<li><a href="">时尚休闲</a></li>
<li><a href="">商务绅士</a></li>
<li><a href="">休闲衬衫</a></li>
<li><a href="">西服套装</a></li>
<li><a href="">直筒西裤</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
儿童服饰 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">毛衣|针织衫</a></li>
<li><a href="">儿童男装</a></li>
<li><a href="">儿童女装</a></li>
<li><a href="">表演服饰</a></li>
<li><a href="">亲子装</a></li>
<li><a href="">休闲套装</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
男包|女包 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">秋新款</a></li>
<li><a href="">单肩包</a></li>
<li><a href="">斜挎包</a></li>
<li><a href="">手提包</a></li>
<li><a href="">大牌包</a></li>
<li><a href="">钱包</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
潮流前线 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">珠宝首饰</a></li>
<li><a href="">时尚饰品</a></li>
<li><a href="">品质手表</a></li>
<li><a href="">眼镜配饰</a></li>
<li><a href="">男人饰品</a></li>
<li><a href="">原创饰品</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
大牌领先看 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href=""> CHANEL</a></li>
<li><a href=""> PARADA</a></li>
<li> <a href=""> GUCCI</a></li>
<li> <a href=""> HERMES</a></li>
<li><a href=""> Armani</a></li>
<li> <a href=""> Versace</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
今日折扣 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href=""> 香奈儿8折</a></li>
<li><a href=""> 普拉达7折</a></li>
<li> <a href=""> 古驰5折</a></li>
<li> <a href="">爱马仕9折</a></li>
<li><a href=""> 阿玛尼8折</a></li>
<li> <a href="">范思哲9折</a></li>
</ul>
</li>
</ul>
<div class="cart1">
<div class="cart1-right"><img src="images/bag1.png" />我的购物车/5件商品</div>
<div class="cart1-left "><img src="images/art1.png" />喜爱收藏的商品</div>
</div>
<div class="">
<div class="card2">
<div class="card2-left">
<img src="images/choose1.jpg" width="105px" height="142px" />
<div class="cart2-middle">
<h4> <a href="">2014春秋装新款女装长袖针织衫女秋冬韩版外搭毛衣厚大码开衫外套</a></h4>
<p> 选择你喜欢的颜色</p>
<form>
<input type="checkbox" name="颜色" value="color 1" />
明黄色
<input type="checkbox" name="颜色" value="color2" />
湖蓝色
<input type="checkbox" name="颜色" value="color3" />
浅绿色
<input type="checkbox" name="颜色" value="color4" />
大红色
<input type="checkbox" name="颜色" value="color5" />
粉红色
<input type="checkbox" name="颜色" value="color6" />
橙子色
</form>
<p>你选择的尺码：M码|订单编号：15942659863</p>
<div class="cart2-icon">
<div class="middle-pic1"><img src="images/s_icon1.png" /></div>
<div class="middle-pic1"><img src="images/s_icon2.png" /></div>
<div class="middle-pic1"><img src="images/s_icon3.png" /></div>
</div>
</div>
</div>
<div class="card-right">
<p>优惠：9月特惠到10.1 全国满199包邮</p>
<p>促销：会员享受8折优惠</p>
<p>价格：<strong>8折限时优惠￥299</strong></p>
<a href=" ">
<button class="btn btn-warning btn-lg ">立刻购买>></button>
</a>
</div>
</div>
<div class="card2">
<div class="card2-left">
<img src="images/choose2.jpg" width="105px" height="142px" />
<div class="cart2-middle">
<h4> <a href="">女神的新衣Nana林珍娜同款预售伊芙丽2014新款马甲套装一起更优惠</a></h4>
<p> 选择适合你的尺码和颜色</p>
<form>
<input type="checkbox" name="颜色" value="color 1" />
明黄色
<input type="checkbox" name="颜色" value="color2" />
湖蓝色
<input type="checkbox" name="颜色" value="color3" />
浅绿色
<input type="checkbox" name="颜色" value="color4" />
大红色
<input type="checkbox" name="颜色" value="color5" />
粉红色
<input type="checkbox" name="颜色" value="color6" />
橙子色
</form>
<p>你选择的尺码：M码|订单编号：154849259863</p>
<div class="cart2-icon">
<div class="middle-pic1"><img src="images/s_icon1.png" /></div>
<div class="middle-pic1"><img src="images/s_icon2.png" /></div>
<div class="middle-pic1"><img src="images/s_icon3.png" /></div>
</div>
</div>
</div>
<div class="card-right">
<p>优惠：9月特惠到10.1 全国满199包邮</p>
<p>促销：会员享受8折优惠</p>
<p>价格：<strong>8折限时优惠￥399</strong></p>
<a href=" ">
<button class="btn btn-warning btn-lg ">立刻购买>></button>
</a>
</div>
</div>
<div class="card2">
<div class="card2-left">
<img src="images/choose3.jpg" width="105px" height="142px" />
<div class="cart2-middle">
<h4> <a href="">>预售女神的新衣 ASOBIO 2014 尚雯婕明星同款优雅修身礼服连衣裙</a></h4>
<p> 选择你喜欢的颜色</p>
<form>
<input type="checkbox" name="颜色" value="color 1" />
明黄色
<input type="checkbox" name="颜色" value="color2" />
湖蓝色
<input type="checkbox" name="颜色" value="color3" />
浅绿色
<input type="checkbox" name="颜色" value="color4" />
大红色
<input type="checkbox" name="颜色" value="color5" />
粉红色
<input type="checkbox" name="颜色" value="color6" />
橙子色
</form>
<p>你选择的尺码：M码|订单编号：848656843155</p>
<div class="cart2-icon">
<div class="middle-pic1"><img src="images/s_icon1.png" /></div>
<div class="middle-pic1"><img src="images/s_icon2.png" /></div>
<div class="middle-pic1"><img src="images/s_icon3.png" /></div>
</div>
</div>
</div>
<div class="card-right">
<p>优惠：9月特惠到10.1 全国满199包邮</p>
<p>促销：会员享受8折优惠</p>
<p>价格：<strong>8折限时优惠￥299</strong></p>
<a href=" ">
<button class="btn btn-warning btn-lg ">立刻购买>></button>
</a>
</div>
</div>
<div class="card2">
<div class="card2-left">
<img src="images/choose4.jpg" width="105px" height="142px" />
<div class="cart2-middle">
<h4> <a href="">女神的新衣 ASOBIO 尚雯婕同款 2014秋装 立体花宽松字母长袖卫衣</a></h4>
<p> 选择你喜欢的颜色</p>
<form>
<input type="checkbox" name="颜色" value="color 1" />
明黄色
<input type="checkbox" name="颜色" value="color2" />
湖蓝色
<input type="checkbox" name="颜色" value="color3" />
浅绿色
<input type="checkbox" name="颜色" value="color4" />
大红色
<input type="checkbox" name="颜色" value="color5" />
粉红色
<input type="checkbox" name="颜色" value="color6" />
橙子色
</form>
<p>你选择的尺码：M码|订单编号：448662659863</p>
<div class="cart2-icon">
<div class="middle-pic1"><img src="images/s_icon1.png" /></div>
<div class="middle-pic1"><img src="images/s_icon2.png" /></div>
<div class="middle-pic1"><img src="images/s_icon3.png" /></div>
</div>
</div>
</div>
<div class="card-right">
<p>优惠：9月特惠到10.1 全国满199包邮</p>
<p>促销：会员享受8折优惠</p>
<p>价格：<strong>8折限时优惠￥499</strong></p>
<a href=" ">
<button class="btn btn-warning btn-lg ">立刻购买>></button>
</a>
</div>
</div>
<div class="card2">
<div class="card2-left">
<img src="images/choose5.jpg" width="105px" height="142px" />
<div class="cart2-middle">
<h4> <a href="">2014秋冬上新 秋季新款女装 简约撞色 呢子大衣 中长款橙毛呢外套</a></h4>
<p> 选择你喜欢的颜色</p>
<form>
<input type="checkbox" name="颜色" value="color 1" />
明黄色
<input type="checkbox" name="颜色" value="color2" />
湖蓝色
<input type="checkbox" name="颜色" value="color3" />
浅绿色
<input type="checkbox" name="颜色" value="color4" />
大红色
<input type="checkbox" name="颜色" value="color5" />
粉红色
<input type="checkbox" name="颜色" value="color6" />
橙子色
</form>
<p>你选择的尺码：M码|订单编号：45989262546863</p>
<div class="cart2-icon">
<div class="middle-pic1"><img src="images/s_icon1.png" /></div>
<div class="middle-pic1"><img src="images/s_icon2.png" /></div>
<div class="middle-pic1"><img src="images/s_icon3.png" /></div>
</div>
</div>
</div>
<div class="card-right">
<p>优惠：9月特惠到10.1 全国满199包邮</p>
<p>促销：会员享受8折优惠</p>
<p>价格：<strong>8折限时优惠￥299</strong></p>
<a href=" ">
<button class="btn btn-warning btn-lg ">立刻购买>></button>
</a>
</div>
</div>
<div class="card2">
<div class="card-left">
<a href=""> <button class="btn btn-danger btn-lg card-mg">商品付款>></button></a>
</div>
<div class="card-right">
<a href=""><button class="btn btn-danger btn-lg card-mg "><strong> 总计：</strong></button></a>
</div>
</div>
</div>
</div>
<div class="down">
<div class="down-one">
<h4>购物指南</h4>
<ul class="f_nav">
<li><a href="goodslist.html">购物流程</a></li>
<li><a href="goodslist.html">会员介绍</a></li>
<li><a href="goodslist.html">团购|机票</a></li>
<li><a href="goodslist.html">常见问题</a></li>
<li><a href="goodslist.html">意见反馈</a></li>
<li><a href="goodslist.html">联系客服</a></li>
</ul>
</div>
<div class="down-one">
<h4>配送方式</h4>
<ul class="f_nav">
<li><a href="goodslist.html">上门自取</a></li>
<li><a href="goodslist.html">211限时到达</a></li>
<li><a href="goodslist.html">配送服务查询</a></li>
<li><a href="goodslist.html">配送费收取标准</a></li>
<li><a href="goodslist.html">同城配送</a></li>
<li><a href="goodslist.html">海外配送</a></li>
</ul>
</div>
<div class="down-one">
<h4>支付方式</h4>
<ul class="f_nav">
<li><a href="#">支付政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修|退换货</a></li>
<li><a href="#">取消订单</a></li>
<li><a href="#">订单详情</a></li>
</ul>
</div>
<div class="down-one">
<h4>售后服务</h4>
<ul class="f_nav">
<li><a href="#">售后政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修|退换货</a></li>
<li><a href="#">取消订单</a></li>
<li><a href="#">订单详情</a></li>
</ul>
</div>
<div class="down-one">
<h4>商家服务</h4>
<ul class="f_nav">
<li><a href="#">商家帮助</a></li>
<li><a href="#">商家入驻</a></li>
<li><a href="#">新手指导</a></li>
<li><a href="#">培训中心</a></li>
<li><a href="#">信息公告</a></li>
<li><a href="#">广告服务</a></li>
</ul>
</div>
</div>
<div class="down">
<div class="">
<div class="fl">
<img src="images/picll.jpg" title="点击领取优惠券" />
<span class="dong">领取优惠券后购买更实惠</span>
</div>
</div>
<div class="fra">
折扣店服装公司地址：<br />
中国<br />
陕西/安康市<br />
高新区高新现代城<br />
Tel: 1988435162523<br />
Email: <a href="http://weibo.com/">jhl@qq.com</a>
</div>
<div class="">
<div class="fl">
<span class="dong fl-color"> 美丽百分百，折扣店让你快人一步</span>
<img src="images/social.png" title="分享更快乐" usemap="#mapxie" />
<map name="mapxie" id="mapxie">
<area shape="rect" coords="5,5,50,45" href="http://weibo.com/" alt="" target="_blank">
<area shape="rect" coords="55,5,100,45"
href="http://openapi.qzone.qq.com/oauth/show?client_id=217921&display=pc&redirect_uri=http%3A%2F%2Fwww.douguo.com%2Fapi%2Ftx_get_access_token&response_type=code&scope=all&which=Login"
alt="" target="_blank">
<area shape="rect" coords="110,5,150,45" href="http://wx.qq.com/" alt="" target="_blank">
<area shape="rect" coords="165,5,200,45" href="http://www.renren.com/" alt="" target="_blank">
<area shape="rect" coords="220,5,260,45" href="http://t.qq.com/" alt="" target="_blank">
</map>
<textarea class="form-control" rows="3" placeholder="亲留下您的宝贵意见"></textarea>
<button type="submit" class="pull-right btn btn-primary bt-margin">留言</button>
</div>
</div>
</div>
<div class="footer">
<p>关于我们 - 版权声明 - 帮助(？) - 联系我们 - 友情链接 - 用户注册 - 地图<br />
hill may的折扣店 版权所有 jinaghanlin 2020-2021 Hill may.com 陕西省安康市汉滨区</p>
</div>
</body>
</html>
还有登陆页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="wangzhang.css">
</head>
<body>
<div class="admin-logo">
<a href="#">
<img alt="Brand" src="logo1.png">
</a>
<h1>欢迎登陆</h1>
</div>
<div class="admin-content">
<div class="admin-left">
<img src="images/page.jpg" alt="">
</div>
<div class="admin-right">
<div class="admin-vip">会员登录</div>
<form class="form-horizontal ">
<div class="form-group clearfix">
<label for="inputEmail3" class="col-sm-3 control-label admin-fl">账号</label>
<div class="col-sm-12">
<input type="email" class="form-control admin-in" id="inputEmail3" placeholder="手机号/用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label admin-fl">密码</label>
<div class="col-sm-12">
<input type="password" class="form-control admin-in" id="inputPassword3" placeholder="">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group admin-btn">
<div class=" col-sm-10">
<button type="button" class="btn btn-warning btn-lg btn-deng">登陆</button>
</div>
</div>
</form>
<div>
<a href="网站.html">
<span class="admin-float1">折扣社直通车</span>
</a>
<a href="register.html">
<span class="admin-float2">免费注册</span>
</a>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
注册页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="wangzhang.css">
</head>
<body>
<div class="color-nav clearfix">
<span class="nav-one pull-right "> 您好，欢迎来到折扣社！[登录]</span>
</div>
<div class="content">
<div class=" two">
<a class="navbar-brand left1" href="#">
<img alt="Brand" src="logo1.png">
</a>
<h1>欢迎注册</h1>
</div>
<div class="clearfix">
<div class=" pull-right">
我已经注册，现在就 <a href="admin.html"><span class=""> 登录</span></a>
</div>
</div>
<div class="content-register">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">* 用户名：</label>
<div class="col-sm-4">
<input type="name" class="form-control" id="inputEmail3" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">* 请设置密码：</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="请设置密码">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">* 请确定密码：</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="请确定密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我的选择
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-warning btn-lg btn-deng">注册</button>
</div>
</div>
</form>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
还有最后一个就是自定义一些自己喜欢的样式css：
.one {
height: 100px;
display: flex;
justify-content: space-between;
}
.one1 {
height: 100px;
display: flex;
align-items: center;
margin-right: 50px;
flex: 2.5;
justify-content: space-between;
}
.left1 {
flex: 3;
}
.img1 {
display: inline-block;
}
.img1:hover {
background-color: red;
cursor: pointer;
}
.btn1 {
background-color: #FFCC00;
}
li {
font-size: 16px;
}
.row {
padding: 0 20px;
}
.img-h {
height: 420px;
width: 100%;
}
.right {
display: flex;
}
.right-left {
flex: 1;
}
.right-right {
flex: 2;
}
.bl {
display: inline-block;
}
.center1 {
margin-left: 100px;
}
.down {
display: flex;
margin: 50px 50px;
justify-content: space-between;
}
.down-one {
flex: 1;
border: 1px solid yell;
}
.down h4 {
margin-left: 40px;
line-height: 50px;
border-bottom: 2px solid #ccc;
}
.f_nav li {
list-style-type: none;
color: #ccc;
}
.f_nav li a {
color: #777777;
}
.fl {
overflow: hidden;
}
.dong {
display: block;
animation: run linear 8s infinite;
overflow: hidden;
line-height: 40px;
color: red;
}
.nav {
border-bottom: 1px solid #ccc;
}
.fl img,
textarea,
.bt-margin {
margin-top: 10px;
}
@keyframes run {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(110%);
}
}
.fl-color {
font-size: 20px;
color: red;
}
.fra {
margin-top: 50px;
}
.fl-font {
font-size: 25px;
font-weight: bolder;
color: black;
}
.footer {
background-color: #006680;
color: white;
font-size: 12px;
text-align: center;
}
.nav-one {
font-size: 12px;
display: inline-block;
margin-right: 100px;
color: white;
}
.color-nav {
background-color: #006680;
}
.content {
width: 950px;
margin: 10px auto;
}
.two {
line-height: 200px;
margin: 10;
}
.two h1 {
line-height: 100px;
}
.content-register {
border: 1px solid #ccc;
padding: 35px 30px;
background-image: url(images/register_bg.jpg);
}
.cart1 {
display: flex;
justify-content: space-between;
}
.cart1-right,
.cart1-left {
margin: 0 40px;
font-size: 20px;
}
.cart1-right img,
.cart1-left img {
margin: 0;
}
.card2 {
display: flex;
margin: 20px 40px;
padding: 5px;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid #777777 ;
}
.card2-left {
display: flex;
align-items: flex-end;
}
.cart2-icon {
display: flex;
width: 100px;
align-items: center;
background-color: tomato;
justify-content: space-around;
}
.cart2-middle {
margin-left: 40px;
}
.cart2-middle h4 {
line-height: 40px;
}
.card-mg {
margin: 50px 140px;
}
.middle-pic1 img {
margin: 5px;
}
.admin-right{
margin-right: 20px;
}
.admin-content{
width: 800px;
display: flex;
margin: 10px auto;
justify-content: space-between;
align-items: center;
}
.admin-fl{
position: relative;
top: 28px;
left: -10px;
z-index: 2;
color: #777777;
margin-top: -20px;
}
.admin-in{
padding-left: 40px;
}
.btn-deng{
padding:10px 120px ;
}
.admin-vip{
font-size: 20px;
}
.admin-float2{
float: right;
}
.admin-logo{
width: 800px;
display: flex;
margin: 10px auto;
margin-top: 50px;
align-items: center;
}
还有一些照片自己可以换上自己喜欢的
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
