用HTML,css,boostrap写一个综合大型购物网站

article/2025/8/23 10:38:51

用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>&nbsp;&nbsp;&nbsp;&nbsp;精致与休闲造型兼备的牛津纺衬衫。简约素雅的风格,新潮百搭<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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;佰缌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>&nbsp;&nbsp;&nbsp;&nbsp;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&amp;display=pc&amp;redirect_uri=http%3A%2F%2Fwww.douguo.com%2Fapi%2Ftx_get_access_token&amp;response_type=code&amp;scope=all&amp;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&amp;display=pc&amp;redirect_uri=http%3A%2F%2Fwww.douguo.com%2Fapi%2Ftx_get_access_token&amp;response_type=code&amp;scope=all&amp;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;/* border: 1px solid red ; */}.cart2-icon {display: flex;width: 100px;align-items: center;background-color: tomato;justify-content: space-around;/* border: 1px solid red ; */}.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;
}

还有一些照片自己可以换上自己喜欢的


http://chatgpt.dhexx.cn/article/vdw7SThM.shtml

相关文章

HTML+CSS项目案例

文章目录 1、表格练习2、文本样式练习3、图片标签练习4、盒子模型练习一5、盒子模型练习二6、盒子模型练习三7、浮动练习8、边框练习一9、边框练习二10、图文混排11、列表练习 1、表格练习 案例演示&#xff1a;&#xff08;table、tr、td、th等&#xff09; 实现代码&#x…

用css简单实现三级导航栏

关键属性 display&#xff1a;none 隐藏元素 display&#xff1a;bolck 显示元素 实例 CSS样式 <style>* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;}.nav1 {width: 400px;height: 50px;/* border: 1px solid red; */margin: 200px aut…

使用 CSS3 实现转盘抽奖效果

微信和大型商场常常会有转盘抽奖的活动,比如上海移动和教授的抽取积分活动等。我们可以通过CSS3的transform属性来实现转盘的旋转。同时,transition属性实现过渡动画,它具有四个子属性,依次为 1. transition-property(过渡属性,默认为all) 2. transition-du…

css module

css module 一、css module1.思路2.实现原理3.如何应用样式 一、css module 1.思路 通过命名规范来限制类名太过死板&#xff0c;而css in js虽然足够灵活&#xff0c;但是书写不便。 css module 开辟一种全新的思路来解决类名冲突的问题 css module 遵循以下思路解决类名冲突…

css 预处理器

由于多个项目中用到了sass和less&#xff0c;所以就学习了一下相关知识&#xff0c;记录下来方便随时查看。 前言 css是用来编写网站样式&#xff0c;但是&#xff0c;其写法比较一成不变。 如果想要使用 css 实现 js 一样的变量、常量等&#xff0c;就会比较臃肿&#xff0…

【CSS】css快速更改某个字体图标,使用content插入字符

遇到一个小问题&#xff1a;使用的是组件库&#xff0c;但是这个组件没有提供更改图标的接口&#xff0c;需要更改这个特定的图标&#xff0c;但是最好不更改dom 解决办法 由于系统已经使用了这个组件库&#xff0c;那么就有了他的图标内容&#xff0c;可以先到组件库官网找到…

W3C推荐的新布局模式 【CSS Flex布局】详解

本文目录 概述属性弹性容器的属性&#xff08;父级&#xff09;displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgap, row-gap, column-gap 弹性项目的属性&#xff08;子项&#xff09;orderflex-growflex-shrinkflex-basisflexalign-self 示…

CSS变量(CSS Variables)

概述 如果突然有一天,当你页面的主题色发生变化时,有许多元素的颜色要一起变化,这是你会考虑怎么做呢?使用Less/Sass/Stylus来定义一个颜色变量?还是专门去定义多了个类名来控制元素? 使用第一种方法,有他的弊端,浏览器无法识别CSS预处理器的语法,所以我们都会将Less…

详细介绍css3中的变量使用

CSS3新功能之变量&#xff1a;variables css3为我们提供了一个强大的功能自定义属性&#xff0c;也就是变量&#xff0c;他能让我们更改色系、皮肤、自适配变得简单。我们只需要更改一些我们事先定义好的变量就可以轻松实现各种效果。特别是我们在开发大型项目的时候有多处使用…

详解CSS(一)

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、的博客 &#x1f6fa;系列专栏&#xff1a;CSS专栏 &#x1f6b2;给大家推荐一个网站&#x1f609;很实用&#x1f61a;我…

读书笔记《MySQL技术内幕:InnoDB存储引擎》第5章 索引与算法

索引是应用程序设计和开发的一个重要方面。若索引太多&#xff0c;应用程序的性能可能会受到影响。而索引太少&#xff0c;对查询性能又会产生影响。要找到一个合适的平衡点&#xff0c;这对应用程序的性能至关重要。 一些开发人员总是在事后才想起添加索引——我一直认为&…

32.项目总结--技术点部分

项目整体架构 Docker 虚拟化容器计数,Docker基于镜像,可以秒级启动各种容器,每一种容器都是一个完整的运行环境,容器之间相互隔离; 安装docker 安装前卸载原有的docker yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-lat…

【HCIA-Datacom V1.0培训教材】广域网技术

局域网LAN&#xff08;Local Area Network&#xff09; 广域网WAN&#xff08;Wide Area Network&#xff09; 数字数据网DDN&#xff08;Digital Data Network&#xff09; 帧中继FR(Frame Relay) 同步数字结构SDH&#xff08;Synchronous Digital Hierachy&#xff09; …

一文了解Docker容器技术的操作

一文了解Docker容器技术的操作 前言 相信点进这篇文章的Coder&#xff0c;不管是在各大技术论坛上、技术交流群&#xff0c;亦或招聘网上&#xff0c;应该都有见到过Doker容器技术的面孔&#xff0c;随着社会节奏的加快以及迫于生活的压力&#xff0c;在计算机技术日新月异的今…

自然语言处理简介(1)---- 服务梳理与传统汉语分词

文章大纲 1.Nlp技术体系简介1.1 基础技术1.2 Nlp 核心技术1.3 NlP&#xff08;高端技术&#xff09; 2.知名NLP 服务系统简介2.1汉语分词系统ICTCLAS2.2 哈工大语言云&#xff08;Language Technology Platform&#xff0c;LTP&#xff09;2.3 Amazon Comprehend2.4 阿里云NLP2…

微服务技术栈学习笔记(自用)

微服务技术栈学习笔记&#xff08;自用&#xff09; 文章目录 微服务技术栈学习笔记&#xff08;自用&#xff09;1.导学2.Eureka2.1微服务远程调用&#xff1a;2.2搭建Eureka 3.Ribbon负载均衡4.Nacos4.1服务注册4.2 分级存储 5.Feign6.Gateway6.1搭建6.2路由断言工厂6.3 过滤…

自然语言处理技术

自然语言处理技术&#xff08;NLP&#xff09;在推荐系统中的应用 NLP 推荐系统 词袋模型 阅读7798 作者&#xff1a; 张相於&#xff0c;58集团算法架构师&#xff0c;转转搜索推荐部负责人&#xff0c;负责搜索、推荐以及算法相关工作。多年来主要从事推荐系统以及机器学习…

Java.mob.org.cn搜索_探讨Android全文检索技术

原标题&#xff1a;探讨Android全文检索技术 写在前面 客户端本地存储数据一般使用的存储方式是&#xff1a;文件、SharedPreference、数据库(SQLite) 如果我们要做一些查询的操作&#xff0c;对于文件的方式&#xff0c;通过序列化和反序列化来进行数据的增删改查操作&#xf…

seg:NLP之正向最大匹配分词

已迁移到我新博客,阅读体验更佳seg:NLP之正向最大匹配分词 完整代码实现放在我的github上:click me 一、任务要求 实现一个基于词典与规则的汉语自动分词系统。 二、技术路线 采用正向最大匹配(FMM)方法对输入的中文语句进行分词&#xff0c;具体的实现可以分为下面几个步骤&am…

Elasticsearch搜索技术实战

elasticsearch下载安装 本篇前述的ES版本是7.14.2&#xff0c;实现了与Mysql的数据同步&#xff0c;ES端的搜索与分词&#xff1b;后来由于和Springcloud&#xff08;spring-data-elasticsearch:3.0.6&#xff09;集成发现版本问题&#xff0c;换成ES5.5.0&#xff0c;所以完整…