页面布局（1）：淘宝首页

最新推荐文章于 2024-03-25 22:13:00 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-03-25 22:13:00 发布

阅读量3.7k

点赞数 8

分类专栏：案例测试文章标签：前端开发快速建站网页布局响应式设计实践案例

本文链接：https://blog.csdn.net/tuzi007a/article/details/116837224

版权

案例测试专栏收录该内容

12 篇文章 3 订阅

订阅专栏

大家好，我是梅巴哥er。

入职前端后，我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的。比如活动页面，活动详情页，活动某项交互等。

为了快速适应开发需求，在较短时间内完成手头工作，以便挤出更多时间来充实自己，我个人觉得，有必要强化一下单页面快速开发的能力。

在公司里的页面开发流程，一般是先从产品手上拿到需求和交互，随后（可能要好久好久）设计（UI）开始做出各种图和页面布局，交给前端。前端根据需求和UI界面来写代码。

也就是说，我们需要做的是，研究产品需求 -- 设计交互 -- 切图和整理 -- 页面布局 -- 实现交互（-- 调取接口 – 上beta测试 – 无bug – 上线，后面这些先不考虑）。那么，怎么能在最短的时间内（比如30分钟），完成这项基础工作呢？

我的想法是，加强练习！

作为一个小镇做题家，没有什么比做题来的更直接和有效。

于是，我打算以30分钟建站为基础，找各大网站页面做布局练习。争取做到，看到UI就能考虑到如何布局，在最短的时间内，完成任务需求。

先从淘宝首页开始。

我们先看下这个页面搭建的基本需求。

全屏的淘宝首页是这样的：

在这里插入图片描述

我们简单的把基本html结构分割一下：

在这里插入图片描述
大致情况就是这样了：

最上方一个横穿的nav条。条里有居中内容部分，被一盒居中盒子包裹
中间是商品展示版块。也是一个居中的盒子。上面部分是搜索框等，下面是一个圆角的盒子，专门用来展示商品。
下面是底部。用来声明版权等。

接着，我们再打开F12，看下页面缩小后，首页的布局是怎么样的？

在这里插入图片描述

我们可以看到的是，当我们持续缩小页面时，

首页两侧的空白部分会缩小，直至被压缩到为0
当页面小到一定程度时，首页内容不再缩小，而是被右侧遮盖。下方出现了滚动条。

这个布局方式，基本上是当前各种页面的主流用法。

于是，下一步，我们就可以根据UI，来准备搭建的材料，比如图片和尺寸。

然后，开始敲代码。

先看下搭建效果：

在这里插入图片描述
呐，搭建出来的结构，基本上就是这样了。

最后往里塞盒子和内容，就可以了。

代码流程就是，

先html，把需要的盒子写上。
再css调整盒子样式。
最后js实现交互。

附上搭建的代码，仅供练习和参考。

<!-- demo.html

*注； 所需图片可以直接在淘宝首页拿到，就不放这里了 -->
<!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>taobao index</title>
  <link rel="stylesheet" href="./demo.css" />
  <base target="_blank" />
</head>
<body>
  <!-- https://www.taobao.com/ -->
  <nav class="index-nav">
    <div class="nav-wrap">
      https://www.taobao.com/
    </div>
  </nav>
  <section class="index-section">
    <div id="wrap">
      <header class="wrap-header">
        <div class="wrap-header-wrap">
          <div class="wrap-header-icon">
            <a href="https://www.taobao.com/">
            <img src="./img/淘宝icon.png" alt="taobaowang"></a>
          </div>
          <div class="wrap-header-search"></div>
          <div class="wrap-header-redpachet"></div>
        </div>
      </header>
      <section class="wrap-content"></section>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-wrap"></div>
  </footer>
</body>
</html>

/*demo.css*/

* { /* 格式化 */
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

body {
  background: url('./img/淘宝body.png') repeat-y 0 36px;
  background-size: cover;
}

.index-nav { /*首页nav*/
  width: 100%;
  height: 35px;
  background-color: #f5f5f5;
}

.nav-wrap { /*首页nav居中盒子*/
  width: 1190px;
  height: 100%;
  margin: auto;
}

.index-section { /*首页主体内容部分*/
  width: 100%;
  height: auto;
}

#wrap { /*主体内容的居中盒子*/
  width: 1190px;
  height: auto;
  margin: auto;
}

.wrap-header {/*淘宝icon + 搜索框 + 红包扫码*/
  width: 100%;
  height: 152px;
}

.wrap-header-wrap {/*包裹*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 990px;
  height: 100%;
  margin: auto;
}

.wrap-header-icon {/*淘宝icon*/
  width: 143px;
  height: 58px;
  text-align: center;
}

.wrap-header-search {/*搜索框*/
  width: 627px;
  height: 65px;
  background-color: blueviolet;
  /* margin: auto; */
}

.wrap-header-redpachet {/*红包扫码*/
  /* float: right; */
  width: 76px;
  height: 90px;
  background-color: red;
}

.wrap-content {/*所有商品内容部分*/
  width: 100%;
  height: 200px; /* 这里auto就好 */
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 30px;
}

.footer {/*底部*/
  width: 100%;
  height: 320px;
  background-color: #fff;
}

.footer-wrap {/*底部包裹*/
  width: 1190px;
  height: 100%;
  margin: auto;
  background-color: gainsboro;
}