HTML5 aria- and role的作用詳解

在video-js的demo中看到了很多aria-*，不知道干嘛的。google一下，發(fā)現(xiàn)aria的意思是Accessible Rich Internet Application。 Accessible一般是為不方便的人士提供的功能，比如windows的放大鏡，語音朗讀，高對(duì)比度主題等。

　　google到了一個(gè)youtube的視頻，講解的很清楚，有代碼有示例。估計(jì)是Google Developer Day 2011的分享演講。真是個(gè)有責(zé)任感人性化的公司啊！

　　主要內(nèi)容是說明并演示了HTML5針對(duì)html tag增加的屬性：role 和 aria-*。

　　role的作用是描述一個(gè)非標(biāo)準(zhǔn)的tag的實(shí)際作用。比如用div做button，那么設(shè)置div 的 role=“button”，輔助工具就可以認(rèn)出這實(shí)際上是個(gè)button。

　　ARIA Roles

　　Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.

　　而aria-*的作用就是描述這個(gè)tag在可視化的情境中的具體信息。比如，

　　輔助工具就會(huì)知道，這個(gè)div實(shí)際上是個(gè)checkbox的角色，為選中狀態(tài)。

　　Add ARIA for screen readers

　　ARIA attributes provides semantic information to screen readers that is normally conveyed visually.

　　Note that using ARIA does not automatically implement the standard widget behavior, you'll still need to add focus management and keyboard navigation yourself.

覺目前地鐵上的地鐵線路圖也不是很人性化，很多交互方面沒有考慮到用戶的需求？感覺總是有各種容易看串的信息，利用 html5 canvas 完成的這個(gè)交互式地鐵線路圖 Demo，如果地鐵上的展示信息稍微有點(diǎn)交互會(huì)怎么樣？不用忙著上車下車，輕輕一點(diǎn)，就能省去很多時(shí)間。

前兩天在 echarts 上尋找靈感的時(shí)候，看到了很多有關(guān)地圖類似的例子，地圖定位等等，但是好像就是沒有地鐵線路圖，就自己花了一些時(shí)間搗鼓出來了這個(gè)交互式地鐵線路圖的 Demo，地鐵線路上的點(diǎn)是在網(wǎng)上隨便下載了一個(gè)，這篇文章記錄自己的一些收獲（畢竟我還是個(gè)菜鳥）以及代碼的實(shí)現(xiàn)，希望能夠幫到一些朋友。當(dāng)然，如果有什么意見的可以直接跟我說，大家一起交流才會(huì)進(jìn)步。

效果圖

http://www.hightopo.com/demo/subway/index.html

地圖稍微內(nèi)容有點(diǎn)多，要全部展示，字顯得有點(diǎn)小了，但是沒關(guān)系，可以按照需求放大縮小，字體和繪制的內(nèi)容并不會(huì)失真，畢竟都是用矢量繪制的~

界面生成

底層的 div 是通過 ht.graph.GraphView 組件生成的，然后就可以利用 HT for Web 提供好的方法，調(diào)用 canvas 畫筆隨便繪制就好，先來看看怎么生成底層 div：

addToDOM 函數(shù)聲明如下：

現(xiàn)在我就可以在這個(gè) div 上亂涂亂畫了~首先我獲取下載好的地鐵線路圖上的點(diǎn)，我將它們放在 subway.js 中，這個(gè) js 文件全部都是下載的內(nèi)容，我沒有做其他的改動(dòng)，主要是將這些點(diǎn)根據(jù)線路來分分配添加到數(shù)組中，比如：

接下來來描繪地鐵線路，我聲明了一個(gè)數(shù)組 lineNum，用來裝 js 中所有的地鐵線路的編號(hào)，以及一個(gè) color 數(shù)組，用來裝所有的地鐵線的顏色，這些顏色的 index 與 lineNum 中地鐵線編號(hào)的 index 是一一對(duì)應(yīng)的：

var lineNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14', '32', '18', '21', '22', '60', '68'];
var color = ['#f1cd44', '#0060a1', '#ed9b4f', '#ed9b4f', '#007e3a', '#cb0447', '#7a1a57', '#18472c', '#008193', '#83c39e', '#8a8c29', '#82352b', '#82352b', '#09a1e0', '#8a8c29', '#82352b', '#b6d300', '#09a1e0'];

接著遍歷 lineNum，將 lineNum 中的元素和顏色傳到 createLine 函數(shù)中，根據(jù)這兩個(gè)參數(shù)來繪制地鐵線路以及配色，畢竟 js 文件中的命名方式也是有規(guī)律的，哪一條線路，則命名后面一定會(huì)加上對(duì)應(yīng)的數(shù)字，所以我們只需要將字符串與這個(gè)編號(hào)結(jié)合即可獲得 js 中對(duì)應(yīng)的數(shù)組了：

createLine 的定義也非常簡單，我的代碼設(shè)置了不少的樣式，所以看起來有點(diǎn)多。創(chuàng)建一個(gè) ht.Polyline 管線，我們可以通過 polyline.addPoint() 函數(shù)向這個(gè)變量中添加具體的點(diǎn)，通過 setSegments 可以設(shè)置點(diǎn)的連接方式。

上面代碼中添加地鐵線上的點(diǎn)有分為幾種情況，是因?yàn)?js 中設(shè)置線的時(shí)候 Line68 有一個(gè)“跳躍”點(diǎn)的現(xiàn)象，所以我們必須“跳躍”過去，篇幅有限 Line68 數(shù)組具體的聲明自行看 subway.js。

這里說明一點(diǎn)，如果用的是 addPoint 函數(shù)，不設(shè)置 segments 時(shí)，默認(rèn)將添加進(jìn)的點(diǎn)用直線連接，segments 的定義如下：

1： moveTo，占用 1 個(gè)點(diǎn)信息，代表一個(gè)新路徑的起點(diǎn)
2： lineTo，占用 1 個(gè)點(diǎn)信息，代表從上次最后點(diǎn)連接到該點(diǎn)
3： quadraticCurveTo，占用 2 個(gè)點(diǎn)信息，第一個(gè)點(diǎn)作為曲線控制點(diǎn)，第二個(gè)點(diǎn)作為曲線結(jié)束點(diǎn)
4： bezierCurveTo，占用 3 個(gè)點(diǎn)信息，第一和第二個(gè)點(diǎn)作為曲線控制點(diǎn)，第三個(gè)點(diǎn)作為曲線結(jié)束點(diǎn)
5： closePath，不占用點(diǎn)信息，代表本次路徑繪制結(jié)束，并閉合到路徑的起始點(diǎn)

所以我們要做“跳躍”的行為設(shè)置 segments 為 1 即可。

最后繪制這些地鐵線上的點(diǎn)，這個(gè)部分 subway.js 中也分離出來了，命名以“mark_Point”、“t_Point”以及“n_Point”開頭，我在前面 js 的展示部分有對(duì)這些數(shù)組進(jìn)行解釋，大家動(dòng)動(dòng)中指劃上去看看。

我們?cè)谶@些點(diǎn)的位置添加 ht.Node 節(jié)點(diǎn)，當(dāng)節(jié)點(diǎn)一添加進(jìn) dm 數(shù)據(jù)容器中時(shí)，就會(huì)在拓?fù)鋱D上顯示，當(dāng)然，前提是這個(gè)拓?fù)鋱D組件 gv 設(shè)置的數(shù)據(jù)容器是這個(gè) dm。篇幅有限，添加地鐵線上的點(diǎn)的代碼部分我只展示添加“換乘站點(diǎn)”的點(diǎn)：

var tName = 't_Point' + num;
var tP = window[tName];//大站點(diǎn)
if(tP) {//有些線路沒有“換乘站點(diǎn)”
for(let i = 0; i < tP.length; i++) {
let node = createNode(tP[i].name, tP[i].value, color[index]);//在獲取的線路上的點(diǎn)的坐標(biāo)位置添加節(jié)點(diǎn)
node.s({//設(shè)置節(jié)點(diǎn)的樣式style
'label.scale': 0.05,//文本縮放，可以避免瀏覽器限制的最小字號(hào)問題
'label.font': 'bold 12px arial, sans-serif'//設(shè)置文本的font
});
node.setSize(0.6, 0.6);//設(shè)置節(jié)點(diǎn)大小。由于js中每個(gè)點(diǎn)之間的偏移量太小，所以我不得不把節(jié)點(diǎn)設(shè)置小一些
node.setImage('images/旋轉(zhuǎn)箭頭.json');//設(shè)置節(jié)點(diǎn)的圖片
node.a('alarmColor1', 'rgb(150, 150, 150)');//attr屬性，可以在這里面設(shè)置任何的東西，alarmColor1是在上面設(shè)置的image的json中綁定的屬性，具體參看 HT for Web 矢量手冊(cè)(http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_binding)
node.a('alarmColor2', 'rgb(150, 150, 150)');//同上
node.a('tpNode', true);//這個(gè)屬性設(shè)置只是為了用來區(qū)分“換乘站點(diǎn)”和“小站點(diǎn)”的，后面會(huì)用上
}
}

所有的地鐵線路以及站點(diǎn)都添加完畢。但是！你可能會(huì)看不見自己繪制的圖，因?yàn)樗麄兲×耍@個(gè)時(shí)候可以設(shè)置 graphView 拓?fù)浣M件上的 fitContent 函數(shù)，我們順便將拓?fù)鋱D上的所有東西不可移動(dòng)也設(shè)置一下：

這下你的地鐵線路圖就可以顯示啦~接下來看看交互。

交互

首先是鼠標(biāo)移動(dòng)事件，鼠標(biāo)滑過具體線路時(shí)，線路會(huì)變粗，懸停一會(huì)兒還能看到這條線路的編號(hào)；當(dāng)鼠標(biāo)移動(dòng)到“換乘站點(diǎn)”或“小站點(diǎn)”，站點(diǎn)對(duì)應(yīng)的圖標(biāo)都會(huì)變大并且變色，字體也會(huì)變大，鼠標(biāo)移開圖標(biāo)變回原來的顏色并且字體變小。不同點(diǎn)在于鼠標(biāo)移動(dòng)到“換乘站點(diǎn)”時(shí)，“換乘站點(diǎn)”會(huì)旋轉(zhuǎn)。

動(dòng)圖查看：http://images2017.cnblogs.com/blog/1159588/201802/1159588-20180209144029670-1869445696.gif

鼠標(biāo)滑動(dòng)事件，我直接基于 gv 的底層 div 進(jìn)行的 mousemove 事件，通過 ht 封裝的 getDataAt 函數(shù)傳入事件 event 參數(shù)，獲取事件下對(duì)應(yīng)的節(jié)點(diǎn)，然后就可以隨意操作節(jié)點(diǎn)了：

gv.getView().addEventListener('mousemove', function(e) {
var data = gv.getDataAt(e);//傳入邏輯坐標(biāo)點(diǎn)或者交互event事件參數(shù)，返回當(dāng)前點(diǎn)下的圖元
if(name) {
originNode(name);//不管什么時(shí)候都要讓節(jié)點(diǎn)保持原來的大小
}
if (data instanceof ht.Polyline) {//判斷事件節(jié)點(diǎn)的類型
dm.sm().ss(data);//選中“管道”
name = '';
clearInterval(interval);
}
else if (data instanceof ht.Node) {
if(data.getTag() !== name && data.a('tpNode')) {//若不是同一個(gè)節(jié)點(diǎn)，并且mousemove的事件對(duì)象為ht.Node類型，那么設(shè)置節(jié)點(diǎn)的旋轉(zhuǎn)
interval = setInterval(function() {
data.setRotation(data.getRotation() - Math.PI/16); //在自身旋轉(zhuǎn)的基礎(chǔ)上再旋轉(zhuǎn)
}, 100);
}
if(data.a('npNode')) {//如果鼠標(biāo)移到“小站點(diǎn)”也要停止動(dòng)畫
clearInterval(interval);
}
expandNode(data, name);////自定義的放大節(jié)點(diǎn)函數(shù)，比較容易，我不粘代碼了，可以去http://hightopo.com/ 查看
dm.sm().ss(data);//設(shè)置選中節(jié)點(diǎn)
name = data.getTag();//作為“上一個(gè)節(jié)點(diǎn)”的存儲(chǔ)變量，可以通過這個(gè)值來獲取節(jié)點(diǎn)
}
else {//其他任何情況則不選中任何內(nèi)容并且清除“換乘站點(diǎn)”上的動(dòng)畫
dm.sm().ss(null);
name = '';
clearInterval(interval);
}
});

鼠標(biāo)懸停在地鐵線路上時(shí)顯示“具體線路信息”，我是通過設(shè)置 tooltip 來完成的（注意：要打開 gv 的 tooltip 開關(guān)）：

然后我利用右下角的 form 表單，單擊表單上的具體線路，或者雙擊拓?fù)鋱D上任意一個(gè)“站點(diǎn)”或者線路，則拓?fù)鋱D會(huì)自適應(yīng)到對(duì)應(yīng)的部分，將被雙擊的部分展現(xiàn)到拓?fù)鋱D的中央。

動(dòng)圖查看：https://images2018.cnblogs.com/blog/1159588/201803/1159588-20180304211422285-588264011.gif

form 表單的聲明部分我好像還沒有解釋。。。就是通過 new 一個(gè) ht.widget.FomePane 類創(chuàng)建一個(gè) form 表單組件，通過 form.getView() 獲取表單組件的底層 div，將這個(gè) div 擺放在 body 右下角，然后通過 addRow 函數(shù)向 form 表單中添加一行的表單項(xiàng)，可以在這行中添加任意多個(gè)項(xiàng)，通過 addRow 函數(shù)的第二個(gè)參數(shù)（一個(gè)數(shù)組），對(duì)添加進(jìn)的表單項(xiàng)進(jìn)行寬度的設(shè)置，通過第三個(gè)參數(shù)設(shè)置這行的高度：

單擊“站點(diǎn)”顯示紅色標(biāo)注，雙擊節(jié)點(diǎn)自適應(yīng)放置到拓?fù)鋱D中央以及雙擊空白處將紅色標(biāo)注隱藏的內(nèi)容都是通過對(duì)拓?fù)浣M件 gv 的事件監(jiān)聽來控制的，非常清晰易懂，代碼如下：

var node = createRedLight();//創(chuàng)建一個(gè)新的節(jié)點(diǎn)，顯示為“紅燈”的樣式
gv.mi(function(e) {//ht 中拓?fù)浣M件中的事件監(jiān)聽
if(e.kind === 'clickData' && (e.data.a('tpNode') || e.data.a('npNode'))) {//e.kind獲取當(dāng)前事件類型，e.data獲取當(dāng)前事件下的節(jié)點(diǎn)
node.s('2d.visible', true);//設(shè)置node節(jié)點(diǎn)可見
node.setPosition(e.data.getPosition().x, e.data.getPosition().y);//設(shè)置node的坐標(biāo)為當(dāng)前事件下節(jié)點(diǎn)的位置
}
else if(e.kind === 'doubleClickData') {//雙擊節(jié)點(diǎn)
gv.fitData(e.data, false, 10);//將事件下的節(jié)點(diǎn)自適應(yīng)到拓?fù)鋱D的中央，參數(shù)1為自適應(yīng)的節(jié)點(diǎn)，參數(shù)2為是否動(dòng)畫，參數(shù)3為gv與邊框的padding
}
else if(e.kind === 'doubleClickBackground') {//雙擊空白處
node.s('2d.visible', false);//設(shè)置node節(jié)點(diǎn)不可見查看 HT for Web 樣式手冊(cè)（http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style）
}
});

注意 s（style）和 a（attr）定義是這樣的，s 是 ht 預(yù)定義的一些樣式屬性，而 a 是我們用戶來自定義的屬性，一般是通過調(diào)用字符串來調(diào)用結(jié)果的，這個(gè)字符串對(duì)應(yīng)的可以是常量也可以是函數(shù)，還是很靈活的。

最后還做了一個(gè)小小的部分，選中“站點(diǎn)”，則該“站點(diǎn)”的上方會(huì)顯示一個(gè)紅色的會(huì)“呼吸”的用來注明當(dāng)前選中的“站點(diǎn)”。

“呼吸”的部分是利用 ht 的 setAnimation 函數(shù)來完成的，在用這個(gè)函數(shù)之前要先打開數(shù)據(jù)容器的動(dòng)畫開關(guān)，然后設(shè)置動(dòng)畫：

全部代碼結(jié)束！

這個(gè) Demo 花了我兩天時(shí)間完成，總覺得有點(diǎn)不甘心啊，但是有時(shí)候思維又轉(zhuǎn)不過彎來，花費(fèi)了不少的時(shí)間，但是總的來說收獲還是很多的。

我以前一直以為只要通過 getPoints().push 來向多邊形中添加點(diǎn)就可以了，求助了大神之后，發(fā)現(xiàn)原來這個(gè)方法不僅繞彎路而且還會(huì)出現(xiàn)各種各樣的問題，比如 getPoints 之前，一定要在多邊形中已經(jīng)有 points 才可以，但是在很多情況下，初始化的 points 并不好設(shè)置，而且會(huì)造成代碼很繁瑣，直接通過 addPoint 方法，直接將點(diǎn)添加進(jìn)多邊形變量中，并且還會(huì)默認(rèn)將點(diǎn)通過直線的方式連接，也不用設(shè)置 segments，多可愛的一個(gè)函數(shù)。

還有就是因?yàn)?ht 默認(rèn)縮放大小是 20，而我這個(gè) Demo 的間距又很小，導(dǎo)致縮放到最大地鐵線路圖顯示也很小，所以我在 htconfig 中更改了 ht 的默認(rèn) zoomMax 屬性，記住，更改這個(gè)值一定要在所有的 ht 調(diào)用之前，因?yàn)樵?htconfig 中設(shè)置的值在后面定義都是不可更改的。

總而言之，這兩天我的腦細(xì)胞死了不少，也重新生長了不少，人都是在不斷進(jìn)步的嘛~

如果想要學(xué)習(xí)視頻，交流討論，請(qǐng)按照下圖所示輸入私信“申請(qǐng)加入”獲取加群鏈接~~~

多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454

廢話不多說，上代碼

css源碼：

/* -----樣式表-----

@charset "utf-8";

body{

background-color:#ddd;

overflow:hidden;

background-position: center center;

}

body *{font-family:"微軟雅黑";}

h1,h2,h3,h4{

margin:0; color:#000;

background-color:#eee;

}

a,a:link,button{cursor:pointer;}

hr{margin:2px;}

.aC1,.aC1:link{

margin:0 5px 0 5px;

font-size:16px;width:120px;height:26px;

display:inline-block;

border:1px solid #FFF;

border-bottom:2px solid #aaa;

text-align:center;vertical-align:middle;

}

.clr1{

background-color:#3CF !important;

color:#fff !important;

}

.clr2{

background-color:#3CF !important;

color:#000 !important;

}

.aC1:hover{

border:1px solid #000;

border-bottom:2px solid #fff;

color:#FFF;

}

.aC1:active{

background-color:#FF6;

color:#333;

}

.aC2,.aC2:link{

padding:8px;

display:inline-block;

border:2px solid #ccc;

text-align:center;vertical-align:middle;

}

.tmpFlo{

padding:0; margin:0;

position:absolute;

z-index:99;

}

/*游戲棋盤*/

.panelTb{

border:6px solid #ccc;

text-align:center;

vertical-align:middle;

border-collapse:collapse;

background-color:#000;

overflow:hidden;

cursor:pointer; /*!*/

}

.panelTb td{

text-align:center;

vertical-align:middle;

margin:0; padding:0;

/*border:1px solid #ddd;*/

}

.panelTb .uni, .tmpFlo .uni{

padding:0; margin:0;

position:relative;

display:block;

text-align:center;

vertical-align:middle;

cursor:pointer;

}

.panelTb .uni img, .tmpFlo .uni img{

width:100%;

height:100%;

}

.warn1{

display:none;position:absolute;

font-weight:900;

color:red;

text-align:center;

width:100%;height:100%;

left:0;top:0;

background-color:#fff;

z-index:900;

}

.warn2{

display:none;position:absolute;

color:#000;

text-align:center;

width:100%;

left:0;top:0;

background-color:#3CF;

font-weight:bold;

z-index:899;

}

/*調(diào)試欄*/

#debugPanel{ /* display:none;*/

background-color:#FFF;

position:absolute;

height:100%;

left:0; top:0;

color:#000;

z-index:999;

overflow:scroll;

}

/*棋子計(jì)分面板*/

#scorePanel{

position:absolute;

float:left;

font-size:12px;

color:#396;

}

#scorePanel .hiScore{

color:#FF0;

}

#scorePanel div{

white-space:nowrap;

}

#scorePanel .uni{

display:inline-block;

margin-right:5px;

cursor:pointer;

}

#scorePanel .uni img{

width:100%;

height:100%;

border:1px solid #666;

}

#scorePanel .uni img:hover{

border-color:#FFF;

}

/*棋子單獨(dú)計(jì)數(shù)欄*/

.scBar{

font-weight:bold;

}

/*復(fù)背景層2*/

#bgTmp1, #bgTmp2{

position:absolute;

margin:0; padding:0;

width:100%;height:100%;

left:0;top:0;

background-position:center center;

}#bgTmp2 img{

width:100%;

height:100%;

border:none;

}

#bgTmp1{

z-index:-99; /*!*/

}

#bgTmp2{

z-index:-98; /*!*/

}

/*播放動(dòng)畫的容器*/

.cartoonPanel{ display:none;

position:absolute;

margin:0; padding:0;

border:1px solid #ccc;

z-index:99; /*!*/

}.cartoonPanel img{

width:100%;

height:100%;

border:none;

}

/*游戲時(shí)間條*/

#gameTimeBar{

position:absolute;

border:2px solid #fff;

border-top:none;

background-color:#555;

}

#gameTimeBar #gameTime{

color:#000;

text-align:center;

vertical-align:bottom;

width:100%;

height:50%;

background-color:#CFC;

position:inherit;

bottom:0;

}

#uGirl1{

position:absolute;

bottom:0;

right:0;

width:497px;

height:400px;

background-position:right bottom;

z-index:-98; /*!*/

}#uGirl1 img{

width:100%; height:100%; border:none;

}

/*游戲結(jié)束后信息面板*/

#endPanel{ display:none;

position:absolute;

left:0; top:0;width:100%; height:100%;

text-align:center;

/*opacity:0.95;*/

background-color:#FFF;

color:#000;

z-index:200;

}

#endPanel #finSumScore{

color:#090;

font-weight:bold;

}

#endPanel p{

width:100%; padding:0; margin:0;

}

#endPanel #finUni{

position:absolute;

width:100%; padding:0; margin:0;

background-color:#6CF;

}

#endPanel .uni{

position:inherit;

width:20%;

}

#endPanel .uni img{

border:none;

width:100%; height:100%;

}

/*#fuckA{ display:none;

padding:2px 6px 3px 6px;

border:2px solid #333;

background-color:#F0C;

color:#000;

}#fuckA:hover{

background-color:#FFC;

}

#btnPnl{

position:fixed;

width:100%;

text-align:center;

bottom:10px;

z-index:800;

}

#endPanel #uGirl1{

z-index:798 !important;

}

#endPanel #aSpeech{

padding:5px;

position:absolute;

background-color:#eee;

color:#06C;

opacity:0.8;

}

更多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454

網(wǎng)頁源碼

<!DOCTYPE html PUBLIC "-//aaa-cg//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">

<head>

<title>jQuery網(wǎng)頁消除方塊小游戲源碼</title>

<!--<script src="_js/ui/jquery.ui.core.js"></script>

$(document).ready(function(){

//_dir = "x1a2";

//_extName = "png";

_bgExtName="png";

_UniTypeNumber =6;

/*$("#btnAgain")

.bind("click",function(){gameRest1Day();});*/

$("#btnReset")

.bind("click",function(){location.reload();});

$("#btnReset2")

.bind("click",function(){location.reload();});

gameStart();

});

</script>

</head>

<body>

</h3>

<p>

總分：<span id="finSumScore">0</span>

</p>

<p>

<br />

GAME OVER

</p>

</div>

</div>

</body>

</html>

在線咨詢

上一篇：HTML如何設(shè)置div背景圖片的的透明度
下一篇：網(wǎng)頁設(shè)計(jì)HTML零基礎(chǔ)入門

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5 aria- and role的作用詳解

css源碼：

更多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454

網(wǎng)頁源碼

您的項(xiàng)目需求