各大公司移动端页面 - 导航的实现

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

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav {
            /*声明展示类型以table来渲染显示*/
            display: table;
            width: 100%;
        }
        .nav a {
            /*声明展示类型以table的单元格来渲染显示*/
            display: table-cell;
            width: 25%;
            height: 100px;
            border-left: 1px solid #999;
            background-color: #fcf;
            line-height: 100px;
            font-size: 14px;
            text-align: center;
        }
        .nav a:first-child {
            /*第一个导航的border清除掉*/
            border-left: 0 none;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

display: table支持程度

效果分析

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav a {
            /*浮动*/
            float: left;
            width: 24%;
            height: 100px;
            background-color: skyblue;
            line-height: 100px;
            font-size: 14px;
            text-align: center;
        }
        .nav a:nth-child(even) {
            background-color: yellow;
        }
        .nav a:nth-child(1) {
            /*第一个设置左边距*/
            margin-left: 2%;
        }
        .nav a:nth-child(4) {
            /*第一个设置右边距*/
            margin-right: 2%;
        }
    </style>
</head>
<body>
    <div class="nav clearfix">
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

float支持程度

不需要解释,看的出来。

效果分析

利用浮动来实现。

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html {
            /*假设屏幕大小为320px*/
            font-size: 20px;
        }
        .nav a {
            /*展示类型以行块元素来渲染展示*/
            display: inline-block;
            width: 23%;
            height: 5rem;
            background-color: #fcf;
            line-height: 5rem;
            font-size: 12px;
            text-align: center;
        }
        .nav a:nth-child(odd) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

display: inline-block支持程度

效果分析

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav li {
            /*展示类型以行元素来渲染展示*/
            display: inline;
        }
        .nav a {
            /*展示类型以行块元素来渲染展示*/
            display: inline-block;
            width: 16.625%;
            height: 100px;
            margin-left: 2.8125%;
            line-height: 100px;
            color: #333;
            font-size: 12px;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="nav clearfix">
        <ul>
            <li><a href="" title="">HTML5</a></li>
            <li><a href="" title="">独行冰海</a></li>
            <li><a href="" title="">梦幻雪冰</a></li>
            <li><a href="" title="">学堂</a></li>
            <li><a href="" title="">宝宝</a></li>
        </ul>        
    </div>
</body>
</html>

display: inline-block支持程度

如上图

效果分析

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html {
            /*假设屏幕大小为320px*/
            font-size: 20px;
        }
        .nav a {
            display: inline-block;
            width: 4rem;
            height: 5rem;
            margin: 0;
            background-color: #fcf;
            line-height: 5rem;
            font-size: 14px;
            text-align: center;
        }
        .nav a:nth-child(odd) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

display: inline-block支持程度

如上图

效果分析

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav {
            padding: 0 4px;
        }
        .nav a {
            position: relative;
            /*浮动处理*/
            float: left;
            width: 25%;
            height: 100px;
            line-height: 100px;
            font-size: 14px;
            text-align: center;
        }
        /*利用伪元素实现边框效果*/
        .nav a:nth-child(1)::after,
        .nav a:nth-child(2)::after,
        .nav a:nth-child(3)::after {
            content: "\200B";
            position: absolute;
            right: -1px;
            top: 25px;
            display: block;
            width: 1px;
            height: 50px;
            background: #dadada;
        }
    </style>
</head>
<body>
    <div class="nav clearfix">
        <a href="" title="">HTML5</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">学堂</a>
    </div>
</body>
</html>

效果分析

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

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

导航栏效果

导航demo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - HTML5学堂</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav {
            /*将展示类型作为弹性伸缩盒显示*/
            /*2009.7 (display: box;)
            2011.3 (display: flexbox;)
            2011.11 (display: flexbox;)
            2012.3 (display: flexbox;)
            2012.6 (display: flex;)
            2012.9 (display: flex;)*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
        }
        .nav a:first-child {
            /*第一个左边框的border清除掉*/
            border-left: 0 none;
        }
        .nav a {
            display: block;
            height: 100px;
            border-left: 1px solid #999;
            background-color: #fcf;
            line-height: 100px;
            font-size: 14px;
            text-align: center;
            /*box-flex 没单位的值是作为一个比例,他们决定于伸缩容器中有多少个伸缩项目。可以决定伸缩项目在伸缩容器中的空间大小。如果每个都设置为1,每个伸缩项目在伸缩容器内都相等。*/
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">独行冰海</a>
        <a href="" title="">梦幻雪冰</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

Flexbox布局支持程度

效果分析

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

【图表大师二】 纯Excel图表制作高仿真决策仪表盘

一、什么是仪表盘 仪表盘(guage,speedometer,dial chart,dashboard),是模仿汽车速度表的一种图表,常用来反映预算完成...

1897
来自专栏Jerry的SAP技术分享

从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator

上一篇文章 从产品展示页面谈谈Hybris的特有概念和设计结构 我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义DTO(D...

2069
来自专栏代码GG之家

google 分屏 横屏模式 按home键界面错乱故障分析(三)

google 进入分屏后在横屏模式按home键界面错乱( 三) 你确定你了解分屏的整个流程? ? 故障解析系列文章列表: google 分屏 横屏模式 按hom...

1836
来自专栏更流畅、简洁的软件开发方式

我写项目的思路和“自然架构”

我写项目的思路     三层的思路是要把页面(UI、数据显示)、业务逻辑、数据处理(也叫持久化)分离开来处理,思路自然是好的,但是一到了实际应用中,好多人...

1899
来自专栏数据魔术师

运筹学教学|分支定界法解带时间窗的车辆路径规划问题(附代码及详细注释)

1848
来自专栏noteless

设计模式之装饰器模式 Decorator 包装模式 wrapper 优点 缺点 使用场景 以及简化方法

如果是在代码的世界里面,你怎么描述:  顾客 购买 手抓饼     这一行为呢?  

734
来自专栏微信公众号:Java团长

Java基础05 实施接口

在Java基础04 封装与接口中,private关键字封装了对象的内部成员。经过封装,产品隐藏了内部细节,只提供给用户接口(interface)。

532
来自专栏owent

POJ PKU Let's Go to the Movies 解题报告

题目链接:http://acm.pku.edu.cn/JudgeOnline/problem?id=3513

592
来自专栏令仔很忙

UML之用例图

  在UML实践中,用例图(Usecasediagrams)就是软件外部特性描述的视图,是以用户的角度、以一种可视化的方式来描述软件产品的需求,分析软件的功能和...

611
来自专栏木可大大

面向对象设计必须遵循的几条原则

我们应该采用何种方法去应对需求变化呢?首先,在方法论层面我们应该采用敏捷开发;其次,在代码层面,使用OOD(Object-Oriented Design,面向对...

784

扫描关注云+社区