SS 有三种基本的定位机制：普通流、浮动和绝对定位。

在CSS中一共有N种定位方式，其中，static ,relative,absolute三种方式是最基本最常用的三种定位方式。position取值:

static 默认定位方式

relative 相对定位。相对于原来的位置，但是原来的位置仍然保留。理解为棋盘上棋子的排列：

棋子从左往右排列，达到边缘时移到下一行。棋子排列方式是由display决定。样式属性display的值为block的元素自动放在下一行(默认)，而为inline的元素自动放在同一行，位于前一个元素后面。对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置

absolute 绝对定位

html5 地理定位

html5 Geolocation API用于获得用户的地理位置

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的

注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确

Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置

下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:

var x=document.getElementById("demo");

function getLocation(){

if(navigator.geolocation){

navigator.geolocation.getCurrentLocation(showPositon);}

else{

x.innerHTML="该浏览器不支持获取地理位置."}

}

function showPosition(position){

x.innerHTML="纬度:"+position.coords.latitude+

"<br>经度:"+position.coords.longitude;}

实例解析:

●检测是否支持地理定位

●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息

●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

●showPosition()函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本,不含错误处理

你需要先熟悉JavaScript才能理解和使用API

如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:

●coords.latitude:十进制数的纬度

●coords.longtitude:十进制的经度

●coords.accuracy:位置精度

●coords.altitude:海拔,海平面以上以米计

●coords.altitudeAccuracy:位置的海拔精度

●coords.heading:方向,从正北开始以度计

●coords.speed:速度,以米/每秒计

●timestamp:响应的日期/时间

二 html5 拖放

拖放(Drag和drop)是html5标准的组成部分

拖放是一种常见的特性,即抓取对象以后拖到另一个位置

在html5中,拖放是标准的一部分,任何元素都能够拖放

★设置元素为可拖放

首先,为了使元素可拖动,需要把draggable属性设置为true:

<img draggable="true">

★拖动什么-ondragstart和setData()

然后,规定当元素拖动时,会发生什么

dataTransfer.setData()方法,设置被拖数据的数据类型和值:

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);}

在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")

★放到何处-ondragover

ondragover时间规定在何处放置被拖动的数据

默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止元素的默认处理方式.

这要通过调用ondragover时间的event.preventDefault()方法:

event.preventDefault()

★进行放置-ondrop

当放置被拖数据时,会发生drop事件

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));}

三 html5 SVG

什么是SVG?

●SVG指可伸缩矢量图形(Scalable Vector Graphics)

●SVG用于定义用于网络的基于矢量的图形

●SVG使用XML格式定义图形

●SVG图像在放大或改变尺寸的情况下其图形质量不会损失

●SVG是万维联盟的标准

在html5中,你能够直接将SVG元素嵌入html页面中

要使用SVG绘制图形,你首先需要创建一个<svg>标签

<svg width="1000" height="1000"></svg>

要创建一个圆形,需要添加一个<circle>标签

下面是SVG代码:

<svg width="1000" height="1000">

<circle cx="100" cy="50" r="40" fill="red" />

</svg>

●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)

●r属性定义圆的半径

运行效果如下: