前端工程日记２8日 Flex 并排选单

练习六张图，三张一行用css的 flex-wrap: wrap;换行

<!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>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <div class="left">
            <img src="https://i.imgur.com/O1TpNpL.png" alt="logo">
            <ul class="menu">
                <li><a href="#"></a>回到首页</li>
                <li><a href="#"></a>关於我们</li>
                <li><a href="#"></a>热销产品</li>
                <li><a href="#"></a>购物车</li>
            </ul>
        </div>
        <div class="right">
            <h2>关於我们</h2>
            <p>Lorem ipsum dolor sit amet consectetur adip
                isicing elit. Minus vero architecto explicabo suscipit officiis
                 fugit qui perferendis. Amet repellat similique, ex deserunt saepe
                  dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias.</p>
          <p>lorem            dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias </p>
            <div class="rightbuttom">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
               
            </div>
        </div>
    </div>
    
</body>
</html>

.wrap{
    width: 1100px;
    height: 835px;
    display: flex;
  margin: 0 auto;
}
.left{
  background:#e7eeea;
}
ul menu{
  padding: 20px;
  line-height: 20px;
}
ul menu li{
 font-weight: 40px;
   line-height: 20px;
 font-size: 39;
 margin: 30px;
 padding: 20px;
  color:#37523d;
}
.menu li a:hover{
    background: #00ffe2;
    color: #0f503d;
  padding-top: 10px;
    padding-bottom: 10px;
}
.right{
  width: 610px;
  flex-wrap: 300px;
}
.rightbuttom{
    display: flex;
    flex-wrap: wrap;
  margin: 8px;
  justify-content:space-between;

}
h2{
 color:#37523d;
  padding-left: 87px;
  padding-top: 82px;
  padding-bottom: 34px;
}

<<: Day 3 (html,CSS)

>>: excel 函数求解