HTML基礎知識之DIV

、HTML 塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素；
元素在瀏覽器顯示時，通常會以新行來開始和結束；
如：<h1>，<p>，<ul>，<table>，<div>等標簽；

二、HTML 內聯元素

內聯元素在顯示時通常不會以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分；
<div> 元素經常與 CSS 一起使用，用來布局網頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是綠色-->
 <div class="one">
 </div>
 <!--子divtwo，是黃色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如圖所示：

用 <div> 元素的 HTML 布局

注釋：<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。

這個例子使用了四個 <div> 元素來創建多列布局：

<html>
<head>
<style>
#header {
 background-color:#1aaa11;
 color:white;
 text-align:center;
 padding:5px;
}
#nav {
 line-height:30px;
 background-color:#eeeeee;
 color:#faaaff;
 height:300px;
 width:100px;
 float:left;
 padding:5px;	 
}
#section {
 width:350px;
 float:left;
 padding:10px;	 	 
}
#footer {
 background-color:#166611;
 color:white;
 clear:both;
 text-align:center;
 padding:5px;	 	 
}
</style>
</head>
<body>
<div id="header">
<h1>天華信息教育</h1>
</div>
<div id="nav" >
第一組<br>
第二組<br>
第三組<br>
</div>
<div id="section">
<h2>這是標題</h2>
<p>
這是內容
</p>
<p>
這是內容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>

HTML基礎教程：div元素實現布局

SS是樣式,DIV是層.DIV+CSS是網站標準（web標準），通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別.因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

1：學會HTML語言，再學習DIV+CSS時會得心應手。

看得懂HTML語法，那么世界上80%的網站都能被你看穿。HTML語言很好學，一定要熟記常用的一些代碼，因為有了像dreamweaver這樣的幫助生成html代碼的工具,所以很多人都忽略了HTML的學習.學會了HTML互聯網中最基本的語言之后，在學習DIV+CSS時，你會發現：原來DIV+CSS也就那樣，小菜一碟?，F在都是用Notepad++、Sublime等，我這篇文章主要寫的用Dw。

2.使用Dreamweaver的代碼模式來編寫DIV和CSS。

對于網頁設計初學者來說，直接使用記事本、Notepad等工具來書寫代碼很困難。因為Dreamweaver的代碼模式有提示功能，可以在保證語法編寫的正確性。并且對不熟悉的語法可以一次性書寫正確。

如圖所示：書寫div，html時DW的提供功能。

書寫CSS時DW工具欄右側的CSS可視化編輯功能.

談談如何從零開始學習DIVCSS

我學習DIV+CSS時就是從Dreamweaver的代碼模式學起的，也許不是最好，但很實用。

3.養成良好的書寫習慣.

有良好的生活習慣，說明這人會過日子，有良好的CSS書寫習慣，說明這人做事嚴謹。寫css的時候網上有很多推薦的規范，比如菜單類用menu，版權用copyright（CoryRight），底部用footer等等，在書寫順序上一般是：顯示屬性-自身屬性-文本屬性。當然這些都沒有硬性的規定，但是遵循一些不成文的規定不是壞事，這樣讓自己寫的代碼，容易讓別人讀懂，搜索引擎也更加喜歡。

4.只有目的明確，結果清晰，過程才最高效，才不會輕易被干擾，被改變方向。

在線咨詢

上一篇：webapp調用html5+的獲取定位遇到的一些問題及解決
下一篇：用JS進行MD5加密，實現簽名驗證完成快遞單號查詢接口

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商