码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2016-07-13 16:53:34      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：

伴随着科技的发展，出现了各种型号的手机，导致了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元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。（引用网络资源）

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

标签：

原文地址：http://blog.csdn.net/yongbin668/article/details/51890501
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！