练习 | FLEX布局基本练习

最新推荐文章于 2024-04-16 22:34:40 发布

虎鲸一号

最新推荐文章于 2024-04-16 22:34:40 发布

阅读量3k

点赞数 6

分类专栏： CSS 学习记录 Web

本文链接：https://blog.csdn.net/qq_44537414/article/details/104239230

版权

学习记录同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

Web

12 篇文章 0 订阅

订阅专栏

文章目录

题1：整体框架示例

使用Flex模型编写HTML页面
在这里插入图片描述
解

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：商品价格小图

使用Flex模型编写HTML页面
在这里插入图片描述
解

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：淘宝网页版截图

根据步骤2的页面，实现下图的页面布局
在这里插入图片描述
解

代码在题二基础上修改

<!-- html代码 -->
<div class="m-detail">
   <div class="u-item">
     ....
   </div>
   <div class="u-item">
     ....
   </div>
   ....
</div>


<!-- css代码 -->
.m-detail {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #999;
  height: 780px;
  width: 1220px;
}
.....

虎鲸一号

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
练习 | FLEX布局基本练习

文章目录题1：整体框架示例题2：商品价格小图题3：淘宝网页版截图题1：整体框架示例使用Flex模型编写HTML页面解index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>EX06</title> &...
复制链接

扫一扫