用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;
}
还有一些照片自己可以换上自己喜欢的