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

伴随着科技的发展，出现了各种型号的手机，导致了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&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支持程度

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元素处于同一行来解决该问题（如下图）。

亚马逊display inline-block间距处理

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布局支持程度

flex支持程度

效果分析

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注