DIV+CSS進行網頁設計

2023-08-02 12:44:25

CSS（Cascading Style Sheets）層疊樣式表，就是通過編寫一定的代碼實作頁面布局，這種布局的好處就是便于維護，實作頁面内容與表現的分離，網頁打開的速度快，更加符合Web标準。

所謂的樣式，就是關于某個東西的内容(content)、填充(padding)、邊框(border)、邊界(margin)等，就能聯想到我們經常使用的中間镂空的水杯，中間裝水的部分就是content，内層和外層就是内邊距和外邊距，中間镂空部分就是border。

下面介紹一下關于CSS中的核心内容，同樣也是在頁面樣式設計中普遍應用的：

（一）盒子模型：

DIV+CSS進行網頁設計

包括外邊距、内邊距、邊框、内容。

（二）标準流：

元素在網頁中就像流水,排在前面的元素(标簽)内容前面出現,排在後面的元素(标簽)内容後面出現。

非标準流：某個元素标簽脫離了标準流的排列。

（三）浮動：設定float,分為左浮動和右浮動，即讓下面盒子靠在上面盒子流動的左邊緣或者右邊緣。當設定了浮動以後，盒子内容的排列就脫離了标準流，如果不想進行浮動，可以清除浮動clear:left,clear:right。

（四）定位：

相對定位：采用相對定位，偏移量為50的定位，也即相對于原來位置進行偏移。

position:relative;

top:50px;

絕對定位：采用絕對定位，偏移量為50的定位，也即以所在标簽的父标簽進行定位(如果外面沒有别的塊級元素的時候就以<body></body>為父标簽進行定位)

position:absolute;

top:50px;

在以後進行的Web項目開發過程都要使用DIV+CSS進行網頁布局，要熟悉這種布局方式首先要有一定的HTML語言基礎，現在通常采用Dreamweaver工具進行DIV+CSS的編寫。繼續學習、、、、

繼續閱讀