Flex布局练习题

flex闯关小游戏：https://flexboxfroggy.com/#zh-cn

闯过所有关卡

使用Flex进行页面布局：

　　要求：层级架构简单，越简单越好

题1：整体框架示例

 

 

 解：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EX06</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="g-index">
    <div class="g-hd">
      <div class="u-box"></div>
      <div class="u-box"></div>
      <div class="u-box"></div>
      <div class="u-box"></div>
      <div class="u-box z-right"></div>
    </div>
    <div class="g-bd">
      <div class="u-left">
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
      </div>
      <div class="u-right">
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
        <div class="u-box"></div>
      </div>
    </div> 
  </div>
</body>
</html>

index.css

.g-index {
  height: 560px;
  width: 760px;
  padding:20px 20px;
  background: #eee;
  border: 1px solid #333;
}

.g-hd {
  display: flex;
  height: 120px;
  width: 100%;
  background: red;
  border: 1px solid #333;
}

.u-box {
  background: #fff;
  border: 1px solid #333;
}

.g-hd .u-box{
  height: 80px;
  width: 80px;
  margin: 20px;
}

.g-hd .u-box.z-right {
  margin-left: auto;
  margin-right: 20px;
}

.g-bd {
  display: flex;
  justify-content: space-around;
  height: 370px;
  width: 720px;
  background: red;
  margin: 20px 0;
  border: 1px solid #333;
  padding: 20px 20px;
}

.g-bd .u-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  flex-wrap: wrap;
}

.g-bd .u-left .u-box{
  height: 50px;
  width: 50px;
}

.g-bd .u-left .u-box:first-child {
  height: 300px;
  width: 200px;
}

.g-bd .u-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 480px;
}

.g-bd .u-right .u-box {
  height: 40px;
  width: 480px;
}

题2：商品价格小图

 

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EX06</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="u-item">
    <div class="u-pic"></div>
    <div class="u-detail">
      <div class="u-title">
        标题文字
      </div>
      <div class="u-info">
        具体信息
      </div>
      <div class="u-price">
        <div class="u-now">
          ¥实际价格
        </div>
        <div class="u-previous">
          ¥原价xx.00
        </div>
        <div class="u-sales">
          xxx件已售
        </div>
      </div>
    </div> 
  </div>
</body>
</html>

index.css

.u-item {
  height: 370px;
  width: 390px;
  border: 1px solid #333;
}

.u-item .u-pic {
  height: 260px;
  width: 390px;
  background: #eee;
}

.u-item .u-detail {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #333;
  height: 100px;
}

.u-item .u-title, .u-item .u-info {
  border: 1px solid #333;
  background: #999;
  height: 18px;
  width: 360px;
  padding: 1px 0 1px 10px;
  font-size: 12px;
}

.u-item .u-info {
  color: red;
}

.u-item .u-price {
  display: flex;
  align-items: flex-end;
  border: 1px solid #333;
  padding: 0 0 3px 10px;
  background: #999;
  height: 27px;
  width: 360px;
}

.u-item .u-now {
  color: red;
  font-size: 18px;
  margin-right: 10px;
}

.u-item .u-previous, .u-item .u-sales{
  color: #fff;
  font-size: 12px;
}

.u-item .u-previous {
  text-decoration: line-through;
}

.u-item .u-sales {
  margin-left: auto;
  margin-right: 10px;
}

 

题3：淘宝网页版截图

 

 

在练习二的代码基础上进行修改就可以了

 

posted @ 2021-12-10 15:17  㭌（mou）七  阅读(724)  评论(0)    收藏  举报