主轴方向
- 目标：使用flex-direction改变元素排列方向
1.思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
2.答：水平方向。
- 思考：如何实现内容垂直排列？
1.目标：使用flex-direction改变元素排列方向
- 主轴默认是水平方向, 侧轴默认是垂直方向
- 修改主轴方向属性: flex-direction
属性值 作用
row 行, 水平(默认值)
column * 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上
弹性盒子换行
目标：使用flex-wrap实现弹性盒子多行排列效果
- 思考：默认情况下，多个弹性盒子如何显示？
1.弹性盒子换行显示 : flex-wrap: wrap;
2.调整行对齐方式 ：align-content
3.取值与justify-content基本相同
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>
<!-- 选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">
</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>
<!-- 个人中心主体内容开始部分 start -->
<div class="main w">
<!-- ------------主体左边部分-------------- -->
<div class="left">
<!-- 头像部分 -->
<div class="avatar">
<img src="./uploads/avatar_1.png" alt="" class="pic">
<p>张小花</p>
<div class="vip">
<img src="./uploads/vip_gold.png" alt="">
黄金会员
</div>
</div>
<!-- 我的账户 -->
<div class="account">
<dl>
<dt>我的账户</dt>
<dd><a href="#">个人中心</a></dd>
<dd><a href="#">消息通知</a></dd>
<dd><a href="#">个人信息</a></dd>
<dd><a href="#">安全设置</a></dd>
<dd><a href="#">地址管理</a></dd>
<dd><a href="#">我的积分</a></dd>
<dd><a href="#">我的足迹</a></dd>
<dd><a href="#">邀请有礼</a></dd>
<dd><a href="#">幸运抽奖</a></dd>
</dl>
</div>
<div class="account">
<dl>
<dt>交易管理</dt>
<dd><a href="#">我的订单</a></dd>
<dd><a href="#">优惠券</a></dd>
<dd><a href="#">礼品卡</a></dd>
<dd><a href="#">评价晒单</a></dd>
<dd><a href="#">售后服务</a></dd>
</dl>
</div>
<div class="account">
<dl>
<dt>我的收藏</dt>
<dd><a href="#">收藏的商品</a></dd>
<dd><a href="#">收藏的商品</a></dd>
<dd><a href="#">收藏的商品</a></dd>
</dl>
</div>
<div class="account">
<dl>
<dt>帮助中心</dt>
<dd><a href="#">帮助中心</a></dd>
<dd><a href="#">在线客服</a></dd>
</dl>
</div>
</div>
<!-- ------------主体右边部分-------------- -->
<div class="right">
<!-- 数据概述 -->
<div class="overview">
<!-- 左边部分 centre -->
<div class="centre">
<a href="#">会员中心</a>
<a href="#">安全设置</a>
<a href="#">地址管理</a>
</div>
<!-- 右边部分 total -->
<div class="total">
<a href="#">
<p>6</p>
<p>优惠卷</p>
</a>
<a href="#">
<p>70</p>
<p>礼品卡</p>
</a>
<a href="#">
<p>120</p>
<p>积分</p>
</a>
</div>
</div>
<!-- 我的订单 orders -->
<div class="orders">
<!-- 上半部分 可复用性 -->
<div class="hd">
<h3>我的订单</h3>
<a href="#">查看全部</a>
</div>
<!-- 订单信息 info -->
<div class="info">
<!-- 待付款 wait -->
<div class="wait">
<img src="./uploads/clothes_goods_5.jpg" alt="">
<div class="desc">
<p>
拉夫劳伦t恤男正品圆领短袖
拉夫劳伦t恤男正品圆领短袖
拉夫劳伦t恤男正品圆领短袖
拉夫劳伦t恤男正品圆领短袖
拉夫劳伦t恤男正品圆领短袖
</p>
<p>颜色：白色 尺码：M 数量：1</p>
</div>
<div class="check">
<p>待收货</p>
<a href="#">查看物流</a>
</div>
</div>
<!-- 价钱 money -->
<div class="money">
<p>￥99.00</p>
<p>（含运费：¥10.00元）</p>
<a href="#">在线支付</a>
</div>
<!-- 立即付款 pay -->
<div class="pay">
<a href="#">立即付款</a>
<a href="#">查看详情</a>
<a href="#">取消订单</a>
</div>
</div>
<!-- 订单信息 info -->
<div class="info">
<!-- 待付款 wait -->
<div class="wait">
<img src="./uploads/clothes_goods_6.jpg" alt="">
<div class="desc">
<p>
李宁跑步鞋男鞋空气弧
</p>
<p>颜色：灰色 尺码：42 数量：1</p>
</div>
<div class="check">
<p>待收货</p>
<a href="#">查看物流</a>
</div>
</div>
<!-- 价钱 money -->
<div class="money">
<p>￥199.00</p>
<p>（含运费：¥10.00元）</p>
<a href="#">在线支付</a>
</div>
<!-- 立即付款 pay -->
<div class="pay">
<a href="#">确认收货</a>
<a href="#">查看详情</a>
<a href="#">再次购买</a>
</div>
</div>
</div>
<!-- 收藏部分 -->
<div class="collection">
<div class="hd">
<h3>收藏的商品</h3>
<a href="#">查看全部</a>
</div>
<div class="goods_info">
<ul>
<li>
<a href="#">
<img src="./uploads/collect_goods_1.jpg" alt="">
<p>
人本秋季厚底帆布鞋
韩版低帮增高学生
</p>
<div class="pirce">
<em>￥</em>55
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_2.jpg" alt="">
<p>
迪士尼真皮针扣表带宽度
14-16mm规格双色压纹
</p>
<div class="pirce">
<em>￥</em>20.9
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_3.jpg" alt="">
<p>
三都港 冷冻无公害黄花鱼
700g 2条 袋装
</p>
<div class="pirce">
<em>￥</em>209
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_4.jpg" alt="">
<p>
ONLY夏季新款高腰宽松
七分阔腿裙裤休闲裤
</p>
<div class="pirce">
<em>￥</em>274.5
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="collection">
<div class="hd">
<h3>收藏的商品</h3>
<a href="#">查看全部</a>
</div>
<div class="goods_info">
<ul>
<li>
<a href="#">
<img src="./uploads/collect_goods_1.jpg" alt="">
<p>
人本秋季厚底帆布鞋
韩版低帮增高学生
</p>
<div class="pirce">
<em>￥</em>55
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_2.jpg" alt="">
<p>
迪士尼真皮针扣表带宽度
14-16mm规格双色压纹
</p>
<div class="pirce">
<em>￥</em>20.9
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_3.jpg" alt="">
<p>
三都港 冷冻无公害黄花鱼
700g 2条 袋装
</p>
<div class="pirce">
<em>￥</em>209
</div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/collect_goods_4.jpg" alt="">
<p>
ONLY夏季新款高腰宽松
七分阔腿裙裤休闲裤
</p>
<div class="pirce">
<em>￥</em>274.5
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 个人中心主体内容结束部分 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>
CSS模块
/* 给主体部分添加弹性容器 */
.main {
/* 添加弹性容器 */
display: flex;
/* 水平对齐，沿主轴方向一左一右排列 */
justify-content: space-between;
}
/* 主体左边部分 left */
.left {
width: 224px;
background-color: #fff;
}
/* 头像部分：avatar */
.avatar {
/* 添加弹性容器 */
display: flex;
/* 改变主轴方向(侧轴(默认是垂直方向)方向转换成水平方向(主轴方向转换为垂直方向)) */
flex-direction: column;
/* 侧轴居中 */
align-items: center;
height: 232px;
border-bottom: 2px solid #f4f4f4;
}
.avatar .pic{
width: 85px;
height: 85px;
margin-top: 46px;
}
.avatar p {
margin: 6px 0;
font-size: 18px;
}
.avatar .vip {
/*
text-align: center;
line-height: 26px;
display: flex;
justify-content: center;
align-items: center;
这两种都是可以做到水平垂直居中
*/
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #f9f9f9;
width: 93px;
height: 26px;
border-radius: 13px;
background-image: linear-gradient(264deg,
#e05e2f 0%,
#ea745e 95%
);
}
.avatar .vip img {
width: 15px;
height: 16px;
vertical-align: text-top;
margin-right: 5px;
}
/* --------------我的账户---------- */
.account {
padding-left: 75px;
border: 2px solid #f4f4f4;
}
.account dt {
font-size: 18px;
margin: 32px 0;
}
.account dd {
height: 42px;
}
.account dd a {
color: #666;
/* 父相 */
position: relative;
}
/* a 标签前面的小圆点 */
.account dd a::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #5cb99e;
/* 子绝 */
position: absolute;
top: 7px;
left: -15px;
/* 刚开始的状态是隐藏的 */
display: none;
}
.account dd a:hover::before {
/* 移到 a 标签上显示小圆点 */
display: block;
}
.account dd a:hover {
/* 鼠标悬停在 a 标签时显示的字体颜色 */
color: #5cb99e;
}
/* 主体右边部分 right */
.right {
width: 999px;
}
/* 数据概述 */
.overview {
/* 添加弹性容器 df */
display: flex;
height: 133px;
background-color: #fff;
}
.centre,.total {
/* 均分父盒子宽度 */
flex: 1;
/* 变成弹性容器，为了内容水平和垂直的对齐方式 */
display: flex;
/* 侧轴居中 */
align-items: center;
/* 主轴平分容器空白空间 */
justify-content: space-evenly;
font-size: 16px;
}
.centre a {
width: 64px;
height: 53px;
background: url(../images/vip.png) no-repeat center top/25px 22px;
padding-top: 35px;
text-align: center;
}
.centre a:nth-child(2) {
background: url(../images/safe.png) no-repeat center top/23px 25px;
}
.centre a:last-child {
background: url(../images/address.png) no-repeat center top/18px 25px;
}
.total a {
width: 49px;
height: 54px;
text-align: center;
}
.total a p:first-child {
font-size: 25px;
color: #e05e30;
}
/*
伪元素画竖线方法
1.要用子绝父相；
2.高度给竖线的高度，宽度给0
3.选择左或右边框，边框粗细为竖线的宽度
伪元素画横线方法
1.要用子绝父相；
2.高度给0，宽度给横线的宽度
3.选择上或下边框，边框粗细为横线的宽度
*/
.total {
/* 父相 */
position: relative;
}
.total::before {
content: '';
/* 子绝 */
position: absolute;
top: 20px;
left: 0;
height: 92px;
width: 0;
/* 只能选择一条边，如果不选择，那么中间将会有空白的空间 */
border-left: 2px solid #f4f4f4;
}
/* 我的订单 */
.orders {
margin: 18px 0;
background-color: #fff;
overflow: hidden;
}
/* 可供复用的 */
.hd {
/* 弹性容器 */
display: flex;
/* 侧轴居中 */
align-items: center;
/* 主轴一左一右 */
justify-content:space-between;
height: 70px;
}
.hd h3 {
font-size: 22px;
font-weight: 400;
margin-left: 25px;
}
.hd a {
font-size: 16px;
color: #999;
margin-right: 31px;
}
.hd a::after {
content: ">";
/* 变成中文大于号，格局打开 */
font-family: "宋体";
/* 宋体是比较纤细的，所以给它加粗 */
font-weight: 700;
margin-left: 6px;
}
/* 订单信息 info */
.info {
display: flex;
width: 964px;
height: 138px;
margin: 0 17px 19px 18px;
border: 2px solid #f4f4f4;
}
.info .wait {
display: flex;
align-items: center;
width: 585px;
}
.info .wait img {
width: 107px;
margin-left: 12px;
margin-right: 4px;
}
.info .wait .desc p:first-child {
font-size: 16px;
/* 设置可显示的文本的区域 */
width: 214px;
/* 文本超出一行以省略号显示 */
/* 文本不换行 */
white-space: nowrap;
/* 溢出显示文本的区域隐藏 */
overflow: hidden;
/* 溢出部分用省略号代替 */
text-overflow: ellipsis;
}
.info .wait .desc p:last-child {
color: #999;
}
.info .wait .check {
margin-left: 128px;
text-align: center;
}
.info .wait .check p {
color: #e05e30;
}
.info .money {
width: 199px;
border-left: 1px solid #e8e8e8;
border-right: 2px solid #e8e8e8;
text-align: center;
}
.info .money p:first-child {
margin-top: 40px;
color: #9a2e1f;
}
.info .pay {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.info .pay a:first-child {
margin-top: 27px;
width: 100px;
height: 30px;
background-color: #5eb69c;
text-align: center;
line-height: 30px;
color: #fff;
border-radius: 4px;
}
.info .pay a:nth-child(2) {
margin-top: 12px;
margin-bottom: 3px;
}
.collection {
height: 384px;
background-color: #fff;
margin-bottom: 19px;
}
.goods_info {
width: 962px;
border-top: 2px solid #f4f4f4;
}
.goods_info ul {
display: flex;
margin-left: 25px;
}
.goods_info li {
flex: 1;
height: 314px;
position: relative;
}
.goods_info li img {
width: 160px;
margin-left: 25px;
margin-top: 30px;
}
.goods_info li p {
font-size: 16px;
margin: 22px 40px 10px 14px;
}
.goods_info li .pirce {
font-size: 22px;
color: #9a2e1f;
}
.goods_info li .pirce em {
font-size: 17px;
margin-left: 14px;
}
.goods_info li::after {
position: absolute;
content: '6折';
left: 15px;
top: 21px;
border: 2px solid #5eb69c;
width: 28px;
height: 52px;
border-radius: 3px;
font-size: 20px;
line-height: 1.2;
text-align: center;
color: #5eb69c;
}
