HTML基礎(chǔ)知識(shí)之DIV

、HTML 塊元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素；
元素在瀏覽器顯示時(shí)，通常會(huì)以新行來開始和結(jié)束；
如：<h1>，<p>，<ul>，<table>，<div>等標(biāo)簽；

二、HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標(biāo)簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分；
<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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> 元素常用作布局工具，因?yàn)槟軌蜉p松地通過 CSS 對其進(jìn)行定位。

這個(gè)例子使用了四個(gè) <div> 元素來創(chuàng)建多列布局：

<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>這是標(biāo)題</h2>
<p>
這是內(nèi)容
</p>
<p>
這是內(nèi)容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>

HTML基礎(chǔ)教程：div元素實(shí)現(xiàn)布局

SS是樣式,DIV是層.DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（web標(biāo)準(zhǔn)），通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別.因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

1：學(xué)會(huì)HTML語言，再學(xué)習(xí)DIV+CSS時(shí)會(huì)得心應(yīng)手。

看得懂HTML語法，那么世界上80%的網(wǎng)站都能被你看穿。HTML語言很好學(xué)，一定要熟記常用的一些代碼，因?yàn)橛辛讼馾reamweaver這樣的幫助生成html代碼的工具,所以很多人都忽略了HTML的學(xué)習(xí).學(xué)會(huì)了HTML互聯(lián)網(wǎng)中最基本的語言之后，在學(xué)習(xí)DIV+CSS時(shí)，你會(huì)發(fā)現(xiàn)：原來DIV+CSS也就那樣，小菜一碟。現(xiàn)在都是用Notepad++、Sublime等，我這篇文章主要寫的用Dw。

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

對于網(wǎng)頁設(shè)計(jì)初學(xué)者來說，直接使用記事本、Notepad等工具來書寫代碼很困難。因?yàn)镈reamweaver的代碼模式有提示功能，可以在保證語法編寫的正確性。并且對不熟悉的語法可以一次性書寫正確。

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

書寫CSS時(shí)DW工具欄右側(cè)的CSS可視化編輯功能.

談?wù)勅绾螐牧汩_始學(xué)習(xí)DIVCSS

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

3.養(yǎng)成良好的書寫習(xí)慣.

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

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

在線咨詢

上一篇：webapp調(diào)用html5+的獲取定位遇到的一些問題及解決
下一篇：用JS進(jìn)行MD5加密，實(shí)現(xiàn)簽名驗(yàn)證完成快遞單號查詢接口

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。