移动UI设计中的6种主要导航模...-HTML&CSS学习笔记-html学习----列表

当前位置: 编程技术>WEB前端

本页文章导读:

▪移动UI设计中的6种主要导航模式图1-1 主要导航模式 [+]查看原图2 图1-3 Trulia 和LinkedIn 的导航设计 [+]查看原图4 图1-5 PayPal 用户个性化的跳板式导航和Gowalla 应用的早期版本 [+]查看原图[6] 图1-7 Norton Mobile 的2×2 网&#.........

▪HTML&CSS学习笔记有段时间跟随学长们做过一个网站的项目，记得当时是帮张老师写些网页的代码；因为以前从没有接触过这方面的东西，很多代码也都是“依样画葫芦”地写，只是大概知道了网页的架.........

▪html学习----列表列别分为有序列表<ol>和无序列表<ul> 有序列表就是有可以进行顺序大小排列的，如1，2,3 a,b,c等无序列表就是不能区分它们的顺序的的排列，一般用小圆点在前面表示等不管有序还是.........

[1]移动UI设计中的6种主要导航模式

来源: 互联网发布时间: 2013-11-06

正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。一款应用的导航可以被设计成各种样式，但我想着重介绍６种主要的导航模式，也就是主菜单的导航模式（见图1-1）。

图1-1 主要导航模式

跳板式跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。Facebook 应用沿用了iOS 主界面上的跳板式设计，其他应用随之跟风（见图1-2 至图1-4）。

[+]查看原图1
图1-2 Facebook 的跳板式导航和Ovi Maps 应用

[+]查看原图2
图1-3 Trulia 和LinkedIn 的导航设计

[+]查看原图3
图1-4 Palm 手机上的NewsRoom 和Nokia 手机上的Yahoo ！

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板式导航的布局（见图1-5）

[+]查看原图4
图1-5 PayPal 用户个性化的跳板式导航和Gowalla 应用的早期版本

常见的布局形式是3×3、2×3、2×2 和1×2 的网格（见图1-6）。但跳板式导航不一定非要拘泥于网格布局，你可以成比例地放大某些选项，以彰显其重要性。在iPhone的应用Masters 中，VIDEO 选项就是其他菜单选项的2 ～ 3 倍大（见图1-7）

5
图1-6 跳板式导航的网格布局

[+]查看原图[6]
图1-7 Norton Mobile 的2×2 网格布局和Masters 的不规则布局

为同等重要的内容项使用网格布局，为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

列表菜单式列表菜单式导航与跳板式导航的共同点在于，每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式，包括个性化列表菜单（Personalized List Menu）、分组列表（Grouped List）和增强列表（Enhanced List）等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的（见图1-8 至图1-11）。

[+]查看原图 1
图1-8 列表菜单：Valspar Paint 和Kayak 应用

[2]HTML&CSS学习笔记

来源: 发布时间: 2013-11-06

有段时间跟随学长们做过一个网站的项目，记得当时是帮张老师写些网页的代码；因为以前从没有接触过这方面的东西，很多代码也都是“依样画葫芦”地写，只是大概知道了网页的架构和一些简单的设计方法，对于其中的一些细节却不是很了解。假期里时间很充裕，于是花了几天的时间把HTML和CSS的一些基础的知识给过了一遍——一方面弥补一下网页设计方面的不足，另一方面也算是为接下来JS的学习打些基础。

下面是自己在学习HTML和CSS过程中的一些总结：

1：HTML介绍

HTML指的是超文本标记语言（Hyper Text Markup Language）,它不是一种编程语言，而是一种标记语言——通过标签（Tag）来描述网页的。举一个简单的例子：

1 <html>
2 <head>
3 网页相关信息
4 </head>
5 <body>
6 <--! body之间的文本是可见的页面内容-->
7 <h1>Heading</h1>
8 <p>paragraph.</p>
9 </body>
10 </html>

像该例子中<html>这些由尖括号包围的关键字便是HTML的标签，通常标签具有以下几个特征：

由尖括号包围
通常是成对出现，如<html></html>（当然像img之类的是没有的）
标签对中第一个标签是开始标签，第二个便签是结束标签（/+关键字）

而通常一个网页的骨架便是如上面例子所述的那样：

<html> 与 </html> 之间的文本用来描述网页
<head>与</head>之间的文本用来描述网页的相关信息，比如网页名称、CSS文件等
<body> 与 </body> 之间的文本是可见的页面内容

我们日常使用的浏览器（browser）的作用便是读取HTML文档，通过标签、以网页的形式来显示页面内容。以Chrome浏览器为例，单击右键，选择“查看页面源代码”，便可以看到你浏览网页的HTML代码了，当然其中包括的内容有好多，但基本的骨架还是逃不出上面所描述的。

2：常见的HTML便签

关于这方面的内容可参考http://www.codecademy.com/glossary/html

3：CSS中关于position的认识

CSS定位的基本思想

定位（position）允许你定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至是整个浏览器窗口本身的位置。

一切皆为框——下面内容来自W3对此的解释：

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

1 <div>
2 some text
3 <p>Some more text.</p>
4 </div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

position属性：static

普通流，元素框正常生成，其位置由元素在HTML中的位置决定；作为文档流的一部分；

position属性：relative

元素框偏移某个距离(是相对于起点移动)。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

比如：

1 #box_relative {
2 position: relative;
3 left: 30px;
4 top: 20px;
5 }

如下图所示：

position属性：absolute

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块；绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

比如：

#box_absolute {
position: absolute;
left: 30px;
top: 20px;
}

如下图所示：

position属性：fixed

与absolute类似，只是它相对的是整个浏览器窗口的位置

4：CSS中关于float的认识

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图

[3]html学习----列表

来源: 发布时间: 2013-11-06

列别分为有序列表<ol>和无序列表<ul>

有序列表就是有可以进行顺序大小排列的，如1，2,3 a,b,c等

无序列表就是不能区分它们的顺序的的排列，一般用小圆点在前面表示等

不管有序还是无序，都会用到它们公用的列表项表示<li>

1.有序列表<ol>

例如：

<ol>

</ol>

2.无序列表<ul>

例如：

<ol>

</ol>

以上两个在浏览器中都会以各自的默认方式进行显示处理。

有序的用数值来表示

无序的用黑色实心圆点来表示

在有序<ol>中可以有<ol type>

其中type 用来表明这种有序是用什么来排序的（数字，小写字母，大写字母，大写阿拉伯数字）。

还可添加<ol start>

用来表明从第几个开始打头，其值只有数字。

本文链接