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

大家好，我是梅巴哥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;
}

以上。

页面布局（1）：淘宝首页相关推荐

微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
Android 动态格子布局（淘宝，京东等首页）
blockview 项目地址:edhlily/blockview 简介:Android 动态格子布局(淘宝,京东等首页) 更多:作者提 Bug 标签: Android 动态格子布局(淘宝,京东 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
淘宝首页的搜索规律高级搜索页搜索规律淘宝商家应对的优化策略
探索淘宝掌柜们最关心的问题:淘宝搜索排名有规律可循吗?淘宝的关键词是自然而然的排名呢?还是有规律可循呢?我想这个答案是肯定的,正所谓无规不成方圆,任何事情都有他的规律可循,就看你是怎么去发现了,今天我 ...
仿京东、淘宝首页，通过两层嵌套的RecyclerView实现tab的吸顶效果
为什么会有这篇文章之前写过一篇文章使用CoordinatorLayout过程中遇到的两个问题以及浅析CoordinatorLayout工作机制,这篇文章上主要讲了通过CoordinatorLayou ...
7.25 web前端-淘宝首页设计
hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了 ...

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

页面布局（1）：淘宝首页相关推荐

最新文章

热门文章