SERVICE


云啟未來,智造互聯
企業上云升級,助力企業騰飛

網頁設計css教程:第2部分

發布時間:2017-12-3 16:47:36您的位置: > 建站百科 > 正文

網頁設計CSS教程:第2部分

在第1部分中,我們使用CSS創建了一個帶有左側導航的經典雙列布局,只有少數類型的HTML標簽。第1部分介紹了該頁面的代碼,并解釋了我們將要使用的HTML標記。本周我將介紹到目前為止我們使用的HTML代碼和CSS。

你可以看看頁面應該看起來像這里:CSS示例頁面

我們的網頁到目前為止非常簡單。正如您可能已經知道的那樣,用戶在瀏覽網頁時看到的所有內容(文本,圖像,Flash等)都是用<body>和</ body>標記之間的HTML標記的。

在這種情況下,我們有這個:

< 體 >  
< DIV  ID = “導航” > 
< H2 >主導航< / H2 >  
< / DIV > 
< DIV  ID = “centerDoc” >  
< H1 >主標題< / H1 >  
< p > 
                < / p >  
< / div >  
< / body >
注意:

您應該創建自己的基本HTML頁面,以便您可以像我一樣跟隨并構建頁面。


在上面的代碼中,我們看到我們有兩個主要部分,每個部分都包含在<div>標簽內。正如您在本教程的第1部分中學到的,<div>標簽旨在用于在文檔中創建“分割”,換句話說就是創建一個容器。

我們已經創建了兩個這樣的容器,并給每個容器一個唯一的ID:

< div  id = “navigation” > 
...
< div  id = “centerDoc” >
您會注意到,該頁面的全部內容都包含在這兩個主要頁面部門之一中。所以第一個問題是:HTML頁面中ID的規則是什么,為什么我們使用它們并將它們分配給像DIV這樣的頁面元素?

1.首先,您可以將ID分配給任何HTML標簽。所以我也可以給一個<p>標簽分配一個ID。

2.頁面中的ID只能使用一次。也就是說,任何一個頁面上的任何兩個元素都不應該具有相同的ID。ID的意思是唯一標識一個頁面元素。所以在上面的例子中,我們知道只有一個ID為'navigation'的頁面元素,只有一個ID為'centerDoc'的頁面元素。我喜歡使用與您交談的ID名稱,這非常清楚我們在上面創建的每個部門正在發生什么。

3. HTML頁面元素(標簽)上的ID在CSS中使用。我們可以在CSS代碼中使用ID來通過引用元素的ID來改變元素的外觀,位置,甚至行為。

在<div>標簽中,我們使用標題標簽(<h1>和<h2>)來設置標題。我將解釋本教程的第1部分中的標題標記。

最后,我有一些<p>標簽,當然我插入組成這個簡單頁面的文本。

現在我要跳轉到附加到HTML頁面的CSS文件。我們用這行代碼在<head> </ head>標簽之間附上CSS文檔:

< head > 
      < link  href = “myCSS.css”  rel = “stylesheet”  type = “text / css” > 
< / head >
就像一個正常的頁面鏈接,我們有一個“href”屬性 - 這次指向一個CSS文檔,它包含了所有我們的CSS代碼,因為它鏈接到它,所以會影響這個頁面。這不是將CSS代碼關聯到頁面的唯一方式(還有其他幾種方法),但是我們將把它留給另一篇文章。所以在上面的鏈接中,我們用這個名字命名CSS文件名:'href =“myCSS.css”',我們告訴瀏覽器鏈接到一個具有以下屬性的CSS頁面:'type =“text / css”'。這里最重要的是鏈接指向名為“myCSS.css”的CSS文件,

所以現在我們已經把樣式表鏈接到文檔了,讓我們來看一些CSS代碼。代碼的第一部分“樣式”是我們之前討論的唯一ID:

#navigation  {  
position : absolute ;  
z-index : 10 ;  
width : 210px ;  
height : 600px ;  
保證金: 0 ;  
margin-top : 0px ;  
border-right : 1px  solid  #C6EC8C ;  
font-weight : 正常;  
 
#centerDoc  {  
position : absolute ;  
z-index : 15 ;  
padding : 0  0  20px  20px ;  / *右上方左下角* /  
margin-top : 50px ; 
margin-left : 235px ;  
}
這里有很多,所以我們現在只關注幾個要素。在上面的元素中,我們有兩個選擇器('#navigation'和'#centerDoc'),每個ID一個,每個選擇器后面跟著大括號:{}。在大括號之間,我們列出了指定應用于選擇器的樣式的“屬性”。所以這里是CSS選擇器的代碼,刪除了它的所有內容(它的屬性):

#navigation  {  
/ *看起來沒有CSS規則!* /  
}  
#centerDoc  {  
/ *看起來沒有CSS規則!* /  
}
我只是插入文本:'/ *看看沒有CSS規則!* /'來顯示你的CSS代碼通常在哪里。所以現在你可以看到大括號之間的任何東西都是CSS或者包中的一部分,通常被稱為屬性。

在我們上面的例子中,你可以看到有一些文本出現在大括號之前。該文本給選擇器一個名字。所以在這種情況下,我們有兩個選擇器名稱和兩個選擇器:#centerDoc和#navigation。那為什么我們在文字前面加上#號?為什么我們不能簡單地稱之為“centerDoc”和“導航”?

像HTML和編程一樣,某些地方的某些文本具有特殊的含義,告訴系統做一些特定的事情。在這種情況下,只要在CSS選擇器的名稱前面有一個#符號,我們就說這個選擇器是一種特殊的選擇器,稱為“ID”選擇器。ID選擇器有什么特別之處?該類型的選擇器只能應用于HTML頁面中的一個元素。聽起來很熟悉?

所以,現在你們那些不在電腦上睡覺的人看到,我們有一個CSS ID選擇器,用于每個有一個ID的HTML div,并且它們具有相同的對應名稱。所以CSS選擇器#centerDoc適用于div:“<div id =”centerDoc“>”,你知道了嗎?無論選擇哪種CSS規則/樣式編碼到我們的ID選擇器中,都會改變相應div內顯示的內容。所以對于id為“導航”的div,我們有這些CSS規則:

#navigation  {  
position : absolute ;  
z-index : 10 ;  
width : 210px ;  
height : 600px ;  
保證金: 0 ;  
margin-top : 0px ;  
border-right : 1px  solid  #C6EC8C ;  
font-weight : 正常;  
}
注意在底部,我們說所有的文本都有一個字體權重為'normal'的屬性:

font-weight : 正常;
我們可以簡單地說,我們希望所有的文本都出現在div(帶ID的導航欄div)中,而不是 - 然后這個屬性看起來像這樣:

font-weight : bold ;
但是我離題了,我已經在CSS的前一篇文章中詳細介紹了CSS。本教程是關于創建一個易于使用的頁面模板,所以我將指出使這個工作的2個主要元素。

在我們的頁面,導航div坐在左邊,它有一個邊界...為什么?它有一個很好的淺綠色1像素的邊框,因為我在CSS中設置:

border-right : 1px  solid  #C6EC8C ;
很自我解釋,不是嗎?我會建議改變邊框的顏色和改變邊框的像素厚度,看看它是怎么樣的。

為什么導航位于頁面左側,而centerDoc位于頁面的右側?那么首先要看的是導航選擇器中的這一行:

位置: 絕對;
這告訴瀏覽器只是把這個div放在頁面上。這是過分簡化了這個問題,但對于我們的目的,這個工作現在。

真正的魔術是centerDoc的CSS代碼:

#centerDoc  {  
position : absolute ;  
z-index : 15 ;  
padding : 0  0  20px  20px ;  / *右上方左下角* /  
margin-top : 50px ;  
margin-left : 235px ;  
}
該行:

margin-left : 235px ;
告訴瀏覽器在ID為“centerDoc”的div左邊插入235px(像素)的邊距。這推動了這個div,為div的“導航”騰出了空間。或者在這種情況下,只需創建一個不錯的左側欄。

在確定邊距之前,我們已經設置了一個叫做“padding”的東西,它聽起來像:包裹在我們的元素(標簽)周圍的空間。

CSS具有盒子模型的這個特征和概念,實質上是一個包裝HTML元素的框。這個盒子模型包括:填充,邊距,邊框和實際內容。這使我們能夠在元素和空間元素之間放置與其他元素相關的邊界。從內到外都是這樣排列的:

內容 - >填充 - >邊框 - >邊距

所以在我們的情況下,我們的<div>標簽之間的任何東西都是“內容”。緊接著是填充。然后是邊界,最后是邊界。邊距和填充可能看起來像是一樣的東西,但是如果您仔細考慮,可以看到如何在邊界(填充)之前以及邊界(邊距)之后控制空間,這實際上可以影響您的布局。

在這個例子中,你會注意到導航div在頁面上比centerDoc div高。這不是因為它們在HTML中出現的順序,因為它們通常沒有CSS,而是因為我為每個選擇器設置的邊距設置; 為centerDoc我把頂邊距設置為50px:

margin-top : 50px ;
而對于導航div我把它設置為:

margin-top : 0px ;
這將其頂部邊距設置為0像素,因此它會比centerDoc div高50個像素。我建議你將導航div的位置放在HTML中的中心文檔div下面,看看它是否改變了任何東西,你會看到div在實際的HTML代碼中出現的位置與它的顯示方式無關給用戶現在已經使用了CSS定位。另一個嘗試是玩CSS值,看看會發生什么,改變填充,改變邊距等。

我們將在第3部分結束對CSS的討論。

1.第一個<body>標簽頂部顯示的HTML對于頁面非常重要,但實際上并不直接與頁面中出現的內容有關(從用戶的角度來看),所以我不會在這篇文章中討論它。

夢之網科技
本文網址:http://www.aecov.cn/baike/911.html

濟南夢之網科技:濟南網站建設,濟南網站設計公司,網站建設開發公司,專業網站制作公司,擁有專業的技術團隊,一流的服務團隊.專業團隊為您提供網站設計,網站定制服務,公眾號應用開發,微信小程序開發,為用戶提供成套解決方案,智能農業物聯網系統