頁面布局和樣式美化

發(fā)布時間：2020-07-03 10:23:47 來源：網(wǎng)絡閱讀：671 作者：zjm80230 欄目：開發(fā)技術

在上一篇中我們事先了一個簡單的Hello world頁面。

在這一篇中，我們來認識下布局，和樣式。

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

DIV 是一個html里面的標簽，就好像h2一樣。

看下面一段代碼

<html>
	<head>
		<title>DIV+CSS</title>
	</head>
	<body>
		<div>
			DIV+CSS
		</div>
	</body>
</html>

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

沒有任何的驚喜。

下面我們通過css讓它有點變化，給它加個邊框

代碼修改成下面的樣子

<html>
    <head>
        <title>DIV+CSS</title>
        <style>
            .content{
                border:1px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            DIV+CSS
        </div>
    </body>
</html>

解析下代碼：

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

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

<div id="contentid" class="content">

當然，值可以隨便取有意義的。

3、剛剛我們在div里面寫了class='content' 而style里面有寫了.content{border:1px solid;} 這里style里面的意思就是將class='content'的標簽的border(邊框線)設置為1px (1像素) solid(實心的)。

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

頁面布局和樣式美化

現(xiàn)在我們再改改，加個背景顏色

<html>
    <head>
        <title>DIV+CSS</title>
        <style>
            .content{
                border:1px solid;
            }
            #contentid{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="contentid" class="content">
            DIV+CSS
        </div>
    </body>
</html>

代碼解析

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

運行結果如下

頁面布局和樣式美化

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

注意在一個頁面中，id值是唯一的，class值可以多個。

就是說：已經(jīng)定義了id=contentid，就不能再其他標簽定義id=contentid，因為contentid 已經(jīng)表示了一個標簽，其他標簽不能再用contentid，但可以用其他值，例如id=contentid2

但是class可以有多個，可以在多個標簽上定義class=content都是沒有問題的。

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

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid" class="content">
			DIV+CSS
		</div>
		
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
	</body>
</html>

效果如下

頁面布局和樣式美化

我們可以看到，兩個div都有了邊框線，說明只要標簽有class="content" 就會出現(xiàn)邊框線，因為在style中定義了.content{border:1px solid;}

在css中我們可以定義各種各樣的樣式，字體大小，顏色，背景色，寬度，高度之類想到得幾乎都可以實現(xiàn)。

那么到此簡單的css入門了。

下面看下布局

html里面的標簽都有一些默認的樣式，我們可以利用這些默認的樣式做出很多需要的效果。

先看簡單的

標簽分為：行級元素和塊級元素，簡單理解元素就是標簽。

div是一個塊級元素

塊級樣式的特征就是會占一整行

頁面布局和樣式美化

第二個div或者其他元素都會在下一行顯示

下面寫一個行級元素label，我把第一個div刪除了，因為妨礙地方，代碼如下

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
		<label>姓名：</label><label>51CTO</label>
	</body>
</html>

效果如下圖

頁面布局和樣式美化代碼分析

1、我們可以看到body里面有兩個label標簽，內(nèi)容分別為“姓名：”和“51CTO”，在頁面上可以在一行中顯示，沒有分行顯示，這就是行級元素的特征。

我們看下面用div寫會怎么樣

代碼如下

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
		<label>姓名：</label><label>51CTO</label>
		<div>姓名：</div><div>51CTO</div>
	</body>
</html>

顯示效果如下

頁面布局和樣式美化代碼分析

我們可以看到，代碼中用來兩個div來包含內(nèi)容，會換行顯示，這就是塊級元素的特征

好了，簡單的布局，橫的，豎的，就這樣實現(xiàn)了，下一篇我們用更多的樣式和簡單的標簽來一起做一個菜單。

向AI問一下細節(jié)

頁面布局和樣式美化

猜你喜歡

最新資訊

相關推薦

相關標簽