什么是DIV?
這個是網頁HTML的標簽,通常我們在HTML代碼中使用DIV標簽配合應用CSS類布局網頁。
1、DIV是html其中一個常用標簽,如span、table、h1等之類標簽
2、在HTML中DIV標簽我們用的最多,具有代表性
3、div配合css類,布局出網頁
什么是CSS?
CSS全稱為Cascading Style Sheets,中文翻譯為“層疊樣式表”,簡稱CSS樣式表,所以稱之為層疊樣式表(Cascading Stylesheet)簡稱CSS。在網頁制作時采用CSS技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。
DIV+CSS是網站標準(或稱“WEB標準”)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是采用DIV+CSS的方式實現各種定位。 用div盒模型結構給各部分內容劃分到不同的區塊,然后用css來定義盒模型的位置、大小、邊框、內外邊距、排列方式等。
在 DIV+CSS 布局中,DIV 承載的是內容,而 CSS 承載的是樣式,即內容和樣式的分離。雖然初次接觸 DIV+CSS 來布局會讓人覺得比較抽象,不同于傳統 Table 布局的所見即所得,但不容置疑的是 DIV+CSS 布局給 Web 設計帶來了巨大的好處:
搜索引擎親和力:搜索引擎更新歡 DIV+CSS 布局的網頁,因為搜索引擎可以直接跳過 CSS 而抓取所需要的頁面的正文內容。
重構頁面的方便性:由于內容與樣式分離,因此可以在不改動內容的前提下,可以很方便的頁面進行重新改版設計。
div+css代碼實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上中下結構 DIVCSS5 在線演示</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!--
www.ahshsu.cn -->
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
css代碼:
@charset "utf-8";
body, div{margin:0; padding:0;font-style: normal;
font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
body{color

000000;background

FFF; text-align:center}
a{color

000000;text-decoration:none}
a:hover{color

BA2636;text-decoration:underline}
#header,#content,#footer{margin:0 auto;width:400px; height:100px}
/* 以上代碼設置三個共用樣式 */
#header{border:1px solid #F00}
#content{ border:1px solid #FF0; height:200px}
#footer{border:1px solid #00F}
div+css的視頻教程如下: