Day04-Flex布局补充+实战演练

纯纯不会写代码

已于 2022-09-29 20:28:41 修改

阅读量459

点赞数

分类专栏： web移动端文章标签： css css3 html

于 2022-09-07 21:03:37 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/126719269

版权

web移动端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Day04-Flex布局补充+实战演练

一、小兔鲜儿-确认订单（移动端）
二、Flex布局补充
- 1.1 主轴方向
- 2.1 弹性盒子换行
三、实战演练-小兔鲜儿（pc端）

一、小兔鲜儿-确认订单（移动端）

orders.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 rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主体内容 -->
    <div class="main">
        <!-- 订单信息 -->
        <div class="order-msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="info">
                <div class="user-msg">
                    <div class="name">林丽</div>
                    <div class="tel">18500667882</div>
                </div>
                <div class="address">北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#   </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 订单信息 -->

        <!-- 产品 -->
        <div class="goods">
            <div class="pic">
                <a href="#"><img src="./uploads/pic.png" alt=""></a>
            </div>
            <div class="info">
                <h4>康尔贝 非接触式红外体温仪 
                    领券立减30元 婴儿级材质 测温…</h4>
                <p>粉色   红外体温计</p>
                <div class="price">
                    <div class="current-price">
                        <i>¥</i>
                        <span>266</span>
                    </div>

                    <div class="cost-price">
                        <i>¥</i>
                        <span>299</span>
                    </div>
                </div>
            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
                <span>1</span>
            </div>
        </div>
        <!-- 产品 -->

        <!-- 其他信息 -->
        <div class="rest pannel">
            <div class="express">
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div class="remark">
                <h5>买家备注</h5>
                <p>希望可以尽快发货，谢谢~</p>
            </div>
            <div class="payment">
                <h5>支付方式</h5>
                <p>
                    支付宝
                    <i class="iconfont icon-more"></i>
                </p>
            </div>
        </div>
        <!-- 其他信息 -->

        <!-- 支付金额 -->
        <div class="amount pannel">
            <div class="sum">
                <h5>商品总价</h5>
                <p>￥299.00</p>
            </div>
            <div class="freight">
                <h5>运费</h5>
                <p>￥0.00</p>
            </div>
            <div class="discount">
                <h5>折扣</h5>
                <p>-￥30.00</p>
            </div>
        </div>
        <!-- 支付金额 -->
    </div>

    <!-- 订单支付 -->
    <div class="pay-order">
        <div class="sum">
            <p>合计:</p>
            <div>
                <i>￥</i>
                <span>266.00</span>
            </div>
        </div>
        <div class="pay">
            <a href="#">去支付</a>
        </div>
    </div>
</body>
</html>

base.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #5eb69c;
}
img {
  width: 100%;
  vertical-align: middle;
}
input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

orders.css

body {
    background-color: #f7f7f7;
}


/* 主体内容 */

.main {
    /* 92px: 为了内容不被底下区域盖住 */
    padding: 12px 12px 92px;
}


/* 订单信息 */

.main .order-msg {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0 10px 10px;
    background-color: #fff;
}

.main .order-msg .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-color: #55b297;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 30px;
}


/* 订单详情 */

.main .order-msg .info {
    flex: 1;
    line-height: 28px;
}

.main .order-msg .info .user-msg {
    display: flex;
}

.main .order-msg .info .name {
    width: 50px;
    font-size: 15px;
    color: #262626;
}

.main .order-msg .info .tel {
    font-size: 13px;
    color: #333;
}

.main .order-msg .info .address {
    line-height: 20px;
    font-size: 12px;
    color: #333;
}

.main .order-msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}


/* 产品 */

.main .goods {
    display: flex;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
}

.main .goods .pic {
    width: 85px;
    height: 85px;
    margin-right: 10px;
}

.main .goods .info {
    flex: 1;
}

.main .goods .info h4 {
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}

.main .goods .info p {
    margin-top: 5px;
    font-size: 12px;
    color: #888;
}

.main .goods .info .price {
    display: flex;
    margin-top: 10px;
    font-size: 12px;
    line-height: 22px;
}

.main .goods .info .current-price {
    margin-right: 10px;
    color: #cf4444;
}

.main .goods .info .current-price span {
    font-size: 16px;
}

.main .goods .info .cost-price {
    color: #999;
    text-decoration: line-through;
}

.main .goods .count {
    margin-top: 17px;
    font-size: 15px;
    color: #262626;
}


/* 其他信息 */

.pannel {
    margin-bottom: 10px;
    padding: 13px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #262626;
}

.rest .express,
.amount .sum,
.amount .freight,
.amount .discount {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.rest h5,
.amount h5 {
    font-weight: 400;
    font-size: 13px;
}

.rest .remark {
    display: flex;
    margin-bottom: 30px;
}

.rest .remark h5 {
    margin-right: 10px;
}

.rest .remark p {
    color: #989898;
    font-size: 12px;
}

.rest .payment {
    display: flex;
    justify-content: space-between;
}

.rest .payment i {
    font-size: 12px;
    color: #808080;
}


/* 支付金额 */

.amount .discount {
    margin-bottom: 0;
}

.amount .discount p {
    color: #cf4444;
}


/* 订单支付 */

.pay-order {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 10px 10px 0 20px;
    background-color: #fff;
    border-top: 1px solid #ededed;
}

.pay-order .sum {
    display: flex;
    line-height: 50px;
}

.pay-order .sum p {
    margin-right: 10px;
    font-size: 12px;
    color: #1e1e1e;
}

.pay-order .sum i {
    font-size: 12px;
    color: #cf4444;
}

.pay-order .sum span {
    font-size: 20px;
    color: #cf4444;
}

.pay-order a {
    display: block;
    width: 91px;
    height: 35px;
    background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-size: 13px;
}

二、Flex布局补充

1.1 主轴方向

目标：使用flex-direction改变元素排列方向

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴的方向: 列 */
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 盒子垂直居中 */
            justify-content: center;

            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }
        
        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/media.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

2.1 弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap;

调整行对齐方式：align-content，取值与justify-content基本相同

在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行的对齐方式 */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;

            height: 500px;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

在这里插入图片描述

三、实战演练-小兔鲜儿（pc端）

center.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 rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/center.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">生鲜</a>
                    </li>
                    <li>
                        <a href="javascript:;">美食</a>
                    </li>
                    <li>
                        <a href="javascript:;">餐厨</a>
                    </li>
                    <li>
                        <a href="javascript:;">电器</a>
                    </li>
                    <li>
                        <a href="javascript:;">居家</a>
                    </li>
                    <li>
                        <a href="javascript:;">洗护</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕婴</a>
                    </li>
                    <li>
                        <a href="javascript:;">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="javascript:;" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜">
                </div>
            </div>
        </div>
    </div>

    <!-- 内容：待完成 -->
    <div class="xtx_body">
        <div class="wrapper">
            <!-- 侧边栏 -->
            <div class="aside">1</div>
            <!-- 侧边栏 -->

            <!-- 主体内容 -->
            <div class="main">
                <!-- 用户账户概览 -->
                <div class="overview">
                    <div>
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a class="change" href="#">
                            <img src="./images/address.png" alt="">
                            <p>会员中心</p>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span>6</span>
                            <p>优惠卷</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠卷</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠卷</p>
                        </a>
                    </div>
                </div>
                <!-- 用户账户概览 -->

                <!-- 订单 -->
                <div class="pannel orders">
                    <div class="pannel_title">
                        <h4>我的订单</h4>
                        <a href="#">查看更多 ></a>
                    </div>

                    <div class="content">
                        <ul>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                                        <p>颜色：白色  尺码：M  数量：1</p>
                                    </div>
                                </div>
                                <div class="status">
                                    <p>待付款</p>
                                </div>
                                <div class="pay common">
                                    <p>￥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                                        <p>颜色：白色  尺码：M  数量：1</p>
                                    </div>
                                </div>
                                <div class="status">
                                    <p>待付款</p>
                                    <p>查看物流</p>
                                </div>
                                <div class="pay common">
                                    <p>￥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 订单 -->
            </div>
            <!-- 主体内容 -->
        </div>
    </div>
    <!-- 内容 -->


    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

base.css

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

center.css

.xtx_body {
    padding: 30px 0 85px;
    background-color: #f6f6f6;
}

.xtx_body .wrapper {
    display: flex;
}

/* 侧边栏 */
.xtx_body .aside {
    width: 227px;
    min-height: 500px;
    margin-right: 18px;
    background-color: pink;
}

/* 主体内容 */
.xtx_body .main {
    flex: 1;
    min-height: 500px;
    /* background-color: skyblue; */
}

/* 用户账户概览 */
.overview {
    display: flex;
    height: 132px;
    margin-bottom: 18px;
    padding: 20px 0;
    background-color: #fff;
}

.overview div {
    /* a在一行显示 */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex: 1;
    text-align: center;
}

.overview div:first-child {
    border-right: 1px solid #f4f4f4;
}

.overview div a img {
    width: 25px;
    margin-bottom: 10px;
}

.overview div span {
    font-size: 25px;
    color: #e05e30;
}

.overview div:first-child {
    margin-top: 7px;
}

.overview div p {
    font-size: 16px;
}

/* 把概览区最后一个图变宽度为18px */
.overview div a:last-child img {
    width: 18px;
}

.overview .change {
    display: inline-block;
    margin-bottom: 3px;
}

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

.pannel .pannel_title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f4f4f4;
}

.pannel .pannel_title h4 {
    font-size: 22px;
    color: #333;
    font-weight: normal;
}

.pannel .pannel_title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999;
}

/* 订单 */
.orders li {
    display: flex;
    height: 137px;
    border: 1px solid #f4f4f4;
    margin-top: -1px;
    margin-bottom: 20px;
}

.orders li:last-child {
    margin-bottom: 0;
}

.orders li .goods {
    display: flex;
    align-items: center;
    padding: 17px 0 14px 12px;
    flex: 1;
    margin-right: 120px;
}

.orders .goods .pic {
    width: 107px;
    height: 107px;
}

.orders .goods .txt {
    flex: 1;
    /* 为了溢出的时候显示省略号 */
    /* 因为弹性盒子的尺寸可以被内容撑开, 不换行的文字可以撑开这个盒子的尺寸 */
    width: 0;
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: normal;
    font-size: 16px;
    color: #333;
}

.orders .goods .txt p {
    font-size: 14px;
    color: #999;
}


.orders li .status {
    width: 120px;
}

.orders li .pay {
    width: 200px;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    font-size: 14px;
    color: #333;
}

.orders li .pay p:first-child {
    color: #9a2e1f;
}

.orders li .action {
    width: 180px;
}

.orders li .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orders li .action a:first-child {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    background-color: #5eb69c;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
}

.orders li .action a:nth-child(2) {
    margin-bottom: 5px;
}

.orders li .status {
    display: flex;
    flex-direction: column;
    /* line-height: 135px; */
    justify-content: center;
    /* text-align: center; */
    color: #e05e30;
}

.orders li .status p:nth-child(2) {
    margin-left: -7px;
    color: #999;
}

纯纯不会写代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day04-Flex布局补充+实战演练

orders.htmlbase.cssorders.css二、Flex布局补充1.1 主轴方向目标：使用flex-direction改变元素排列方向主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction目标：使用flex-wrap实现弹性盒子多行排列效果弹性盒子换行显示 : flex-wrap: wrap;调整行对齐方式：align-content，取值与justify-content基本相同center.htmlbase.csscenter.css
复制链接

扫一扫