用户投稿
codepen 连结处：
flex 精神时光屋3.双栏选单设计
练习六张图，三张一行 用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;}
微信扫一扫打赏
支付宝扫一扫打赏
