<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 背景設定紅色
如上代碼在瀏覽器顯示如下
關閉側邊欄
CSS首頁 > web編程 > CSS >
大中小
div+css網頁布局設計新開端（1）
時間：2014-03-09 20:49 點擊：709次
DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，div+css 是一種網頁的布局方法，這一種網頁布局方法有別於傳統的HTML網頁設計語言中的表格（table）定位方式，可實現網頁頁面內容與表現相分離。XHTML是The Extensible HyperText Markup Language（可擴充超文本標識語言）的縮寫。XHTML基於可延伸標記語言 (XML)（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 Google瀏覽器，Firefox瀏覽器，360的也可以
因為他們支援css標準還算相容，別的瀏覽器就說不準了，你看的結果可能不一樣
css瀏覽器安全色日後再說
引入css樣式除了上面一種，還有兩種
一種是外部樣式引入，精選這種，一種是內部樣式
外部樣式引入需要在head標籤裡加
<link rel="stylesheet" type="text/css" href="mystyle.css" />
另外還的在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）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
