个人中心页面重构：Flex布局与优化实践-CSDN博客

本文链接：https://blog.csdn.net/StarAh/article/details/124000976

今天用flex布局来完成一个PC端的个人中心的页面，写的不好或者格式不对或者有更好的布局方式可以私聊一下，受教了，谢谢。

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
}

按钮初始样式

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

个人中心CSS样式

/* 版心 */
.center {
  width: 1244px;
  margin: 0 auto;
}

html body {
  background-color: #f6f6f6;
}

/* 头部导航栏 */
.xtx_topnav {
  height: 53px;
  background-color: #333333;
}

.center_nav ul {
  display: flex;
  justify-content: flex-end;
}
.center_nav ul li {
  line-height: 53px;
  font-size: 14px;
  color: #dcdcdc;
  
  
}
.center_nav ul li a {
  padding: 0 15px;
  color: #dcdcdc;
  font-size: 14px;
}
.center_nav ul li a img {
  width: 11px;
  margin-right: 5px;
}
header {
  height: 180px;
  background-color: #fff;
  padding-top: 32px;
}
.xtx_header .logo img {
  float: left;
  width: 143px;
  margin-top: -19px;
  
}
.xtx_header .logo {
  font-size: 0;
}
/* 搜索框 */
.search input {
  float: right;
  width: 265px;
  height: 30px;
  border-bottom: 2px solid #e7e7e7;
  font-size: 15px;
  padding-left: 39px;
  background: url(../images/sousuo.png) no-repeat;
  background-size: 17px;
}
.search input::-webkit-input-placeholder {
  transform: translateY(-2px);
}
/* 购物车 */
.shapecopy {
  position: relative;
  float: right;
}
.shapecopy span {
  position: absolute;
  top: 2;
  right: -15px;
  width: 20px;
  height: 14px;
  background-image: linear-gradient(264deg, 
		#e05e2f 0%, 
		#ea745e 95%), 
	linear-gradient(
		#cb5245, 
    #cb5245);
    border-radius: 6px;
    text-align: center;
    line-height: 14px;
    font-size: 13px;
    color: #fff;
}
.shapecopy img {
  width: 22px;
  margin-left: 15px;
  margin-top: 5px;
}
/* 导航栏 */
.nav ul {
  display: flex;
  padding-left: 85px;
  margin-top: 60px;
}

.nav ul li a {
  display: inline-block;
  margin-right: 50px;
  width: 32px;
  height: 24px;
  font-size: 16px;
  /* margin-top: 76px; */
}

.nav ul li:hover a {
  width: 32px;
  border-bottom: 2px solid #5eb69c;
  color: #5eb69c;
}

/* 底部区域 */
.footer {
  border-top: 2px solid #e4e4e4;
  height: 630px;
}
.footer_top {
  height: 287px; 
  padding-top: 56px;
}
.footer_top ul {
  display: flex;
  justify-content: center;  
}
.footer_top ul li {
  width: 344px;
  height: 190px;
  border-right: 2px solid #e4e4e4;
  text-align: center;
}
.footer_top ul li h4 {
  font-size: 18px;
  font-weight: 400;
}

.top_bd  {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_bd a {
  display: block;
  width: 92px;
  height: 92px;
  background-color: #fff;
  border: 2px solid #e4e4e4;
  margin: 0 6px;
  margin-top: 37px;
}
.top_bd a img {
  width: 29px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.top_bd a p {
  font-size: 14px;
}
.top_bd span{
  width: 105px;
  height: 115px;  
  margin-top: 25px;
}
.top_bd span:nth-child(2) {
  margin-left: 22px;
}
.top_bd span img {
  width: 100%;
}
.top_bd span p {
  float: left;
  margin-top: 10px;
  text-align: left;
  margin-left: 5px;
}
.top_bd span i a {
  text-align: center;
  line-height: 35px;
  width: 105px;
  height: 35px;
  border: 1px solid #e4e4e4; 
  margin-top: 60px;
}
.footer_top .hotline {
  border-right: 0;
}
.footer_top li:last-child h4 {
  padding-bottom: 58px;
}
.footer_top li:last-child div h5 {
  font-size: 22px;
  font-weight: 400;
}

.footer_bottom {
  height: 343px;
  background-color: #333333;
}
.footer_bottom_hd {
  padding-top: 61px;
  height: 173px;
  border-bottom: 2px solid #434343;;
}
.footer_bottom_hd ul {
  display: flex;
  justify-content: space-between;
}
.footer_bottom_hd ul li img {
  float: left;
  width: 58px;
  margin-right: 20px;
}
.footer_bottom_hd ul li>p {
  float: left;
  font-size: 28px;
  margin-top: 5px;
  color: #fff;
}
.footer_bottom_bd {
  text-align: center;
  height: 169px;
  font-size: 15px;
}
.footer_bottom_bd ul {
  display: flex;
  justify-content: center;
}
.footer_bottom_bd ul li {
  margin-top: 40px;
  margin-bottom: 20px;
}
.footer_bottom_bd  ul li a {
  margin: 0 10px;
}
 
/* 内容区域 */
.wrapper {
  display: flex;
  justify-content: space-between;
}

.xtx_center {
  padding: 30px 0 85px;
}
.center_left {
  width: 1000px;
}
.center_right {
  width: 227px ;
  background-color: #fff;
}
.overview {
  display: flex;
  padding: 20px 0;
  height: 132px;
  background-color: #fff;
}
.overview div:first-child {
  border-right: 1px solid #f4f4f4;
}
.overview div {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
.overview div p {
  font-size: 16px;
}
.overview div span {
  font-size: 25px;
  color: #e05e30;
}
.overview div a img {
  width: 25px;
  margin-bottom: 10px;
}
.overview div a:last-child img  {
  width: 18px;
}
/* 公共内容头部样式 */
.panel {
  padding: 28px 18px;
  margin-top: 18px;
  background-color: #fff;
}
.panel .panel_hd {
  display: flex;
  justify-content: space-between;
  height: 45px;
  border-bottom: 1px solid #f4f4f4;
}
.panel .panel_hd h4 {
  font-size: 22px;
  font-weight: 400;
  color: #333333;
}
.panel .panel_hd a {
  font-size: 16px;
  color: #999999;
  margin-top: 8px;
}
/* 订单区域 */
.order .content ul li {
  display: flex;
  height: 137px;
  border: 1px solid #f4f4f4;
  margin-top: -1px;
  margin-bottom: 20px;
}
.order .content ul li:last-child {
  margin-bottom: 0;
}
.order li .product {
  display: flex;
  align-items: center;
  padding: 17px 0 14px 12px;
  flex: 1;
  margin-right: 120px;
}
.order .product .pic img {
  width: 107px;
  height: 107px;
}
.order .product .text {
  width: 0;
  flex: 1;
}
.order .product .text h5{
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order .product .text p {
  font-size: 14px;
  margin-top: 10px;
  color: #999;
}

.order .state {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.order .state h5 {
  font-size: 14px;
  font-weight: 400;
  color: #e05e30;
  margin-left: 6px;
  margin-bottom: 3px;
}
.order .state a {
  font-size: 14px;
  color: #999;
}

.order li .state {
  width: 120px;
}
.order  li .pay {
  width: 200px;
  border-left: 1px solid  #e8e8e8;
  border-right: 1px solid  #e8e8e8;
}
.order li .ation{
  width: 180px;
}
/* 公共样式 */
.order .common {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.order .pay h5 {
  font-weight: 400;
  color: #9a2e1f;
}
.order .ation a:first-child {
  width: 100px;
  height: 30px;
  background-color: #5eb69c;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
  color: #fff;
}
.order .ation a:first-child:active {
  background-color: #1a7c5f;
  color: #fff;
}
.order .ation a:first-child:hover {
  color: #fff;
}

/* 收藏商品区域 */
.collection_bd {
  display: flex;
  justify-content: space-around;
  padding-bottom: 30px;
  margin-top: 30px;
}
.collection_bd  div{
  width: 178px;
}
.collection_bd  .pic img{
  width: 160px;
  height: 160px;
}
.collection_bd .text h5 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  margin-top: 20px;
  margin-bottom: 15px;
}
.collection_bd .text p {
  font-size: 17px;
  color: #9a2e1f;
}
.collection_bd .text p i {
  font-size: 22px;
}

/* 侧边导航栏 */
.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 47px;
}
/* 用户头像 */
.portrait .img  img{
  width: 85px;
  height: 85px;
  border-radius: 50%;
}
.portrait h4 {
  font-size: 18px;
  font-weight: 400;
  padding: 10px 0;
}
.portrait .portrait_vip {
  width: 93px;
  height: 26px;
  line-height: 26px;
  background-color:	#ea745e;
  text-align: center;
  border-radius: 13px;
  color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 32px;
}
.portrait .portrait_vip  img {
  width: 15px;
  margin-bottom: 5px;
}
.line {
  height: 1px;
  background-color: #f4f4f4;
}
.account ul h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
  /* border-top: 1px solid #f4f4f4; */
  padding-top: 30px;
  transform: translate(50px)
}
.account ul  {
  margin-bottom: 20px;
}
.account ul li {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  transform: translate(40px)
}

.account ul li a:before {
  visibility: hidden;
  display: none;
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #5eb69c;
  border-radius: 50%;
  margin-right:5px;
  vertical-align: middle;
  transform: translateX(-5px);
}
.account ul li a:hover::before {
  visibility:visible; 
}
.account ul li a:hover {
  color: #5eb69c;
}

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小兔鲜个人中心</title>
  <meta name="description" content="小兔鲜-专业的综合网上购物商城，销售家电，数码通讯，电脑家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品.便捷，诚信的服务，为你提供愉悦的网上购物体验！"/>
  <meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡"/>

  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/center.css">
  <!-- 清除按钮的样式 -->
  <link rel="stylesheet" href="./css/normalize.css">
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">

</head>
<body>
  <!-- 头部导航栏start -->
  <div class="xtx_topnav">
    <div class="center">
      <div class="center_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="#"> <img src="./images/shouji.png" alt=""> 手机版</a></li>
        </ul>                                          
      </div>
    </div>
  </div>
  <!-- 头部导航栏end -->

  <!-- 头部区域start -->
  <header>
    <div class="xtx_header center">
      <!-- logo -->
      <h1 class="logo" title="小兔鲜儿"><img src="./images/logo.png" alt="">小兔鲜儿</h1>
      <!-- 购物车 -->
      <div class="shapecopy">
        <a href="#">
            <span>2</span>
            <i><img src="./images/Shapecopy.png" alt=""></i>
        </a>
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <input type="text" placeholder="搜一搜" >
      </div>
      <!-- 导航栏 -->
      <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>
          <li><a href="#">杂货</a></li>
        </ul>
      </div>
    </div>
  </header>
  <!-- 头部区域 end-->

  <!-- 内容区域start -->
  <div class="xtx_center center">
    <div class="wrapper">
        <!-- 侧边导航栏 -->
        <div class="center_right">
          <!-- 用户头像 -->
          <div class="portrait">
            <a href="#" class="img"><img src="./images/img.png" alt=""></a>
            <h4>张小花</h4>
            <a href="#" class="portrait_vip"> <i><img src="./images/vip.png" alt=""></i> 黄金会员</a>
          </div>
         
          <!-- 我的账户 -->
          <div class="account">
            <ul>
              <div class="line"></div>
              <h4>我的账户</h4>
              <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>
            <ul>
                <div class="line"></div>
                <h4>交易管理</h4>
                <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>
              <ul>
                  <div class="line"></div>
                  <h4>我的收藏</h4>
                  <li><a href="#">收藏的商品</a></li>
                  <li><a href="#">收藏的商品</a></li>
                  <li><a href="#">收藏的商品</a></li>
                </ul>
                <ul>
                    <div class="line"></div>
                    <h4>帮助中心</h4>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                  </ul>
          </div>
        </div>
        <!-- 主体内容 -->
        <div class="center_left">
           <!-- 用户账户概览 -->
           <div class="overview">
              <div>
                <a href="#">
                  <img src="./images/overview_vip1.png" alt="">
                  <p>会员中心</p>
                </a>
                <a href="#">
                  <img src="./images/overview_vip2.png" alt="">
                  <p>安全设置</p>
                </a>
                <a href="#">
                  <img src="./images/overview_vip3.png" alt="">
                  <p>地址管理</p>
                </a>
              </div>
              <div>
                <a href="#">
                  <span>6</span>
                  <p>优惠卷</p>
                </a>
                <a href="#">
                    <span>70</span>
                    <p>礼品卡</p>
                  </a>
                  <a href="#">
                      <span>120</span>
                      <p>积分</p>
                    </a>
              </div>
            </div>
    
            <!-- 订单 -->
            <div class="panel order">
              <div class="panel_hd">
                <h4>我的订单</h4>
                <a href="#">查看全部<i class="iconfont icon-a-VectorStroke-2"></i></a>
              </div>

              <div class="content">
                  <ul>
                    <li>
                      <div class="product">
                        <div class="pic">
                          <a href="#"><img src="./upload/product_pic1.png" alt=""></a>
                        </div>
                        <div class="text">
                          <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                          <p>颜色：<i>白色 </i> 尺码：<em>M</em>  数量：<span>1</span></p>
                        </div>
                      </div>
                      <div class="state">
                        <h5>待付款</h5>
                      </div>
                      <div class="pay common">
                        <h5>￥99.00</h5>
                        <p>（含运费：<i>¥10.00</i>元）</p>
                        <p>在线支付</p>
                      </div>
                      <div class="ation common">
                        <a href="#">立即付款</a>
                        <a href="#">查看详情</a>
                        <a href="#">取消订单</a>
                      </div>
                    </li>
                    <li>
                        <div class="product">
                          <div class="pic">
                            <a href="#"><img src="./upload/product_pic2.png" alt=""></a>
                          </div>
                          <div class="text">
                            <h5>李宁跑步鞋男鞋空气弧李宁跑步鞋男鞋空气弧</h5>
                            <p>颜色：<i>灰色 </i> 尺码：<em>42</em>  数量：<span>1</span></p>
                          </div>
                        </div>
                        <div class="state">
                          <h5>待付款</h5>
                          <a href="#">查看物流</a>
                        </div>
                        <div class="pay common">
                          <h5>￥199.00</h5>
                          <p>（含运费：<i>¥10.00</i>元）</p>
                          <p>在线支付</p>
                        </div>
                        <div class="ation common">
                          <a href="#">确认收货</a>
                          <a href="#">查看详情</a>
                          <a href="#">取消订单</a>
                        </div>
                      </li>
                  </ul>
              </div>
              </div>

            <!-- 收藏商品 -->
          <div class="panel collection">
                  <div class="panel_hd">
                      <h4>收藏的商品</h4>
                      <a href="#">查看全部<i class="iconfont icon-a-VectorStroke-2"></i></a>
                  </div>
                  <div class="collection_bd">
                    <div><a href="#">
                      <div class="pic"><img src="./upload/collection_img1.png" alt=""></div>
                      <div class="text">
                        <h5>人本秋季厚底帆布鞋   
                          韩版低帮增高学生</h5>
                        <p>￥<i>55</i></p>
                      </div>
                      </a>
                    </div>
                    <div><a href="#">
                      <div class="pic"><img src="./upload/collection_img2.png" alt=""></div>
                      <div class="text">
                        <h5>迪士尼真皮针扣表带宽度
                          14-16mm规格双色压纹</h5>
                        <p>￥<i>20.9</i></p>
                      </div>
                      </a>
                    </div>
                    <div><a href="#">
                      <div class="pic"><img src="./upload/collection_img3.png" alt=""></div>
                      <div class="text">
                        <h5>三都港 冷冻无公害黄花鱼
                          700g 2条 袋装</h5>
                        <p>￥<i>209</i></p>
                      </div>
                      </a>
                    </div>
                    <div><a href="#">
                      <div class="pic"><img src="./upload/collection_img4.png" alt=""></div>
                      <div class="text">
                        <h5>ONLY夏季新款高腰宽松
                          七分阔腿裙裤休闲裤</h5>
                        <p>￥<i>247.5</i></p>
                      </div>
                      </a>
                    </div>
                    
                  </div>
          </div>

          <!-- 我的足迹 -->
          <div class="panel collection">
            <div class="panel_hd">
                <h4>我的足迹</h4>
                <a href="#">查看全部<i class="iconfont icon-a-VectorStroke-2"></i></a>
            </div>
            <div class="collection_bd">
              <div><a href="#">
                <div class="pic"><img src="./upload/product_pic1.png" alt=""></div>
                <div class="text">
                  <h5>人本秋季厚底帆布鞋   
                    韩版低帮增高学生</h5>
                  <p>￥<i>55</i></p>
                </div>
                </a>
              </div>
              <div><a href="#">
                <div class="pic"><img src="./upload/product_pic2.png" alt=""></div>
                <div class="text">
                  <h5>迪士尼真皮针扣表带宽度
                    14-16mm规格双色压纹</h5>
                  <p>￥<i>20.9</i></p>
                </div>
                </a>
              </div>
              <div><a href="#">
                <div class="pic"><img src="./upload/collection_img3.png" alt=""></div>
                <div class="text">
                  <h5>三都港 冷冻无公害黄花鱼
                    700g 2条 袋装</h5>
                  <p>￥<i>209</i></p>
                </div>
                </a>
              </div>
              <div><a href="#">
                <div class="pic"><img src="./upload/collection_img4.png" alt=""></div>
                <div class="text">
                  <h5>ONLY夏季新款高腰宽松
                    七分阔腿裙裤休闲裤</h5>
                  <p>￥<i>247.5</i></p>
                </div>
                </a>
              </div>
              
            </div>
          </div>
        </div>
    </div>
  </div>

  <!-- 内容区域end -->

  <!-- 底部区域 start-->
  <footer class="footer">
    <div class="footer_top">
      <ul>
        <li>
          <h4>客户服务</h4>
          <div class="top_bd">
            <a href="#">
                <img src="./images/top_bd_img.png" alt="">
                <p>在线客服</p>
            </a>
            <a href="">
              <img src="./images/top_bd_img2.png" alt="">
              <p>问题反馈</p>
            </a>
          </div>
        </li>
        <li>
            <h4>客户服务</h4>
            <div class="top_bd">
              <a href="#">
                  <img src="./images/top_bd_img3.png" alt="">
                  <p>在线客服</p>
              </a>
              <a href="">
                <img src="./images/top_bd_img4.png" alt="">
                <p>问题反馈</p>
              </a>
            </div>
          </li>
        
        <li>
          <h4>下载APP</h4>
          <div class="top_bd">
            <span><img src="./images/top_bd_img5.png" alt=""></span>
            <span>
                <p>扫描二维码 <br> 立马下载</p>
                <i><a href="#">下载页面</a></i>
            </span>
          </div>
        </li>
        <li class="hotline">
          <h4>服务热线</h4>
          <div >
              <h5>400-0000-000</h5>
              <h5>周一至周日 8:00-18:00</h5>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer_bottom">
        <div class="footer_bottom_hd center">
          <ul>
            <li>
              <img src="./images/footer_bottom1.png" alt="">
              <p>价格亲民</p>
            </li>
            <li>
                <img src="./images/footer_bottom2.png" alt="">
                <p>价格亲民</p>
              </li>
              <li>
                  <img src="./images/footer_bottom3.png" alt="">
                  <p>价格亲民</p>
                </li>
          </ul>
        </div>
        <div class="footer_bottom_bd center">
          <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>
          <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
  </footer>
   <!-- 底部区域 end-->
</body>
</html>