页面布局(1):淘宝首页

大家好,我是梅巴哥er

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

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

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

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

我的想法是,加强练习!

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

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

先从淘宝首页开始。

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

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

《页面布局(1):淘宝首页》

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

《页面布局(1):淘宝首页》
大致情况就是这样了:

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

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

《页面布局(1):淘宝首页》

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

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

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

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

然后,开始敲代码。

先看下搭建效果:

《页面布局(1):淘宝首页》
呐,搭建出来的结构,基本上就是这样了。

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

代码流程就是,

  • 先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;
}


以上。

    原文作者:新生代农民工官方认证码农小拽
    原文地址: https://blog.csdn.net/tuzi007a/article/details/116837224
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞