各大著名公司移动端页面 - 导航的实现【学习点干货】

伴随着科技的发展，出现了各种型号的手机，导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏

给大家分享之前，先说几句话。本文章主要给大家分享不同公司对移动端的实现采用了不同的方法。每一种方法各有各的好处，我们不能说哪一种方法好，哪一种方法不好。另外，这边主要分享基本原理，没有跟各大公司移动端页面的样式一摸一样，所以仅供大家参考学习，有什么不对的欢迎大家学习交流。

1、小米——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. .nav {
  10. /*声明展示类型以table来渲染显示*/
  11. display: table;
  12. width: 100%;
  13. }
  14. .nav a {
  15. /*声明展示类型以table的单元格来渲染显示*/
  16. display: table-cell;
  17. width: 25%;
  18. height: 100px;
  19. border-left: 1px solid #999;
  20. background-color: #fcf;
  21. line-height: 100px;
  22. font-size: 14px;
  23. text-align: center;
  24. }
  25. .nav a:first-child {
  26. /*第一个导航的border清除掉*/
  27. border-left: 0 none;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="nav">
  33. <a href="" title="">HTML5学堂</a>
  34. <a href="" title="">独行冰海</a>
  35. <a href="" title="">梦幻雪冰</a>
  36. <a href="" title="">HTML5学堂</a>
  37. </div>
  38. </body>
  39. </html>

display: table支持程度

效果分析

首先这么来实现，省了用浮动，大家都清楚，浮动会带来一系列的问题，用display: table&display: table-cell代替了浮动；另外，有没有发现a标签设置了左边框1px，如果是浮动的话，还需要考虑盒模型，不然浮动不上去（不会处于同一行，如下图），表格的话很方便，设置边框的话，它的宽度自己适应，表格在这方面比较好。

欢迎沟通交流~HTML5学堂

2、百度——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. .nav a {
  10. /*浮动*/
  11. float: left;
  12. width: 24%;
  13. height: 100px;
  14. background-color: skyblue;
  15. line-height: 100px;
  16. font-size: 14px;
  17. text-align: center;
  18. }
  19. .nav a:nth-child(even) {
  20. background-color: yellow;
  21. }
  22. .nav a:nth-child(1) {
  23. /*第一个设置左边距*/
  24. margin-left: 2%;
  25. }
  26. .nav a:nth-child(4) {
  27. /*第一个设置右边距*/
  28. margin-right: 2%;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="nav clearfix">
  34. <a href="" title="">HTML5学堂</a>
  35. <a href="" title="">独行冰海</a>
  36. <a href="" title="">梦幻雪冰</a>
  37. <a href="" title="">HTML5学堂</a>
  38. </div>
  39. </body>
  40. </html>

float支持程度

不需要解释，看的出来。

效果分析

利用浮动来实现。

欢迎沟通交流~HTML5学堂

3、当当网——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. html {
  10. /*假设屏幕大小为320px*/
  11. font-size: 20px;
  12. }
  13. .nav a {
  14. /*展示类型以行块元素来渲染展示*/
  15. display: inline-block;
  16. width: 23%;
  17. height: 5rem;
  18. background-color: #fcf;
  19. line-height: 5rem;
  20. font-size: 12px;
  21. text-align: center;
  22. }
  23. .nav a:nth-child(odd) {
  24. background-color: skyblue;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="nav">
  30. <a href="" title="">HTML5学堂</a>
  31. <a href="" title="">独行冰海</a>
  32. <a href="" title="">梦幻雪冰</a>
  33. <a href="" title="">HTML5学堂</a>
  34. </div>
  35. </body>
  36. </html>

display: inline-block支持程度

效果分析

虽然用display：inline-block能让元素处于同一行，但是display：inline-block会产生间隙，原因是HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是受font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。（间隙的问题当当网是没有处理掉）

4、亚马逊——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. .nav li {
  10. /*展示类型以行元素来渲染展示*/
  11. display: inline;
  12. }
  13. .nav a {
  14. /*展示类型以行块元素来渲染展示*/
  15. display: inline-block;
  16. width: 16.625%;
  17. height: 100px;
  18. margin-left: 2.8125%;
  19. line-height: 100px;
  20. color: #333;
  21. font-size: 12px;
  22. text-align: center;
  23. background-color: skyblue;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="nav clearfix">
  29. <ul>
  30. <li><a href="" title="">HTML5</a></li>
  31. <li><a href="" title="">独行冰海</a></li>
  32. <li><a href="" title="">梦幻雪冰</a></li>
  33. <li><a href="" title="">学堂</a></li>
  34. <li><a href="" title="">宝宝</a></li>
  35. </ul>
  36. </div>
  37. </body>
  38. </html>

display: inline-block支持程度

如上图

效果分析

display：inline是行元素的特性，能让元素处于同一行。不好的是display：inline也会产生间隙问题（原理同上），通过让HTML元素处于同一行来解决该问题（如下图）。

5、淘宝——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. html {
  10. /*假设屏幕大小为320px*/
  11. font-size: 20px;
  12. }
  13. .nav a {
  14. display: inline-block;
  15. width: 4rem;
  16. height: 5rem;
  17. margin: 0;
  18. background-color: #fcf;
  19. line-height: 5rem;
  20. font-size: 14px;
  21. text-align: center;
  22. }
  23. .nav a:nth-child(odd) {
  24. background-color: skyblue;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="nav">
  30. <a href="" title="">HTML5学堂</a>
  31. <a href="" title="">独行冰海</a>
  32. <a href="" title="">梦幻雪冰</a>
  33. <a href="" title="">HTML5学堂</a>
  34. </div>
  35. </body>
  36. </html>

display: inline-block支持程度

如上图

效果分析

淘宝中也是用display：inline-block能让元素处于同一行，间隙的解决方法通过HTML文件的压缩来实现。

6、京东——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. .nav {
  10. padding: 0 4px;
  11. }
  12. .nav a {
  13. position: relative;
  14. /*浮动处理*/
  15. float: left;
  16. width: 25%;
  17. height: 100px;
  18. line-height: 100px;
  19. font-size: 14px;
  20. text-align: center;
  21. }
  22. /*利用伪元素实现边框效果*/
  23. .nav a:nth-child(1)::after,
  24. .nav a:nth-child(2)::after,
  25. .nav a:nth-child(3)::after {
  26. content: "\200B";
  27. position: absolute;
  28. right: -1px;
  29. top: 25px;
  30. display: block;
  31. width: 1px;
  32. height: 50px;
  33. background: #dadada;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="nav clearfix">
  39. <a href="" title="">HTML5</a>
  40. <a href="" title="">独行冰海</a>
  41. <a href="" title="">梦幻雪冰</a>
  42. <a href="" title="">学堂</a>
  43. </div>
  44. </body>
  45. </html>

效果分析

浮动的兼容我就不一一说了，伪元素在手机端支持程度没有多大问题，在PC端下就比较麻烦了。

7、天猫——移动端实现方式

导航栏效果

导航demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5Course - HTML5学堂</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <link rel="stylesheet" href="css/reset.css">
  8. <style>
  9. .nav {
  10. /*将展示类型作为弹性伸缩盒显示*/
  11. /*2009.7 (display: box;)
  12. 2011.3 (display: flexbox;)
  13. 2011.11 (display: flexbox;)
  14. 2012.3 (display: flexbox;)
  15. 2012.6 (display: flex;)
  16. 2012.9 (display: flex;)*/
  17. display: -webkit-box;
  18. display: -webkit-flex;
  19. display: -ms-flexbox;
  20. display: flex;
  21. width: 100%;
  22. }
  23. .nav a:first-child {
  24. /*第一个左边框的border清除掉*/
  25. border-left: 0 none;
  26. }
  27. .nav a {
  28. display: block;
  29. height: 100px;
  30. border-left: 1px solid #999;
  31. background-color: #fcf;
  32. line-height: 100px;
  33. font-size: 14px;
  34. text-align: center;
  35. /*box-flex 没单位的值是作为一个比例，他们决定于伸缩容器中有多少个伸缩项目。可以决定伸缩项目在伸缩容器中的空间大小。如果每个都设置为1，每个伸缩项目在伸缩容器内都相等。*/
  36. -webkit-box-flex: 1;
  37. -webkit-flex: 1;
  38. -ms-flex: 1;
  39. flex: 1;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="nav">
  45. <a href="" title="">HTML5学堂</a>
  46. <a href="" title="">独行冰海</a>
  47. <a href="" title="">梦幻雪冰</a>
  48. <a href="" title="">HTML5学堂</a>
  49. </div>
  50. </body>
  51. </html>

Flexbox布局支持程度

效果分析

Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。（引用网络资源）

时间： 2024-11-05 19:04:40

各大著名公司移动端页面 - 导航的实现【学习点干货】的相关文章

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

移动端页面侧边导航滑入效果

效果体验:http://hovertree.com/texiao/mobile/2.htm 可以使用移动设备浏览器查看效果.效果使用到jquery-2.1.4.min.js,该版本的jQuery库是用于支持HTML5的浏览器上,不再兼容IE8以前的浏览器,现在移动端浏览器一般都支持HTML5,所以使用该jQuery没问题. HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"

原型导航应用于大转盘抽奖客户端显示页面实例

<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>大转盘客户端</title> <meta name="keyw

大数据公司挖掘数据价值的49个典型案例！信息量很大

大数据公司挖掘数据价值的49个典型案例 对于企业来说,100条理论确实不如一个成功的标杆有实践意义,本文的主旨就是寻找"正在做"大数据的49个样本. 力图从企业运营和管理的角度,梳理出发掘大数据价值的一般规律:一是以数据驱动的决策,主要通过提高预测概率,来提高决策成功率;二是以数据驱动的流程,主要是形成营销闭环战略,提高销售漏斗的转化率;三是以数据驱动的产品,在产品设计阶段,强调个性化;在产品运营阶段,则强调迭代式创新. 上篇 天然大数据公司的各种套餐 从谷歌.亚马逊.Facebook

大数据公司挖掘数据价值的49个典型案例

对于企业来说,100条理论确实不如一个成功的标杆有实践意义,本文的主旨就是寻找“正在做”大数据的49个样本.力图从企业运营和管理的角度,梳理出发掘大数据价值的一般规律: 一是以数据驱动的决策,主要通过提高预测概率,来提高决策成功率;二是以数据驱动的流程,主要是形成营销闭环战略,提高销售漏斗的转化率;三是以数据驱动的产品,在产品设计阶段,强调个性化;在产品运营阶段,则强调迭代式创新. 上篇 天然大数据公司的各种套餐 从谷歌.亚马逊.Facebook.LinkedIn,到阿里.百度.腾讯,都因其拥有

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

关于移动端页面的适配

移动端页面: 适配,适应各个不同的设备,如果是纯粹的移动端页面的话不用去考虑ipad,PC. 浏览器,微信(朋友圈),QQ(内置浏览器),UC 小米,华为会有部分兼容问题. 响应式: 必须共享一套html结构,样式不同而已,通过设备的分辨率来自动去切换样式 只适用于简单页面:博客,新闻,简单的公司门户: viewport 一般默认手机网页采用980px的宽,不设viewport就默认980: <meta name="viewport" content="width=de

消费大数据公司“重分析-强应用”引领企业大数据营销

近日,消费大数据公司信柏科技树立"大数据-重分析-强应用"理念发布新一代大数据业务平台,以大数据为基础.软硬件结合的方案来辅助企业进行经营决策与精准营销.该大数据业务平台定位于"人群 ."内容"."行业 "与"地域"精准分析与挖掘,覆盖到企业营销中较为关注的用户特征画像.精准人群标定.定向数据采集内容监听 .采集内容的关联分析.行业报告与市场动态.竞品分析.新店开张选址报告.指定地区常驻人群特征分析等业务,致力于成为

移动前端系列——移动端页面坑与排坑技巧

移动前端系列——移动端页面坑与排坑技巧 In 网页重构 on 2014-12-08 20:21:19 by lyushine 对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧. 移动端页面在不同设备.不同操作系统 .不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了.下面先介绍一下4类具体常见的坑: 1.外观 A.页面高度渲染错误 在各移动端浏览器中经