DIV + CSS佈局的一些知識彙總

 以下是polaris在工作中零碎記錄下來的知識,在此彙總一下。

1、開發之前,應設計好頁面佈局

2、插入多張圖片時,如果想要圖片並排,注意之間不能換行,換行會被當成空格。且一般與它的父元素也別換行。

3、float:left是對當前元素而言的

4、當需要位移一點點時,可以使用相對定位:position:relative;left:10px;top:7px;等

5、一般,網頁分爲:頭部、導航和內容,有時還有腳部。

設計時,可以有兩種方法:

5.1、對於靜態網頁(html),可以使用div來分成幾部分。如下:

而對於content,可能還得分爲左右。如:

5.2、對於動態網頁(如jsp),可以把這些頁面分開,然後導入需要的部分。每個頁面可能就只包含自己的content。

6、對於CSS的設計,可以根據上面第一種情況來實施。

6.1 將CSS文件分門別類:
base.css,header.css,nav.css,footer.css
其中,base.css包含頁面中通用的css設置
然後,新建一個main.css文件,把上面的css文件放入其中
@import url("base.css");
@import url("header.css");
@import url("nav.css");
@import url("footer.css");

6.2 編寫CSS時,可以按如下順序執行:
(1)先編寫全局樣式(base.css)
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始終顯示滾動條*/

(2)然後是可大範圍內重用的樣式

大多數頁面都會用到頭部樣式、導航樣式和尾部樣式。因此,header.css、nav.css和footer.css是可以重用的樣式
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
margin:10px auto使其能夠居中。

(3)最後編寫細節方面的樣式
這裏主要是爲每個頁面單獨編寫屬於自己的樣式。

以上是一些零碎的知識,希望對Web開發人員有所幫助,不好之處還請指正。

進一步閱讀:點擊此處閱讀《CSS選擇器、優先級與匹配原理》

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章