讓div在body中任意拖動(dòng)

TML代碼

<div id="idOuterDiv" class="CsOuterDiv">
 
</div>

CSS代碼

body {
 background-color:#232429;
}
.CsOuterDiv {
 width:256px;
 height:146px;
 background-color:white;
 position:absolute;
 top:50%;
 left:50%;
 transform:translateX(-50%) translateY(-50%);
 -moz-transform:translateX(-50%) translateY(-50%);
 -webkit-transform:translateX(-50%) translateY(-50%);
 -ms-transform:translateX(-50%) translateY(-50%);
 border-radius:5px;
 box-shadow:3px 3px 10px blue;
}

JS代碼

、精簡(jiǎn)的代碼，使用DIV+CSS布局，頁(yè)面代碼精簡(jiǎn)，這一點(diǎn)相信對(duì)XHTML有所了解的都知道。觀看更多的HTML教程內(nèi)容。代碼精簡(jiǎn)提高了百度蜘蛛的爬行效率以及高效性，能在最短的時(shí)間內(nèi)爬完整個(gè)頁(yè)面，同時(shí)這樣對(duì)收錄質(zhì)量有一定好處;

2、提高訪問(wèn)速度、增加用戶體驗(yàn)性

使得加載速度得到很大的提高，那么用戶點(diǎn)擊頁(yè)面的等待時(shí)間就越少，用戶體驗(yàn)性的增加相應(yīng)的帶來(lái)就是網(wǎng)站受到搜索引擎的喜歡，進(jìn)而提高網(wǎng)站排名。

3、div+css結(jié)構(gòu)清晰，很容易被搜索引擎搜索到，天生就是適合優(yōu)化seo，降低網(wǎng)頁(yè)大小，讓網(wǎng)頁(yè)體積變得更小。注意：div+css結(jié)構(gòu)清晰、精簡(jiǎn)，不意味著可以全部用div+css結(jié)構(gòu)，比如通篇HTML標(biāo)簽全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整個(gè)HTML是一萬(wàn)個(gè)毫不相干的內(nèi)容拼裝起來(lái)，或者通篇是<div><ul><li>結(jié)構(gòu)的，就如同這個(gè)頁(yè)面所有元素全是列表。事實(shí)上這兩種情況還相當(dāng)普遍，因?yàn)榍饬恕癉IV+CSS”的真實(shí)含義，也許根本就不應(yīng)該有這個(gè)說(shuō)法，因?yàn)橐粋€(gè)完整頁(yè)面幾乎不可能僅僅DIV+CSS就能完成。

一.精簡(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)變形情況。

最后，需要注意的是，蜘蛛不喜歡一個(gè)頁(yè)面有太多的css代碼，否則同樣會(huì)影響蜘蛛的爬行，影響搜索引擎的收錄，所以采用外部調(diào)用的方式調(diào)用CSS是非常不錯(cuò)的方法。而同時(shí)，若非必須太多花哨的網(wǎng)站，采用CSS布局，同樣可以到達(dá)所想要的效果。如網(wǎng)站導(dǎo)航中的文字顏色變化、下拉菜單等。

在線咨詢

上一篇：20 個(gè) CSS 高級(jí)技巧匯總
下一篇：新中國(guó)成立70年科技期刊發(fā)展歷程與展望

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

讓div在body中任意拖動(dòng)

您的項(xiàng)目需求