各大公司移动端页面 - 导航的实现
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元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。(引用网络资源)
- Golang语言社区--理解 go interface 的 5 个关键点
- 得到一个物种所有基因的TSS(转录起始位点)区域的bed文件。
- 如何选择聚类模块数目
- 谁能告诉我,这数据测毁了么?
- 计算资源及编程-仅针对生信人员
- 从WGS测序得到的VCF文件里面提取位于外显子区域的【直播】我的基因组84
- 基因组重测序的unmapped reads assembly探究 【直播】我的基因组86
- Centos 下非 Root 安装 Microsoft R Open
- 下载TCGA所有癌症的maf文件做signature分析
- 比对NR库看看物种分布【直播】我的基因组88
- 探究某个基因的外显子覆盖度情况【直播】我的基因组87
- PHP底层的运行机制与原理
- CHROME开发者工具的小技巧
- 48条高效率的PHP优化写法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- input的类型大全
- 树形结构--二叉树以及二叉树的遍历(十七)
- TEA算法解析
- localStorage sessionStorage
- 伪类
- js拖拽
- 灵魂拷问:你真的理解System.out.println()打印原理吗?
- 移动端video的项目
- 移动端(video) transformOringe addEventListener
- clip-path
- 移动端的box-shadow
- 杭电的题,输出格式卡的很严。HDU 1716 排列2
- 移动端的(-webkit-linear-gradient -webkit-radial-gradient)
- ACM一年记,总结报告(希望自己可以走得很远)
- 移动端顺序问题上