在上一篇中我們事先了一個簡單的Hello world頁面。
在這一篇中，我們來認識下佈局，和樣式。
目前說的比較多的就是DIV+CSS
DIV 是一個html裏面的標籤，就好像h1一樣。
看下面一段代碼
<html> <head> <title>DIV+CSS</title> </head> <body> <div> DIV+CSS </div> </body> </html>
裏面的所有標籤，除了div其他在上一節都說過。運行結果如下圖
沒有任何的驚喜。
下面我們通過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(實心的)。
運行效果如下，內容上面多了一條邊框線
現在我們再改改，加個背景顏色
<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的屬性。現在代碼裏面就有一個id的屬性。值爲contentid。而style裏面加入了#contentid{background-color:red;}。這裏面的意思就是將id=contentid的標籤的background-color（背景顏色） 設置爲red（紅色）
運行結果如下
留意下，在div裏面寫id的時候，style前面用了#號，寫class的時候前面用了英文句號. 就是這樣用，沒錯。id用#號表示； class用.表示 這叫做“選擇器”，#contentid 就是選擇id爲contentid的標籤。
注意在一個頁面中，id值是唯一的，class值可以多個。
就是說：已經定義了id=contentid，就不能再其他標籤定義id=contentid，因爲contentid 已經表示了一個標籤，其他標籤不能再用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" 就會出現邊框線，因爲在style中定義了.content{border:1px solid;}
在css中我們可以定義各種各樣的樣式，字體大小，顏色，背景色，寬度，高度之類想到得幾乎都可以實現。
那麼到此簡單的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標籤，內容分別爲“姓名：”和“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來包含內容，會換行顯示，這就是塊級元素的特徵
好了，簡單的佈局，橫的，豎的，就這樣實現了，下一篇我們用更多的樣式和簡單的標籤來一起做一個菜單。