css实现不规则图形-HTML5开发手机项目-个人总结-创建HTML5离线应用

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

本页文章导读:

▪css实现不规则图形闲着没事，逛了下googlepaly网站看着他们的tabs选项卡样式竟然用的不是图片，而是css实现的斜边，没事简单说了一下自己理解的其中的原理1，理解border的原理查看样式style部分border-bottom:24px so.........

▪HTML5开发手机项目-个人总结 -----------http://app.dianshijie.net/dzd-----------网页打开方式：<a href="#" target="_blank">链接</a>target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口.........

▪创建HTML5离线应用应用程序缓存或AppCache是HTML5的一个新特性，它提供了一个更聪明的方式来缓存Web应用程序，使其可脱机使用。AppCache是一种简单的机制，它允许开发人员可以指定哪些文件应该被缓.........

[1]css实现不规则图形

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

闲着没事，逛了下googlepaly网站看着他们的tabs选项卡样式竟然用的不是图片，而是css实现的斜边，没事简单说了一下自己理解的其中的原理

1，理解border的原理

查看样式

style部分

border-bottom:24px solid #F00;
border-right:24px solid transparent;
border-top:24px solid #F00;
border-left:24px solid transparent;

图片

以前以为border是个中规中矩的长方形，我们可以看出来其实border的图片并不是中规中矩的长方形.而是梯形的结构

如图：

利用这一原理就可以制作出斜方向的不规则图片如

实现css样式：

border-bottom:24px solid #F00;

border-right:24px solid transparent;（宽度存在但是为透明）

2，理解css结构，border设置宽度就意味着自身的高度要设置为0，才能保证他在同一行中。

如图未设置高度为0时

设置height:0时

大家也可以自己尝试一下，

借此也可以更好的理解css3.0中的伪类after，before来构造不规则的图片！避免使用了较大的图片。

本文链接

[2]HTML5开发手机项目-个人总结

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

-----------http://app.dianshijie.net/dzd-----------
网页打开方式：<a href="#" target="_blank">链接</a>
target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)
<head><base target="_blank" ></head>表示页面中的所有链接都在新窗口打开

<a href="" rel="external">madinc.co</a>//

autocomplete="off"//去掉输入框的历史记录

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
document.querySelector(

本文链接

[3]创建HTML5离线应用

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

应用程序缓存或AppCache是HTML5的一个新特性，它提供了一个更聪明的方式来缓存Web应用程序，使其可脱机使用。AppCache是一种简单的机制，它允许开发人员可以指定哪些文件应该被缓存的浏览器，并提供给离线用户。一旦资源被缓存，用户的浏览器中检索，而不是从本地计算机上的Web服务器。

浏览器下载从服务器的资源，只有当他们被更新。这种机制提高了速度更快的缓存文件加载。这也有助于减少服务器的负载，这些文件是从服务器上下载，只有当他们被更新。

2。从浏览器缓存中的差异：

所有主要的浏览器都提供某种形式的缓存机制，但AppCache的特点是不同的，从正常的浏览器缓存。浏览器的缓存通常只缓存那些已被以前访问过的网页和资源，而AppCache允许开发人员指定的页面和资源浏览器缓存。AppCache缓存的资源，即使那些从未访问过。

此外，浏览器缓存是不可靠的，因为它是不可读的，我们不能肯定的页面和资源，可脱机使用。

3。创建一个manifest文件

HTML5 AppCache使用的清单，（一个简单的文本文件），以确定哪些应用程序中的资源应该是被浏览器缓存。manifest文件应始终从与“缓存清单”。我们也可以在manifest文件中添加注释，注释行以＃开头。

例如：
CACHE MANIFEST

# version 1.0

# Files to cache

Manifest文件中包含以下三个头：

（一）CACHE：

在本节中列出的文件将明确缓存。在每一行应该有一个文件名。文件名是区分大小写的。这是默认项部分，如果没有定义的节头，浏览器将假定这一个CACHE节。

CACHE MANIFEST

CACHE:

index.html

fallback.html

css/style.css

images/1.png

images/2.png

images/3.png

images/4.png

（ii）网络：

网络中的一节中列出的文件需要连接到服务器，并且只在网上提供。

下面是一个例子网络部分：

#Network files

NETWORK:

network.html

网络部分还允许通配符*，这意味着不高速缓存的所有资源需要连接。

（三）FALLBACK：

回退段指定一个后备资源服务，如果用户试图访问一个未缓存的资源，在脱机状态下。本节有一个稍微不同的语法比前面的章节中，它在每行包含两个值，由空格分隔。第一个值指定的资源相匹配，第二个值指定送达匹配的资源。

例如：

FALLBACK:

dynamic.html fallback.html
在上面的例子中，如果用户试图访问一个文件dynamic.html，它应该服务的缓存文件fallback.html。我们也可以使用通配符/回退段。例如

FALLBACK:

/ fallback.html

这意味着，所有非高速缓存的页面将被重定向到fallback.html。