HTML+CSS學習筆記（六）

一、CSS定位

1.相對定位：就是當前元素相對於前一元素的位置，前後元素互不重疊。  

2.絕對位置：必須指定元素的確切位置，預設的是以螢幕左上方為初始點。

        定位類型屬性為position,兩個取值relative和absolute,分別代表相對定位和絕對位置。指定好定位類型後，使用下列屬性提供具體的位置；

      left、right、top、bottom

3.堆疊順序：就是控制元素在網頁上的堆疊順序，也就是元素相垂直於螢幕向外的位置。

     這個使用z-index值來控制，取值範圍為非負整數，0為最小值，值大的在上面一層。

定位示範

二、邊距

1.外邊距：margin，在原有的元素地區外增加大小

2.向內填充：padding，在原有的元素地區內增加大小，但是元素內的可用性區域域沒有變，即添加文本的地區沒有變；

  一個值表示四周的值；兩個值分別表示上下邊值；四個值分別表示上下左右的值；當然也可以設定指定方位的值:margin-left;padding-bottom.

練習結果

三、架構

1.架構的概念

架構是瀏覽器視窗中的一個矩形地區，每個架構顯示一個網頁，與其他網頁的架構相鄰。

2.建立框架組

①建立框架組文本

<frameset cols="10%,90%"> <frame src="index.html" name="index" /> <frame src="page1.html" name="main" /></frameset>

這裡將視窗分成了左右兩部分，左半邊叫index，占視窗寬的10%；右半邊叫main，占視窗寬的90%，要分成上下兩部分用rows，取值的時候可以設定一個固定值，一個剩餘值“rows="100,*"”

②設定導航

比如說index.html是導航頁，點擊上面的page1連結要在視窗的右半部分開啟page1

<a href="page1.html" target="main">page1</a>

target的值表示這個新網頁要開啟的地方，之前在架構文本集中已經設定好了名稱為“main”的部分，所以page1會在main地區開啟。

③其他屬性

<frame />標籤中可以設定其他屬性
marginwidth：設定架構的左右邊距
marginheight:：架構的上下邊距
scrolling：是否顯示捲軸（"yes"或者"no"）
frameborder：是否顯示分隔線（”1“表示是，”0“表示否）
noresize：不允許使用者 調整架構大小

④內聯架構

<iframe />接受frame的一切屬性，這種架構可以放在網頁的文本地區中

⑤架構嵌套

架構展示