div+css網頁佈局設計新開端（1）-css教學-PHP中文網

DIV+CSS是網站標準（或稱為「WEB標準」）中常用術語之一，div+css 是一種網頁的佈局方法，這一種網頁佈局方法有別於傳統的HTML網頁設計語言中的表格（table）定位方式，可實現網頁頁面內容與表現相分離。 XHTML是The Extensible HyperText Markup Language（可擴充超文本識別語言）的縮寫。 XHTML基於可擴展標記語言（XML），是一種在HTML 基礎上優化和改進的新語言，目的是基於XML應用與強大的資料轉換能力，適應未來網路應用更多的需求。在XHTML網站設計標準中，不再使用表格定位技術，而是採用DIV+CSS的方式來實現各種定位。

以前都是table佈置。。現在基本上已經不用了（table只用來顯示資料）
div中文裡是區域的意思，css則是層疊樣式表的意思，可見核心是佈局，而不是樣式

在學習DIV+CSS之前，一定要熟悉HTML，DIV+CSS要在HTML的基礎上學習

好了，現在是用什麼工具，一般用記事本就可以了也就是記事本+瀏覽器就OK，伺服器都不需要，也可以用dreamweaver cs5，這個有提示，幫助文檔最好下個中文版的CSS樣式表手冊，這樣就齊活啦

以上東西網上很容易找到，也可以在群web編程開發：197132320 下載，當然也歡迎熱愛web程式設計的朋友加入

下面開始學，首先熟悉下html的基本結構，創建一個html檔案test.html

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

登入後複製

當然，你直接在html檔案直接輸入hello也能正常顯示，但這不符合標準
下面認識div，其實可以把他看作一個容器，或是一個盒子，他是專門盛放內容的

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>

登入後複製

但是你在網頁上是看不到這個div的，因為他還是透明的
我們需要給他樣式讓他顯示，先讓他的邊框顯示，寬高度100px，背景色為紅色

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

登入後複製

每一個html標籤都有style屬性，div當然也不例外
border:solid 1px border表示css邊框屬性solid 1px 是它的兩個值注意要空格
solid 表示邊框實現顯示1px表示邊框寬度為1像素
什麼是像素看這裡http://baike.baidu.com/view/575.htm

width:100px ;height:100px;是設定div的寬度和高度注意每個屬性給值使用: 屬性之間隔開用;
background:red 背景設定紅色

如上程式碼在瀏覽器顯示如下

div+css網頁佈局設計新開端（1）

邊欄

CSS首頁 > web程式設計 > CSS >

標準（或稱「WEB標準」）中常用術語之一，div+css 是網頁的佈局方法，這一種網頁佈局方法有別於傳統的HTML網頁設計語言中的表格（table）定位方式，可實現網頁頁面內容與表現分開。 XHTML是The Extensible HyperText Markup Language（可擴充超文本識別語言）的縮寫。 XHTML基於可擴展標記語言（XML），是一種在HTML 基礎上優化和改進的新語言，目的是基於XML應用與強大的資料轉換能力，適應未來網路應用更多的需求。在XHTML網站設計標準中，不再使用表格定位技術，而是採用DIV+CSS的方式來實現各種定位。

以前都是table佈置。。現在基本上已經不用了（table只用來顯示資料）

div中文裡是區域的意思，css則是層疊樣式表的意思，可見核心是佈局，而不是樣式

在學習DIV+CSS之前，一定要熟悉HTML，DIV+CSS要在HTML的基礎上學習

好了，現在是用什麼工具，一般用記事本就可以了也就是記事本+瀏覽器就OK，伺服器都不需要，也可以用dreamweaver cs5，這個有提示，幫助文檔最好下個中文版的CSS樣式表手冊，這樣就齊活啦

以上東西網上很容易找到，也可以在群web編程開發：197132320 下載，當然也歡迎熱愛web程式設計的朋友加入

下面開始學，首先熟悉下html的基本結構，創建一個html檔案test.html

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

登入後複製

當然，你直接在html檔案直接輸入hello也能正常顯示，但這不符合標準
下面認識div，其實可以把他看作一個容器，或是一個盒子，他是專門盛放內容的

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>

登入後複製

但是你在網頁上是看不到這個div的，因為他還是透明的
我們需要給他樣式讓他顯示，先讓他的邊框顯示，寬高度100px，背景色為紅色

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

登入後複製

每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素看这里http://baike.baidu.com/view/575.htm

width:100px;height:100px;是设置div的宽度和高度注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色

如上代码在浏览器显示如下

还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说

引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式

外部样式引入需要在head标签里加

另外还的在html文件相同目录下创建mystyle.css文件

内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入

这是内部样式

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

登入後複製

这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式

如果是这种

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>

登入後複製

两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部

以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！