關(guān)于使用Position屬性對(duì)網(wǎng)頁(yè)布局的探討

鄧思思

摘要： 隨著互聯(lián)網(wǎng)的日益繁華，不同類(lèi)型的網(wǎng)站設(shè)計(jì)成為主流，極大影響了我們的事業(yè)和各行各業(yè)的發(fā)展。此外，互聯(lián)網(wǎng)也極大推動(dòng)我國(guó)各知名企業(yè)、中小企業(yè)和事業(yè)單位的辦公流程。隨著越來(lái)越多人應(yīng)用互聯(lián)網(wǎng)及互聯(lián)網(wǎng)的普及，互聯(lián)網(wǎng)網(wǎng)站設(shè)計(jì)布局必然成為重點(diǎn)內(nèi)容。本文首先論述了Position屬性的基本定義和其對(duì)應(yīng)的屬性值、然后演示Position屬性對(duì)網(wǎng)頁(yè)整體布局的應(yīng)用。該方法與技巧將對(duì)使用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)布局的初學(xué)者有重要意義和借鑒價(jià)值。

關(guān)鍵詞： position屬性;網(wǎng)頁(yè)設(shè)計(jì)布局;Dreamweaver

中圖分類(lèi)號(hào)： TP393.092?? ?文獻(xiàn)標(biāo)識(shí)碼： A?? ?文章編號(hào)： 1672-9129（2018）09-0007-01

Abstract： ?with the growing prosperity of the Internet， different types of website design have become the mainstream， greatly affecting our career and the development of all walks of life. In addition， the Internet also greatly promotes the office processes of well-known enterprises， small and medium-sized enterprises and public institutions in China. As more and more people use the Internet and the popularity of the Internet， the design layout of the Internet website is bound to become the key content. This paper first discusses the basic definition of Position attribute and its corresponding value， and then demonstrates the application of Position attribute to the overall layout of web pages. This method and technique will be of great significance and value to beginners using Dreamweaver to design web layouts.

Keywords： position attribute;Page layout;Dreamweaver

2018年中，中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布第42次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》，報(bào)告顯示，截至2018年6月，中國(guó)網(wǎng)民規(guī)模達(dá)8.02億，互聯(lián)網(wǎng)普及率達(dá)到57.7%。中國(guó)互聯(lián)網(wǎng)行業(yè)整體向規(guī)范化、價(jià)值化發(fā)展。

與此同時(shí)，截至2018年6月，我國(guó)網(wǎng)民規(guī)模達(dá)8.02億，互聯(lián)網(wǎng)普及率為57.7%;2018年上半年新增網(wǎng)民2968萬(wàn)人，較2017年末增長(zhǎng)3.8%;我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá)7.88億，網(wǎng)民通過(guò)手機(jī)接入互聯(lián)網(wǎng)的比例高達(dá)98.3%。截至2017年初，我國(guó)網(wǎng)民普及率達(dá)到53.2%，超過(guò)全球平均水平3.1個(gè)百分點(diǎn)，超過(guò)亞洲平均水平7.6個(gè)百分點(diǎn)。全年共計(jì)新增網(wǎng)民4299萬(wàn)人，增長(zhǎng)率為6.2%，中國(guó)網(wǎng)民規(guī)模已經(jīng)相當(dāng)于歐洲人口總量?；ヂ?lián)網(wǎng)如此巨大的發(fā)展，人們的焦點(diǎn)也就集中在怎么去將做網(wǎng)站做好上，因此，我們現(xiàn)在來(lái)探討一下建設(shè)網(wǎng)站中最基礎(chǔ)的網(wǎng)頁(yè)布局。

1 HTML語(yǔ)言中Position屬性的基本定義

HTML超文本標(biāo)記語(yǔ)言（英語(yǔ)：HyperText Markup Language，簡(jiǎn)稱(chēng)：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML語(yǔ)言中Position屬性是指本體相對(duì)與父級(jí)或上一級(jí)的定位。Position屬性所對(duì)應(yīng)的屬性值主要有如下4中：static、relative、absolute和fixed。Static一般為默認(rèn)值，意味著對(duì)象沒(méi)有被定位，出現(xiàn)在正常的文檔流中。relative意味對(duì)象被相對(duì)定位，出現(xiàn)在正常的文檔流中并沒(méi)有任何的效果顯示。absolute意味對(duì)象被絕對(duì)定位，不能出現(xiàn)在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進(jìn)行布局。fixed意味對(duì)象被固定，不能出現(xiàn)在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進(jìn)行固定。

2 Position屬性值在網(wǎng)頁(yè)布局中的應(yīng)用

使用position屬性制作出網(wǎng)頁(yè)布局的縮小版。具體示例如下：

2.1大盒子（div）的設(shè)置。首先，在Dreamweaver部分設(shè)置id名稱(chēng)為top的