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屬性定義圓的半徑

運行效果如下: