溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在上一篇中我們事先了一個簡單的Hello world頁面。
在這一篇中，我們來認識下布局，和樣式。
目前說的比較多的就是DIV+CSS
DIV 是一個html里面的標簽，就好像h2一樣。
看下面一段代碼
<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來包含內容，會換行顯示，這就是塊級元素的特征
好了，簡單的布局，橫的，豎的，就這樣實現了，下一篇我們用更多的樣式和簡單的標簽來一起做一個菜單。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
