頁(yè)面布局和樣式美化-創(chuàng)新互聯(lián)

在上一篇中我們事先了一個(gè)簡(jiǎn)單的Hello world頁(yè)面。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),遂平網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:遂平等地區(qū)。遂平做網(wǎng)站價(jià)格咨詢:18982081108

在這一篇中，我們來認(rèn)識(shí)下布局，和樣式。

目前說的比較多的就是DIV+CSS

DIV 是一個(gè)html里面的標(biāo)簽，就好像h2一樣。

看下面一段代碼


	
		DIV+CSS
	
	
		
			DIV+CSS

里面的所有標(biāo)簽，除了div其他在上一節(jié)都說過。運(yùn)行結(jié)果如下圖頁(yè)面布局和樣式美化

沒有任何的驚喜。

下面我們通過css讓它有點(diǎn)變化，給它加個(gè)邊框

代碼修改成下面的樣子


    
        DIV+CSS
        
    
    
        
            DIV+CSS

解析下代碼：

1、我在head里面加入style標(biāo)簽，這是一個(gè)定義樣式的標(biāo)簽，所有的樣式都寫在這個(gè)標(biāo)簽里面。而里面的樣式代碼就叫做css。

2、我在div里面加入了class="content" ，這句代碼的意思在這個(gè)div里面加入一個(gè)class屬性，而屬性值是content。屬性值可以隨便寫，但要有意義。不能起a，b，c 這些毫無意義的值。class屬性是一個(gè)常用的屬性。在標(biāo)簽里面還可以有其它屬性，例如：id屬性，我們寫成

當(dāng)然，值可以隨便取有意義的。

3、剛剛我們?cè)赿iv里面寫了class='content' 而style里面有寫了.content{border:1px solid;} 這里style里面的意思就是將class='content'的標(biāo)簽的border(邊框線)設(shè)置為1px (1像素) solid(實(shí)心的)。

運(yùn)行效果如下，內(nèi)容上面多了一條邊框線

頁(yè)面布局和樣式美化

現(xiàn)在我們?cè)俑母?，加個(gè)背景顏色


    
        DIV+CSS
        
    
    
        
            DIV+CSS

代碼解析

1、剛剛我們說了一個(gè)id的屬性?，F(xiàn)在代碼里面就有一個(gè)id的屬性。值為contentid。而style里面加入了#contentid{background-color:red;}。這里面的意思就是將id=contentid的標(biāo)簽的background-color（背景顏色）設(shè)置為red（紅色）

運(yùn)行結(jié)果如下

頁(yè)面布局和樣式美化

留意下，在div里面寫id的時(shí)候，style前面用了#號(hào)，寫class的時(shí)候前面用了英文句號(hào). 就是這樣用，沒錯(cuò)。id用#號(hào)表示； class用.表示這叫做“選擇器”，#contentid 就是選擇id為contentid的標(biāo)簽。

注意在一個(gè)頁(yè)面中，id值是唯一的，class值可以多個(gè)。

就是說：已經(jīng)定義了id=contentid，就不能再其他標(biāo)簽定義id=contentid，因?yàn)閏ontentid 已經(jīng)表示了一個(gè)標(biāo)簽，其他標(biāo)簽不能再用contentid，但可以用其他值，例如id=contentid2

但是class可以有多個(gè)，可以在多個(gè)標(biāo)簽上定義class=content都是沒有問題的。

看下面的代碼，就有兩個(gè)一模一樣的class，兩個(gè)值不一樣的id


	
		DIV+CSS
		
	
	
		
			DIV+CSS

網(wǎng)站建設(shè)知識(shí)

頁(yè)面布局和樣式美化-創(chuàng)新互聯(lián)

其他資訊