国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

關于使用Position屬性對網頁布局的探討

2018-10-20 04:43鄧思思
數碼設計 2018年9期

鄧思思

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

關鍵詞: position屬性;網頁設計布局;Dreamweaver

中圖分類號: TP393.092?? ?文獻標識碼: A?? ?文章編號: 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年中,中國互聯網絡信息中心(CNNIC)發(fā)布第42次《中國互聯網絡發(fā)展狀況統(tǒng)計報告》,報告顯示,截至2018年6月,中國網民規(guī)模達8.02億,互聯網普及率達到57.7%。中國互聯網行業(yè)整體向規(guī)范化、價值化發(fā)展。

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

1 HTML語言中Position屬性的基本定義

HTML超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網頁的標準標記語言。HTML語言中Position屬性是指本體相對與父級或上一級的定位。Position屬性所對應的屬性值主要有如下4中:static、relative、absolute和fixed。Static一般為默認值,意味著對象沒有被定位,出現在正常的文檔流中。relative意味對象被相對定位,出現在正常的文檔流中并沒有任何的效果顯示。absolute意味對象被絕對定位,不能出現在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進行布局。fixed意味對象被固定,不能出現在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進行固定。

2 Position屬性值在網頁布局中的應用

使用position屬性制作出網頁布局的縮小版。具體示例如下:

2.1大盒子(div)的設置。首先,在Dreamweaver部分設置id名稱為top的

。然后,在css樣式里面編輯id樣式background-color:#F00;width:400px;height:400px;

position:relative等屬性值。最終出現一個背景顏色為紅色,大小為400*400的尺寸盒子。

2.2頂部盒子(div)的設置。首先,在開始建立的id名為top的

里面增加一個設置id名稱為top1的
。然后,在css樣式里面編輯id樣式background-color:#99CC00;width:390px;height:50px;position:absolute;top:10px;left:5px等屬性值。最終出現一個背景顏色為深綠色,大小為390*50并距離大盒子上邊框10px,左右邊框為5px的盒子。

2.3左邊盒子(div)的設置。首先,在開始建立的id名為top1的

下方增加一個設置id名稱為top2的
。然后,在css樣式里面編輯id樣式bbackground-color:#FF0;width:190px;height:300px;position:absolute;top:70px;left:5px等屬性值。最終出現一個背景顏色為黃色,大小為190*300并距離頂部盒子下邊框10px,距離大盒子左邊框為5px的盒子。

2.4右邊盒子(div)的設置。首先,在開始建立的id名為top2的

下方增加一個設置id名稱為top3的
。然后,在css樣式里面編輯id樣式background-color:#FF0;width:190px;height:300px;position:absolute;top:70px;left:205px等屬性值。最終出現一個背景顏色也為黃色,大小為190*300并距離左盒子右邊框10px,距離大盒子右邊框為5px的盒子。

2.5底部盒子(div)的設置。首先,在開始建立的id名為top3的

下方增加一個設置id名稱為top4的
。然后,在css樣式里面編輯id樣式background-color:#6F0;width:390px;height:20px;position:absolute;left:5px;bottom:5px;color:#000等屬性值。最終出現一個背景顏色為淺綠色,大小為390*20并距離大盒子下邊框5px,左右邊框為5px的盒子。

建立所有的盒子的部分和

3 小結

通過position屬性值搭配使用可以對一個結構型簡單的網頁進行整體布局。當然,網頁內部元素包括文字、圖片和一些交互型特效的填充可以讓我們的網頁看起來更美化。

雖然構建網站中網頁布局有許多種方法,但是本文所述的此種方法十分適合于學習網站建設毫無基礎的初學者??偠灾?,在進行網站的建設和頁面布局時會出現很多意外狀況,這些都是我們在布局網頁時要處理的要點;在不斷的嘗試新方法的同時使自己處理問題的能力得到不段地提高。

參考文獻:

[1]《2018年中國互聯網絡發(fā)展狀況統(tǒng)計報告》,CNNIC,2018年6月.

[2]高艷秋.網站建設和網頁制作的方法[J]. 電子技術與軟件工程,2016:22.

[3]樂 蓓. 基于 DIV + CSS 技術的網頁設計優(yōu)化方法分析[J]. 科技展望,2016:15.

津市市| 木里| 自贡市| 惠来县| 西城区| 海丰县| 米泉市| 宜黄县| 邵阳市| 阳山县| 娱乐| 连云港市| 卫辉市| 横峰县| 连平县| 贞丰县| 隆昌县| 项城市| 万载县| 元氏县| 鲁甸县| 江永县| 屯留县| 上思县| 东平县| 安泽县| 广州市| 巴林右旗| 黄平县| 前郭尔| 武陟县| 清涧县| 克东县| 赤壁市| 静宁县| 喀喇沁旗| 威海市| 溧阳市| 曲麻莱县| 华亭县| 潢川县|