没学JS,而且还是不会创建仓库,所还是干巴巴的代码了
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户中心页面-小兔鲜儿</title><!-- 网站说明 --><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"><!-- 关键字 --><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化文件 css reset base.css --><link rel="stylesheet" href="./css/base.css"><!-- 引入common.css 公共的头部和底部 --><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/center.css"><link rel="stylesheet" href="../iconfont/iconfont.css"></head><body><!-- 头部模块开始 --><header><!-- 快捷导航 --><div class="xtx-shortcut"><div class="container"><ul><li><a href="#">请先登录</a></li><li class="sep">|</li><li><a href="#">免费注册</a></li><li class="sep">|</li><li><a href="#">我的订单</a></li><li class="sep">|</li><li><a href="#">会员中心</a></li><li class="sep">|</li><li><a href="#">帮助中心</a></li><li class="sep">|</li><li><a href="#">在线客服</a></li><li class="sep">|</li><li><a href="#"><i></i>手机版</a></li></ul></div></div><!-- 导航栏 --><div class="xtx-main-nav container"><!-- logo --><div class="logo"><h1><a href="./index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><!-- nav --><nav class="nav"><ul><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><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></nav><!-- search --><div class="search"><input type="text" placeholder="搜一搜"></div><!-- car --><a href="#" class="car"><span>2</span></a></div></header><!-- 头部模块结束 --><!-- 用户中心内容区域 --><div class="xtx-center"><div class="center-wrapper"><div class="aside"><!-- 头部 --><div class="user-meta"><div class="pic"><img src="./uploads/avatar_1.png" alt=""></div><h5>聪明蛋</h5><p>钻石会员</p></div><!-- 头部 --><!-- 管理模块 --><div class="user-manage panel"><h4>我的账户</h4><div class="links"><a href="#">个人中心</a><a href="#">消息通知</a><a href="#">个人信息</a><a href="#">安全设置</a><a href="#">地址管理</a><a href="#">我的积分</a><a href="#">我的足迹</a><a href="#">遨游有礼</a><a href="#">幸运抽奖</a></div></div><div class="user-manage panel"><h4>交易管理</h4><div class="links"><a href="#">我的订单</a><a href="#">优惠券</a><a href="#">礼品卡</a><a href="#">评价晒单</a><a href="#">售后服务</a></div></div><div class="user-manage panel"><h4>我的收藏</h4><div class="links"><a href="#">收藏的商品</a><a href="#">收藏的商品</a><a href="#">收藏的商品</a></div></div><div class="user-manage panel"><h4>帮助中心</h4><div class="links"><a href="#">帮助中心</a><a href="#">在线客服</a></div></div><!-- 管理模块 --></div><div class="main"><!-- 开始 --><div class="overview"><div class="item"><a href="#"><img src="./images/vip.png" alt="">会员中心</a><a href="#"><img src="./images/safe.png" alt="" class="safe">安全设置</a><a href="#"><img src="./images/address.png" alt="" class="add">地址管理</a></div><div class="item"><a href="#"><span>6</span>优惠卷</a><a href="#"><span>70</span>礼品卡</a><a href="#"><span>120</span>积分</a></div></div><!-- 结束 --><!-- 开始 --><div class="pannel pannel-orders"><div class="pannel-header"><h3>我的订单</h3><a href="#">查看全部 ></a></div><!-- 订单 --><div class="orders"><ul><li><div class="goods"><div class="good-pic"> <img src="./uploads/order_goods_1.jpg" alt=""></div><div class="goods-info"><h4>拉夫劳伦t恤男正品圆领短袖...</h4><p>颜色：白色 尺码：M 数量：1</p></div><div class="good-pay">代付款</div></div><div class="payment"><p>￥99.00</p><p>（含运费：¥10.00元）</p><p>在线支付）</p></div><div class="action"><a href="#">立即付款</a><a href="#">查看详情</a><a href="#">取消订单</a></div></li><li><div class="goods"><div class="good-pic"> <img src="./uploads/order_goods_2.jpg" alt=""></div><div class="goods-info"><h4>李宁跑步鞋男鞋空气弧...</h4><p>颜色：灰色 尺码：42 数量：1</p></div><div class="good-pay">待收货 <p>查看物流</p></div></div><div class="payment"><p>￥199.00</p><p>（含运费：¥10.00元）</p><p>在线支付）</p></div><div class="action"><a href="#">确认收货</a><a href="#">查看详情</a><a href="#">再次购买</a></div></li></ul></div><!-- 订单 --><!-- jiesu--></div><!-- 收藏 --><div class="pannel pannel-collect"><div class="pannel-header"><h3>我的订单</h3><a href="#">查看全部 ></a></div><ul><li><div> <img src="./uploads/clothes_goods_1.jpg" alt=""></div><h4>人本秋季厚底帆布鞋韩版低帮增高学生</h4><p> <i>¥</i> 55</p></li><li><div> <img src="./uploads/clothes_goods_2.jpg" alt=""></div><h4>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</h4><p> <i>¥</i>20.9</p><span class="p1">6折</span></li><li><div> <img src="./uploads/clothes_goods_3.jpg" alt=""></div><h4>三都港 冷冻无公害黄花鱼700g 2条 袋装 </h4><p> <i>¥</i>209</p></li><li><div> <img src="./uploads/clothes_goods_4.jpg" alt=""></div><h4>ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</h4><p> <i>¥</i>274.5</p></li></ul></div><!-- 收藏 --><!-- 足迹 --><div class="pannel pannel-collect"><div class="pannel-header"><h3>我的足迹</h3><a href="#">查看全部 ></a></div><ul><li><div> <img src="./uploads/order_goods_1.jpg" alt=""></div><h4>拉夫劳伦t恤男正品圆领短袖</h4><p> <i>¥</i>99</p></li><li><div> <img src="./uploads/order_goods_2.jpg" alt=""></div><h4>李宁跑步鞋男鞋空气弧春季款</h4><p> <i>¥</i>171.9</p><span class="p1">6折</span></li><li><div> <img src="./uploads/clothes_goods_3.jpg" alt=""></div><h4>三都港 冷冻无公害黄花鱼700g 2条 袋装 </h4><p> <i>¥</i>209</p></li><li><div> <img src="./uploads/clothes_goods_4.jpg" alt=""></div><h4>ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</h4><p> <i>¥</i>274.5</p></li></ul></div><!-- 足迹 --></div></div></div><!-- 底部开始 --><footer><!-- 上盒子 --><div class="footer-t"><div class="container"><dl class="customer"><dt>客户服务</dt><dd class="zaixian"><a href="#"><p>在线客服</p></a></dd><dd class="wenti"><a href="#"><p>问题反馈</p></a></dd></dl><dl class="us"><dt>关注我们</dt><dd class="gongzhonghao"><a href="#"><p>公众号</p></a></dd><dd class="weibo"><a href="#"><p>微博</p></a></dd></dl><!-- 下载模块 --><dl class="download"><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.png" alt=""></dd><dd class="down"><p>扫描二维码</p><p>立马下载APP</p><a href="#">下载页面</a></dd></dl><!-- 热线模块 --><dl class="hotline"><dt>服务热线</dt><dd><p>400-0000-000</p><p>周一至周日 8:00-18:00</p></dd></dl></div></div><!-- 下盒子 --><div class="footer-b"><!-- 服务模块 --><div class="xtx-service"><a href="#">价格亲民</a><a href="#">物流快捷</a><a href="#">品质新鲜</a></div><!-- 版权模块 --><div class="xtx-copyright"><p><a href="#">关于我们</a> |<a href="#">帮助中心</a> |<a href="#">售后服务</a> |<a href="#">配送与验收</a> |<a href="#">商务合作</a> |<a href="#">搜索推荐</a> |<a href="#">友情链接</a></p><p>CopyRight @ 小兔鲜儿</p></div></div></footer><!-- 底部结束 --></body></html>
CSS
.xtx-center {background-color: #f6f6f6;padding-top: 30px;}.center-wrapper {display: flex;justify-content: space-between;width: 1240px;margin: auto;/* background-color: pink; */}.xtx-center .aside {width: 227px;/* height: 1000px; */background-color: #fff;}.xtx-center .main {width: 999px;/* height: 1000px; *//* background-color: greenyellow; */}.xtx-center .user-meta {padding: 45px 0 32px 0;text-align: center;}.xtx-center .pic {display: inline-block;width: 85px;height: 85px;}.xtx-center .pic img {width: 100%;height: 100%;}.xtx-center .user-meta h5 {font-size: 18px;color: #333333;margin: 14px 0 12px 0;}.xtx-center .user-meta p {display: inline-block;width: 93px;height: 26px;line-height: 26px;background-image: linear-gradient(264deg,#e05e2f 0%,#ea745e 95%);font-size: 14px;border-radius: 15px;color: #f9f9f9;}.xtx-center .user-meta p::before {content: "";display: inline-block;width: 15px;height: 16px;background-color: #fff;vertical-align: middle;margin: -3px 5px 0 0;background: url(../images/vip_gold.png) no-repeat 0 0/15px 16px;}/* .xtx-center .icon-huangguan {color: #e4973c;font-size: 16px;} *//* 公共模块 */.panel {padding: 30px 0 0 50px;border-top: 1px solid #f4f4f4;}.xtx-center .panel h4 {height: 50px;font-size: 18px;font-weight: 400;}.xtx-center .links a {position: relative;display: block;height: 40px;font-size: 14px;color: #666666;}.xtx-center .links a::before {content: "";position: absolute;top: 50%;left: -10px;margin-top: -13px;width: 6px;height: 6px;border-radius: 50%;background-color: #5eb69c;display: none;}.xtx-center .links a:hover {color: #5eb69c;}.xtx-center .links a:hover::before {display: block;}.overview {display: flex;background-color: #fff;padding: 20px 15px;}.overview .item {flex: 1;display: flex;justify-content: space-evenly;align-items: center;height: 91px;}.overview .item:first-child {border-right: 1px solid #f4f4f4;}.overview .item a {flex: 1;display: flex;flex-direction: column;align-items: center;font-size: 16px;}.overview .item img {width: 25px;height: 22px;margin-bottom: 14px;}.overview .item .safe {width: 25px;height: 23px;margin-bottom: 14px;}.overview .item .add {width: 18px;height: 25px;margin-bottom: 14px;}.overview .item span {margin-top: 1px;font-size: 25px;color: #e05e30;}.xtx-center .main>div {background-color: #fff;margin-bottom: 20px;}.xtx-center .main .pannel {padding: 25px 20px;}.xtx-center .main .pannel-header {height: 45px;display: flex;justify-content: space-between;}.xtx-center .main .pannel-header h3 {font-size: 22px;font-weight: 400;}.xtx-center .main .pannel-header a {font-size: 16px;color: #999;}.xtx-center .orders li {height: 137px;background-color: #fff;display: flex;font-size: 14px;margin-bottom: 20px;margin-top: 20px;border: 1px solid #f4f4f4;}.orders .goods {flex: 1;display: flex;padding-left: 12px;align-items: center;}.goods .good-pic {width: 170px;height: 170px;}.goods .goods-info {flex: 1;}.goods .goods-info h4 {font-size: 16px;height: 30px;}.goods good-pay {width: 180px;text-align: center;}.goods good-pay p {font-size: 14px;color: #999999;}.goods .good-pic img {width: 100%;height: 100%;}/* .orders .goods img {width: 107px;height: 107px;} */.orders li>div:nth-child(n+2) {display: flex;flex-direction: column;justify-content: center;align-items: center;}.orders .payment {width: 194px;border-left: 2px solid #f4f4f4;border-right: 2px solid #f4f4f4;AA ..0.}.orders .action {width: 180px;}.orders .action a:nth-child(1) {width: 100px;height: 30px;background-color: #5eb69c;border-radius: 2px;text-align: center;line-height: 30px;margin-bottom: 16px;}.pannel-collect {margin-top: 10px;}.pannel-collect .pannel-header {border-bottom: 1px solid #f4f4f4;}.pannel-collect ul {display: flex;justify-content: space-evenly;padding: 31px 53px 35px 41px;}.pannel-collect ul li {width: 171px;}.xtx-center .pannel-collect img {width: 160px;margin-left: 14px;}.xtx-center .pannel-collect h4 {font-size: 16px;color: #333333;font-weight: 400;margin: 23px 0 18px;}.xtx-center .pannel-collect p {color: #9a2e1f;font-size: 22px;}.xtx-center .pannel-collect p i {font-size: 17px;}.pannel-collect ul li:nth-child(2) {position: relative;}.pannel-collect ul li:nth-child(2) .p1 {content: "1";position: absolute;top: 0;left: 0;width: 28px;height: 51px;font-size: 20px;border: 1px solid #5eb69c;line-height: 23px;text-align: center;color: #5eb69c;}
