没学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>李宁跑步鞋男鞋空气弧2018春季款</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;}

效果图PC端

Day04 利用flex布局完成PC端网页设计CSS+html部分相关推荐

html5页面设计时做多大的,pc端网页按什么尺寸设计
如果不做全屏,或者主区域没有全屏设置,可以固定中宽,比如bootstrap的container的固定宽度1170px.下面小编给大家介绍pc端网页按什么尺寸设计,一起来看看吧. pc端网页的尺寸设计规 ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
页面的版心html,关于PC端网页版心及网页自适应问题
通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内,这1200px也就是俗称的版心了.这是网页设计的规则之一,目的是帮助前端制作PC端的页面自适应.目前市面上主流的屏幕 ...
html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想
不可否认,多屏时代已经到来. 手机/平板/笔记本/PC/TV等,多个显示平台的逐步构建,为信息传播及交互提供了多重平台及体验选择. 素材:多屏自适应网页设计/多屏延生设计在此篇文章,取手机端与PC端 ...
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
JS PC端网页特效（一）
2022年7月27日周三学习记录博客学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...

Day04 利用flex布局完成PC端网页设计CSS+html部分

HTML

CSS

效果图PC端

Day04 利用flex布局完成PC端网页设计CSS+html部分相关推荐

最新文章

热门文章