day04移动web

- @[TOC](day04移动web)
一、Flex布局
二、小兔鲜儿-个人中心
总结

一、Flex布局

目标：能够使用Flex布局模型灵活、快速的开发网页
本质：浏览器提倡的布局模型
属性名：flex
使用场景：
结构化布局时使用，如：左右排版、左中右、上下、上中下
作用
1.基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象的发生。

Flex布局非常适合结构化布局

设置方式
给父元素添加 display: flex，子元素可以自动的挤压或拉伸
注意：
1、 flex默认不换行
2、换行属性flex-wrap, 值：wrap
3.、换行之后均分

1.1 flex的组成部分

flexe的组成部分
1. 弹性容器
2. 弹性盒子
3. 主轴
4. 侧轴
盒子排列方式
永远沿着主轴的方向排列

1.2 Flex中的常用属性

在这里插入图片描述

1.3 主轴对齐方式

目标：使用justify-content调节元素在主轴（水平方向时）的对齐方式
修改主轴对齐方式属性: justify-content（快捷：jc）
相关属性值：
注意：

Flex布局模型中，弹性盒子默认沿水平方向排列
主轴方向是可以改变的

1.4 侧轴对齐方式

核心代码：

       display: flex;
        /* 侧轴对齐方式 ai */
        align-items: center;
        justify-content: center;

注意：
align-self 对于单独的弹性盒子设置，添加给需要设置侧轴方向的弹性盒子添加

1.5 主轴方向

1.6 伸缩比

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        /* display: flex; */
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box span {
        width: 200px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span>李狗蛋</span>
      <span style="flex: 1">张三</span>
      <span>张翠花</span>
    </div>
  </body>

效果

1.5 弹性盒子

1.5.1 弹性盒子换行

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 1000px;
      height: 600px;
      background: orange;
    }
    .box span {
      width: 100px;
      /* height: 100px; */
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
      line-height: 100px;
      background-color: #0a0;
      border: 1px solid #fff;
    }

效果

换行核心代码

    /* 1、 flex默认不换行 */
        /* 2. 换行属性flex-wrap, 值：wrap */
        /* 3. 换行之后 均分 */
        display: flex;
        /* 让弹性盒子换行显示 */
        flex-wrap: wrap;
        /* 设置多行对齐方式,属性的取值与jc属性值一样 */
        /* align-content: space-evenly; */
        width: 1000px;
        /* 不设置高度行与行挨在一块，设置高度，会被均分 */
        height: 600px;
        background: orange;
        /* center:所有的行居中对齐 */
        /* align-content: 取值基本与jc justify-content相同 没有默认值是拉伸均分盒子高度  */
        /* acc  居中*/
        align-content: center;
        /* acfs 头贴 */
        align-content: flex-start;
        /* acfe 尾贴 */
        align-content: flex-end;
        align-content: space-between;
        align-content: space-around;
      }

效果

二、小兔鲜儿-个人中心

2.1 介绍

在工作中我们可能接手同事未完成的项目，那么当我们拿到这类项目时应该怎么做呢？首先要看项目的完成度，并以此确定自己所需完成的模块，再者查看版心等内容。本文主要介绍小兔鲜项目的个人中心模块，根据已完成的头部header和底部footer模块，完成剩下的个人中心模块。

2.2 main模块（left+right）

2.2.1 结构搭建

在这里插入图片描述

2.2.2 CSS样式

.main {
    /* 开启flex */
    display: flex;
    /* 设置两边对齐 快捷jcsb  */
    justify-content: space-between;
}

.left {
    width: 224px;
    background-color: pink;
    /* 辅助颜色pink，后面改为白色#fff */
}

.right {
        width: 999px;
}

注意：考虑部分顾客为会员，那么会比普通顾客多出一些会员信息内容，所以这里不设置高度，让它自由撑开。

2.3 个人中心–公共样式

/* 公共样式面板 start */
.pannel {
  padding: 28px 20px;
  background-color: #fff;
  margin-bottom: 20px;
}

.pannel .pannel-title {
  display: flex;
  justify-content: space-between;
  height: 44px;
  border-bottom: 2px solid #f4f4f4;
}

.pannel .pannel-title h5 {
  font-size: 22px;
  font-weight: 400;
  margin-left: 8px;
}

.pannel .pannel-title a {
  font-size: 16px;
  color: #999;
  margin-right: 4px;
  margin-top: 6px;
}
/* 公共样式面板 end */

2.4 左侧left模块

2.4.1 头像区域（avatar）

.avatar {
    padding: 46px 0 13px 0;
    /* 开启flex布局 快捷：df  */
    display: flex;
    /* 改变主轴方向 */
    flex-direction: column;
    /* 垂直居中 */
    justify-content: center;
    align-items: center;

    width: 230px;
    border-bottom: 2px solid  #f4f4f4;
}

.avatar .pic { 
    width: 85px;
	height: 86px;
}

.avatar p {
    font-size: 18px;
	font-weight: normal;
	color: #333333;
    margin: 13px 0 11px 0;
}

.avatar a {
	width: 93px;
	height: 27px;
	background-image: 
	linear-gradient(0deg,#e4973c 100%);
	background-blend-mode: normal, normal;
	border-radius: 13px;
    color: #fff;
    background-color: #ea745e;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.avatar  img {
    width: 15px;
	height: 16px;
    margin-right: 5px;
}

头像区域结构代码

        <!-- 头像区域start -->
       <div class="profile">
            <div class="avatar">
            <img src="./uploads/avatar_1.png" alt="" class="pic"><p>张小花</p>
           <div>
                <a href="#"><img src="./uploads/vip_gold.png" alt="">黄金会员</a>
           </div>
        </div>
       </div>
        <!-- 头像区域end -->

效果图

2.4.2 我的账户（account）

/* ---账户信息start */
.account {
    padding: 34px 0 61px 0;

    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #f4f4f4;
}

.account dt {
	font-size: 18px;
	font-weight: normal;
	color: #333333;
    margin-bottom: 31px;
}

.account dd {
	font-size: 14px;
	font-weight: normal;
	color: #999999;
    margin-bottom: 29px;
}

.account dd a {
    position: relative;
}

.account a::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 7px;
    left: -15px;
    top: 50%;
	border-radius: 50%;
	background-color: #5eb69c;
    transform: translateY(-50%);
    display: none;
}

.account a:hover::before{
    display: inline-block;
}

.account a:hover {
     color: #5eb69c;
}
/* 我的账户end */

    <div class="account">
        <dl>
            <dt><a href="#">我的账户</a></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>

效果

2.4.3 交易管理（transaction）

    <!-- 交易管理start  -->
    <div class="transaction">
        <dl>
            <dt><a href="#">交易管理</a></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>
    <!-- 交易管理end  -->

效果图样式和前面的一样，只是信息不同

2.4.4 我的收藏（collection）

样式和结构跟我的账户一样，改个名字即可，效果一样

2.4.5 帮助中心（assistance）

样式和结构跟我的账户一样，改个名字即可，效果一样。需要注意的是，最后这个把assistance的底部边框去掉即可。

2.5 右侧right模块

2.5.1 数据概括（overview）

/* 数据概括 开始 */
.overview {
    height: 133px;
    padding: 19px 0 22px 0;
    
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #fff;
}

.overview a {
    width: 64px;
	height: 54px;
	font-size: 16px;
	font-weight: normal;
	color: #333333;

    /* 开启flex布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 改变主轴方向 */
    flex-direction: column;
}

.line{
    width: 2px;
    height: 92px;
    background-color: #f4f4f4;
}

.overview a span {
    width: 25px;
	height: 22px;
    background: url('../images/vip.png') no-repeat;
    /* 等比例缩放，拉满盒子的宽度或高度  */
    background-size: contain;
}

.overview a:nth-child(2) span {
    width: 25px;
	height: 23px;
    background-image: url('../images/safe.png');
}

.overview a:nth-child(3) span {
    width: 18px;
    height: 25px;
    background-image: url('../images/address.png');
}

.overview a h5 {
  font-size: 26px;
  color: #e05e30;
  font-weight: 400;
  line-height: 24px;
}
/* 数据概括 结束 */

<!-- 数据概括 开始-->
    <div class="overview">
             <a href="#">
                 <span></span>
                <p>会员中心</p>
            </a>
            <a href="#">
                 <span></span>
                <p>安全设置</p>
            </a>
            <a href="#">
                 <span></span>
                <p>地址管理</p>
            </a>
         <span class="line"></span>
              <a href="#">
                 <h5>6</h5>
              <p>优惠卷</p>
            </a>
            <a href="#"> 
                <h5>70 </h5>
                <p>礼品卡</p>
            </a>
            <a href="#">
                <h5>120</h5>
                <p>积分</p>
            </a>
    </div>
    <!-- 数据概括结束 -->