整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
面介紹了《景區(qū)手繪地圖（電子地圖、智慧導(dǎo)覽系統(tǒng)）如何制作》以及《景區(qū)手繪地圖的繪制流程》，接下來(lái)介紹一些手繪地圖制作的關(guān)鍵點(diǎn)。
手繪地圖最關(guān)鍵的一點(diǎn)，就是把手繪地圖準(zhǔn)確的覆蓋到地圖平臺(tái)。
手繪地圖體驗(yàn)
?
<table>標(biāo)簽：
<table>指的是表格，用表格來(lái)搭建界面布局，即用表格的嵌套，來(lái)搭建界面布局。
<table>布局優(yōu)勢(shì)：
table優(yōu)勢(shì)：開(kāi)發(fā)時(shí)間短（使用DW開(kāi)發(fā)速度快）；純table各瀏覽器不會(huì)有兼容問(wèn)題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開(kāi)發(fā)；如果table里有div ul 等，可能會(huì)出現(xiàn)瀏覽器兼容問(wèn)題；加載速度慢；table嵌套的太多，運(yùn)維是非常困難的。
<div>塊級(jí)（block-level）標(biāo)簽：
DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。
<div>布局優(yōu)勢(shì)：
一.精簡(jiǎn)代碼，減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡(jiǎn)，css文件可以在網(wǎng)站的任意一個(gè)頁(yè)面進(jìn)行調(diào)用，而若是使用table表格修改部分頁(yè)面卻是顯得很麻煩。要是一個(gè)門戶網(wǎng)站的話，需手動(dòng)改很多頁(yè)面，而且看著那些表格也會(huì)感覺(jué)很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪問(wèn)速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較，精簡(jiǎn)了許多頁(yè)面代碼，那么其瀏覽訪問(wèn)速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好，因此其避免了Table嵌套層次過(guò)多而無(wú)法被搜索引擎抓取的問(wèn)題，而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè)，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無(wú)論什么瀏覽器，網(wǎng)頁(yè)都不會(huì)出現(xiàn)變形情況。
1.流動(dòng)式布局：是HTML網(wǎng)頁(yè)默認(rèn)的布局方式
特點(diǎn)：
1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級(jí)元素占整個(gè)文檔流，默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個(gè)文檔流。
常見(jiàn)的塊級(jí)（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見(jiàn)的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動(dòng)布局（float）
特點(diǎn)：
浮動(dòng)布局依靠【 浮動(dòng)屬性 float：left/right/... 】來(lái)使標(biāo)簽脫離文檔流，達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float：left ； 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display：inline/block/inline-block】來(lái)進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn)：
當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來(lái)做第二層塊界面的開(kāi)發(fā)時(shí)，就要用到我們所說(shuō)的定位布局。
通過(guò)運(yùn)用【定位屬性position:absolute/relative/fixed】 來(lái)進(jìn)行第二層界面的定位布局。
網(wǎng)頁(yè)是靜態(tài)的，網(wǎng)頁(yè)上的定位
position：absolute ；絕對(duì)定位脫離文檔流，不受浮動(dòng)影響，就是相對(duì)于窗體（body）邊界的margin定位。
position：relative； 相對(duì)定位不脫離文檔流，相對(duì)于父級(jí)標(biāo)簽元素的位置定位。
position:fixed；固定位置，不會(huì)受任何因素影響。
滾動(dòng)條移動(dòng)前
滾動(dòng)條移動(dòng)后
優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】
特點(diǎn)： 數(shù)值越大，越優(yōu)先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內(nèi)容來(lái)自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系修改。
文轉(zhuǎn)自測(cè)試人社區(qū)，原文鏈接：Python 測(cè)開(kāi)28期 - WL - 學(xué)習(xí)筆記 - Vue - 學(xué)習(xí)筆記 - 測(cè)試人社區(qū)
<!-- 文檔聲明 -->
<!DOCTYPE html>
<!-- 文檔主體 -->
<html lang="en">
<!-- 文檔配置 -->
<head>
<!-- 設(shè)置網(wǎng)頁(yè)編碼格式 -->
<meta charset="UTF-8" />
<!-- 設(shè)置網(wǎng)頁(yè)兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 設(shè)置網(wǎng)頁(yè)顯示區(qū)域 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 設(shè)置網(wǎng)頁(yè)標(biāo)題 -->
<title>測(cè)試集合</title>
<!-- 1. vue 引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- 正文內(nèi)容 -->
<body>
<!-- 2. 定義一個(gè)容器，給容器標(biāo)注 id，方便后邊操作 -->
<div id="app">
{{message}}
</div>
</body>
</html>
<!-- js腳本 -->
<script>
// 實(shí)例化 vue
var vm=new Vue({
// 需要傳入對(duì)象
el: "#app", // 指定掛載元素
data:{ // 掛載元素的值
message: "Hello laoda"
},
methods:{
},
});
</script>
<!-- CSS 樣式表 -->
<style></style>*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
