Flex布局-实现网上商城-个人中心页面

Flex布局-网上商城-个人中心页面

运用flex知识，可以快速实现弹性功能的页面。无论是排列方式还是横竖居中，flex都能轻松搞定，并具备弹性功能，可随屏幕变化而伸缩。下面这个网上商城-个人中心页面，综合运用了flex知识来实现，效果如图：

具体代码如下：

.main {display: flex;width: 1240px;margin: 0 auto;
}.left {width: 232px;margin-right: 20px;
}.right {flex: 1;
}.user {/* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */display: flex;flex-direction: column;align-items: center;justify-content: center;height: 230px;background-color: #fff;border-bottom: 2px solid rgb(233, 233, 233);
}.user>span {font-size: 20px;
}.user>img {width: 85px;height: 85px;
}.user>div {border-radius: 13px;/* 设置渐变色 */background-image: linear-gradient( 264deg, #e05e2f 0%, #ea745e 95%);width: 130px;text-align: center;padding: 4px 0px;
}.user>div>span {font-size: 15px;color: #fff;
}.user>div>img {margin-right: 2px;width: 18px;margin-top: -5px;
}.account {display: flex;/* height: 486px; */flex-direction: column;align-items: center;border-bottom: 2px solid rgb(233, 233, 233);background-color: #fff;padding-bottom: 15px;
}.account:nth-child(5) {border-bottom: 0;
}.account_title {font-size: 19px;font-weight: bold;margin-top: 30px;margin-bottom: 23px;
}.account>ul>li {margin-bottom: 23px;position: relative;
}.account>ul>li:hover {color: #5eb69c;list-style: disc;
}.right_top {display: flex;background-color: #fff;justify-content: space-around;padding: 30px 0px;
}.vip,
.coupons {flex: 1;
}.vip {display: flex;justify-content: space-evenly;align-items: center;
}.vip_content {text-align: center;
}.vip_content {cursor: pointer;
}.vip_content>p {margin-top: 10px;font-size: 16px;
}.vip_coupons>span {font-size: 24px;color: red;
}.vip_coupons {padding-bottom: 1px;
}.vip_content>img {width: 25px;height: 25px;margin-top: 12px;
}.vip_line {border-left: 2px solid rgb(172, 172, 172, 0.3);
}.right_middle {margin-top: 20px;background-color: #fff;
}.right_middle_top {display: flex;justify-content: space-between;padding: 15px;
}.right_middle_top>span {font-size: 20px;font-weight: 500;
}.right_middle_top>a {font-size: 16px;color: rgb(133, 133, 133);padding-top: 3px;
}.right_middle_content {display: flex;padding: 0px 15px;
}.my_order_left {flex: 2;border: 1px solid rgb(224, 224, 224, 0.7);
}.my_order_center_one,
.my_order_center_two,
.my_order_right {flex: 1;
}.my_order_left>img {width: 107px;height: 107px;
}.my_order_right,
.my_order_center_one,
.my_order_center_two {/* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid rgb(224, 224, 224, 0.7);border-left: 0;padding: 15px 0;
}.my_order_left {display: flex;align-items: center;padding: 15px 0;border-right: 0;
}.my_order_left_text>p {/* 文字内容最多只能显示一行，超出则变为省略号 */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;padding-left: 15px;
}.my_order_left_text>span {font-size: 13px;color: rgb(177, 177, 177);padding-left: 15px;
}.my_order_center_one>span:nth-child(1) {color: rgb(255, 112, 112);
}.my_order_center_one>span:nth-child(2):hover {cursor: pointer;
}.my_order_center_two>span:nth-child(1) {color: rgb(177, 2, 2);
}.my_order_right>button {background-color: #5eb69c;border-radius: 5px;color: #fff;margin-bottom: 17px;padding: 6px 20px;border: 0;
}.my_order_right>span:hover {/* 当鼠标经过时，光标变为手指模样 */cursor: pointer;
}.right_middle_content {margin-bottom: 15px;
}.right_middle {overflow: hidden;
}.collection_all {display: flex;padding: 0 12px;margin-bottom: 15px;
}.collection>img {width: 160px;height: 160px;margin-bottom: 7px;
}.collection>img:hover {cursor: pointer;
}.collection {padding: 0px 35px;flex: 1;text-align: center;position: relative;
}.six {/* 将“六折”绝对定位到元素当中去 */position: absolute;top: 5px;left: 30px;width: 18px;height: 46px;color: rgb(22, 170, 46);border: 1px solid rgb(22, 170, 46);border-radius: 3px;
}.collection_title>p {text-align: left;
}.collection_title>p:nth-child(1):hover {cursor: pointer;
}.collection_title>p:nth-child(2) {color: rgb(196, 0, 0);
}.collection_title>p:nth-child(2)>span {font-size: 20px;
}

<!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><!-- 选link:favicon这个！！！ --><link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon" /><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" /><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" /><!-- 引入css文件 --><!-- 1.引入base.css --><link rel="stylesheet" href="./css/base.css" /><!-- 2.引入common.css --><link rel="stylesheet" href="./css/common.css" /><!-- 3.引入user.css --><link rel="stylesheet" href="./css/user.css" /><link rel="stylesheet" href="./css/style.css">
</head><body><header><!-- 快捷导航栏 shortcut 模块 start --><div class="shortcut"><div class="w"><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></ul></div></div><!-- 快捷导航栏 shortcut 模块 end --><!-- 小兔鲜儿头部 header 模块 start --><div class="header w"><!-- logo --><h1 title="小兔鲜儿"><a href="#">小兔鲜儿</a></h1><!-- 导航 nav --><div 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></div><!-- 搜索 search  --><div class="search"><i></i><input type="text" placeholder="搜一搜" /></div><!-- 购物车 cart --><div class="cart"><i>99+</i></div></div><!-- 小兔鲜儿头部 header 模块 end --></header><!-- 个人中心的模块 main start --><div class="main"><!-- 首先将网页中间的main内容分为左右两个大块 --><div class="left"><div class="user"><img src="./uploads/avatar_1.png" alt=""><span>张小花</span><div><img src="./uploads/vip_gold.png" alt=""><span>黄金会员</span></div></div><div class="account"><div class="account_title">我的账户</div><ul><li>个人中心</li><li>消息通知</li><li>个人信息</li><li>安全设置</li><li>地址管理</li><li>我的积分</li><li>我的足迹</li><li>邀请有礼</li><li>幸运抽奖</li></ul></div><div class="account"><div class="account_title">交易管理</div><ul><li>我的订单</li><li>优惠券</li><li>视品卡</li><li>评价晒单</li><li>售后服务</li></ul></div><div class="account"><div class="account_title">我的收藏</div><ul><li>收藏的商品</li><li>收藏的店家</li><li>收藏的评论</li></ul></div><div class="account"><div class="account_title">帮助中心</div><ul><li>帮助中心</li><li>在线客服</li></ul></div></div><!-- 网页main内容的右边部分 --><div class="right"><div class="right_top"><div class="vip"><div class="vip_content"><img src="./images/safe.png" alt=""><p>会员中心</p></div><div class="vip_content"><img src="./images/vip.png" alt=""><p>安全设置</p></div><div class="vip_content"><img src="./images/address.png" alt=""><p>地址管理</p></div></div><div class="vip vip_line"><div class="vip_content vip_coupons"><span>6</span><p>优惠券</p></div><div class="vip_content vip_coupons"><span>2</span><p>礼品卡</p></div><div class="vip_content vip_coupons"><span>256</span><p>积分</p></div></div></div><!-- 网页右边部分的中间内容 --><div class="right_middle"><div class="right_middle_top"><span>我的订单</span><a href="#">查看全部 ></a></div><div class="right_middle_content"><div class="my_order_left"><img src="./uploads/clothes_goods_5.jpg" alt=""><div class="my_order_left_text"><p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p><span>颜色：白色 尺码：M 数量：1</span></div></div><div class="my_order_center_one"><span>待付款</span><span>查看物流</span></div><div class="my_order_center_two"><span>￥99.00</span><span>(含运费：￥10.00元)</span><span>在线支付</span></div><div class="my_order_right"><button>立即付款</button><span>查看详情</span><span>取消订单</span></div></div><div class="right_middle_content"><div class="my_order_left"><img src="./uploads/clothes_goods_6.jpg" alt=""><div class="my_order_left_text"><p>李宁跑步鞋男鞋空气弧度圆男正品圆男正品圆领短袖拉</p><span>颜色：白色 尺码：M 数量：1</span></div></div><div class="my_order_center_one"><span>待付款</span><span>查看物流</span></div><div class="my_order_center_two"><span>￥99.00</span><span>(含运费：￥10.00元)</span><span>在线支付</span></div><div class="my_order_right"><button>立即付款</button><span>查看详情</span><span>取消订单</span></div></div><div class="right_middle_content"><div class="my_order_left"><img src="./uploads/clothes_goods_7.jpg" alt=""><div class="my_order_left_text"><p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p><span>颜色：白色 尺码：M 数量：1</span></div></div><div class="my_order_center_one"><span>待付款</span><span>查看物流</span></div><div class="my_order_center_two"><span>￥99.00</span><span>(含运费：￥10.00元)</span><span>在线支付</span></div><div class="my_order_right"><button>立即付款</button><span>查看详情</span><span>取消订单</span></div></div></div><div class="right_middle"><div class="right_middle_top"><span>收藏的商品</span><a href="#">查看全部 ></a></div><div class="collection_all"><div class="collection"><img src="./uploads/clothes_goods_1.jpg" alt=""><div class="collection_title"><p>人本秋季厚底帆布鞋韩版低帮增高学生</p><p> ￥<span>55</span></p></div></div><div class="collection"><div class="six">6折</div><img src="./uploads/clothes_goods_2.jpg" alt=""><div class="collection_title"><p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p><p> ￥<span>20.9</span></p></div></div><div class="collection"><img src="./uploads/clothes_goods_3.jpg" alt=""><div class="collection_title"><p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p><p> ￥<span>209</span></p></div></div><div class="collection"><img src="./uploads/clothes_goods_4.jpg" alt=""><div class="collection_title"><p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p><p> ￥<span>274.5</span></p></div></div></div></div><div class="right_middle"><div class="right_middle_top"><span>我的足迹</span><a href="#">查看全部 ></a></div><div class="collection_all"><div class="collection"><img src="./uploads/clothes_goods_5.jpg" alt=""><div class="collection_title"><p>拉夫劳伦t恤男正品圆男正品男正品</p><p> ￥<span>99</span></p></div></div><div class="collection"><div class="six">6折</div><img src="./uploads/clothes_goods_6.jpg" alt=""><div class="collection_title"><p>李宁跑步鞋男鞋空气弧度帆布鞋韩版低帮增高学生</p><p> ￥<span>171.9</span></p></div></div><div class="collection"><img src="./uploads/clothes_goods_3.jpg" alt=""><div class="collection_title"><p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p><p> ￥<span>209</span></p></div></div><div class="collection"><img src="./uploads/clothes_goods_4.jpg" alt=""><div class="collection_title"><p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p><p> ￥<span>274.5</span></p></div></div></div></div></div></div><!-- 个人中心的模块 main end --><footer><!-- 联系模块 contact start --><div class="contact w"><!-- 客户服务 --><dl class="customer"><dt>客户服务</dt><dd class="online">在线客服</dd><dd class="feedback">问题反馈</dd></dl><!-- 关注我们 --><dl class="customer focus"><dt>关注我们</dt><dd class="online weixin">公众号</dd><dd class="feedback weibo">微博</dd></dl><!-- 下载APP --><dl class="download"><dt>下载APP</dt><dd class="code"><img src="./uploads/qrcode.png" alt="" /></dd><dd class="now"><p class="saomiao">扫描二维码</p><p>立马下载APP</p><a href="#">下载页面</a></dd></dl><!-- 服务热线 --><dl class="hotline"><dt>服务热线</dt><dd><p class="tel">400-0000-000</p><p>周一至周日 8:00-18:00</p></dd></dl></div><!-- 联系模块 contact end --><!-- 底部模块 footer start --><div class="footer"><!-- 上半部分 服务部分 serive --><div class="serive"><div class="w"><a href="#">价格亲民</a><a href="#">物流快捷</a><a href="#">品质新鲜</a></div></div><!-- 下半部分 版权区域 copyright --><div class="copyright"><p><a href="#">关于我们</a><span>|</span><a href="#">帮助中心</a><span>|</span><a href="#">售后服务</a><span>|</span><a href="#">配送与验收</a><span>|</span><a href="#">商务合作</a><span>|</span><a href="#">搜索推荐</a><span>|</span><a href="#">友情链接</a></p><div class="xiao">CopyRight @ 小兔鲜儿</div></div></div><!-- 底部模块 footer end --></footer></body></html>

Flex布局-实现网上商城-个人中心页面相关推荐

html制作商城大概布局,html 网上商城部署项目
html代码解忧杂货店首页我的订单收藏夹登陆注册蘑菇商城搜索我的购物车 item/item item/item item/item item/item item/item item/ ...
flex布局（flex 居中）
文章目录什么是flex 基本概念容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content ...
【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点,把以前刚学写的小demo放上来,这个页面是自己刚学flex布局写的页面. html部分: <!DOCTYPE html> <html lang=" ...
使用Flex布局，实现移动端商品支付页面
Flex布局关键知识点 1.display:flex要加在父元素上. 2.justify-content设置主轴内容的对齐方式. 3.flex-direction可更改主轴的方向. 4.align-i ...
携程在线网页制作（flex布局）（静态页面）
1.技术选型方案:单独制作移动端页面技术:flex布局2.搭建相关文件夹结构 css images(背景图.精灵图等) upload(产品图) index.html 3.引入引入视口标签和相 ...
常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载
移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...
Flutter开发 - 写一个块状带订单数量角标的个人中心页面，这个布局有点意思
个人中心页面为什么要挑这个页面来讲解下布局呢,因为它比较具有代表意义,块状的布局,包含Row,Column,Stack.最主要的是角标的处理方式.在一般的页面中,我们都采用上下布局,左右布局,列表等 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...

Flex布局-实现网上商城-个人中心页面

Flex布局-网上商城-个人中心页面

Flex布局-实现网上商城-个人中心页面相关推荐

最新文章

热门文章