[轉載]網頁設計之html、css、div簡解 - 傻瓜

div元素是用來為html文檔內大塊（block-level）的內容提供結構和背景的元素。

div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含 ... 傻瓜 跳到主文 要努力呀，傻瓜! 部落格全站分類：心情日記 相簿 部落格 留言 名片 公告版位 Aug12Wed200922:45 [轉載]網頁設計之html、css、div簡解 本文出自:http://www.181898.cn html與htmhtm與html沒有本質意義的區別，只是為了滿足DOS僅能識別8+3的文件名而已，因為一些老的系統(win32)不能識別四位文件名，所以某些網頁服務器要求index.html最後一個l不能省略。

MSIE能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說index.htm和index.html是兩個不同的文件，對應著不同的地址。

值得一提的是UNIX系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。

html（HyperTextMark-upLanguage）即超文本標記語言，是WWW的描述語言。

網頁設計html語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。

我們只需使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網絡的另一臺電腦中。

html文本是由html命令組成的描述性文本，html命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

不過它是一種靜態網頁。

基本html頁面以標簽開始，以結束。

在它們之間，整個頁面有兩部分：頭部（Head）和主體（Body）。

頭部在

和標簽之間，主要是描述瀏覽器所需的信息，主體在和之間，頁面上顯示的任何東西都包含在這兩個標簽之中。

編輯html只需要一個文字處理器（如McrosoftWord\記事本\寫字板等等）以及html的常識。

還可以使用mcrosoftFrontpage或者MacromediaDreamweaver等。

建立一個簡單的網頁步驟：第一步，建立一個新的文本文件，如果使用的是比較復雜的文字處理器，就要用『純文本』或『普通文本』來保存，並將它命名為『xxxx.html』。

隨便起一個英文名字就行。

然後用瀏覽器打開它，你會看見自己做的一個最簡單的網頁。

詳細的html知識可以參考相關的html教程。

csscss(CascadingStyle.Sheets)層疊樣式表：是一個普普通通的網頁，擴展名是.css。

通過給這個文件添加css規則，我們可以得到十分美觀的網頁!也就是說css是控制網頁的顯示樣式的，是網頁的衣裳！簡單來說就是用來美化網頁用的,是用來控制網頁的外觀的。

divdiv元素是用來為html文檔內大塊（block-level）的內容提供結構和背景的元素。

div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

div也叫層。

div只管排版布局。

使用css+div的優點div+css是一種符合標准的網頁寫法。

采用css+div進行網頁重構相對與傳統的table網頁布局而言，具有以下3個顯著優勢：1、表現和內容相分離將網頁設計部分剝離出來放在一個獨立樣式文件中，html文件中只存放文本信息。

這樣的頁面對搜索引擎更加友好。

2：提高頁面瀏覽速度對於同一個頁面視覺效果，采用css+div重構的頁面容量要比table編碼的頁面文件容量小得多，前者一般只有後者的1/2大小。

瀏覽器就不用去編譯大量冗長的標簽了。

3：易於維護和改版你只要簡單的修改幾個css文件就可以重新網頁設計整個網站的頁面。

div＋CSS網頁布局入門指南注：div＋CSS網頁布局入門指南摘錄於互聯網。

如有問題請聯系http://www.181898.cn結構化HTML我們在剛學習網頁制作時，總是先考慮怎麼網頁設計，考慮那些圖片、字體、顏色、以及布局方案。

然後我們用Photoshop或者Fireworks畫出來、切割成小圖。

最後再通過編輯HTML將所有網頁設計還原表現在頁面上。

如果你希望你的HTML頁面用CSS布局(是CSS-friendly的)，你需要回頭重來，先不考慮『外觀』，要先思考你的頁面內容的語義和結構。

外觀並不是最重要的。

一個結構良好的HTML頁面可以以任何外觀表現出來。

HTML不僅僅只在電腦屏幕上閱讀。

你用photoshop精心網頁設計的畫面可能不能顯示在PDA、移動電話和屏幕閱讀機上。

但是一個結構良好的HTML頁面可以通過CSS的不同定義，顯示在任何地方，任何網絡設備上。

開始思考-分析和規劃頁面結構首先要學習什麼是"結構"，一些作家也稱之為"語義"。

這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的目的，然後再根據這些內容目的建立起相應的HTML結構。

如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：標志和站點名稱主頁面內容站點導航(主菜單)子菜單搜索框功能區(例如購物車、收銀臺)頁腳(版權和有關法律聲明)我們通常采用div元素來將這些結構定義出來，類似這樣：-用div元素定義這些結構＜divid="header"＞＜/div＞＜divid="content"＞＜/div＞＜divid="globalnav"＞＜/div＞＜divid="subnav"＞＜/div＞＜divid="search"＞＜/div＞＜divid="shop"＞＜/div＞＜divid="footer"＞＜/div＞試舉例：id="header"在css中的定義方法#header{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}(字體尺寸為默認尺寸的110%;粗體;藍色;背景顏色透明)注意:ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。

id不可以重復，所以用class的話，可以肆無忌憚的用無數次。

這不是布局，是結構。

這是一個對內容塊的語義說明。

當你理解了你的結構，就可以加對應的ID在div上。

div容器中可以包含任何內容塊，也可以嵌套另一個div。

內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。

根據上面講述的，你已經知道如何結構化HTML，現在你可以進行布局和樣式定義了。

每一個內容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。

-指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等使用選擇器是件美妙的事-講解div的一些使用方法id的名稱是控制某一內容塊的手段,通過給這個內容塊套上div並加上唯一的id,你就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。

例如你為#header寫一個CSS規則，就可以完全不同於#content裡的圖片規則。

另外一個例子是：你可以通過不同規則來定義不同內容塊裡的鏈接樣式。

類似這樣：#globalnava:link或者#subnava:link或者#contenta:link。

你也可以定義不同內容塊中相同元素的樣式不一樣。

例如，通過#contentp和#footerp分別定義#content和#footer中p的樣式。

從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA還是手機或者網絡電視)有影響，它們可以被定義為任何的表現外觀。

一個仔細結構化的HTML頁面非常簡單，每一個元素都被用於結構目的。

當你想縮進一個段落，不需要使用blockquote標簽，只要使用p標簽，並對p加一個CSS的margin規則就可以實現縮進目的。

p是結構化標簽，margin是表現屬性，前者屬於HTML，後者屬於CSS。

(這就是結構於表現的相分離.)良好結構的HTML頁面內幾乎沒有表現屬性的標簽。

代碼非常乾淨簡潔。

例如，原先的代碼＜tablewidth="80%"cellpadding="3"border="2"align="left"＞，現在可以只在HTML中寫＜table＞，所有控制表現的東西都寫到css中去，在結構化的HTML中，table就是表格，而不是其他什麼(比如被用來布局和定位)。

親自實踐一下結構化上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。

常常會出現div嵌套的情況，你會看到"container"層中又有其它層，結構類似這樣：＜divid="navcontainer"＞＜divid="globalnav"＞＜ul＞alist＜/ul＞＜/div＞＜divid="subnav"＞＜ul＞anotherlist＜/ul＞＜/div＞＜/div＞嵌套的div元素允許你定義更多的CSS規則來控制表現，例如：你可以給#navcontainer一個規則讓列表居右，再給#globalnav一個規則讓列表居左，而給#subnav的list另一個完全不同的表現。

用CSS替換傳統方法下面的列表將幫助你用CSS替換傳統方法：HTML屬性以及相對應的CSS方法HTML屬性CSS方法說明align="left"align="right"float:left;float:right;使用CSS可以浮動任何元素:圖片、段落、div、標題、表格、列表等等當你使用float屬性，必須給這個浮動元素定義一個寬度。

marginwidth="0"leftmargin="0"marginheight="0"topmargin="0"margin:0;使用CSS,margin可以設置在任何元素上,不僅僅是body元素.更重要的，你可以分別指定元素的top,right,徵信社,bottom和left的margin值。

vlink="#333399"alink="#000000"link="#3333FF"a:link#3ff;a:visited:#339;a:hover:#999;a:active:#00f;在HTML中，鏈接的顏色作為body的一個屬性值定義。

整個頁面的鏈接風格都一樣。

使用CSS的選擇器，頁面不同部分的鏈接樣式可以不一樣。

bgcolor="#FFFFFF"background-color:#fff;在CSS中，任何元素都可以定義背景顏色，不僅僅局限於body和table元素。

bordercolor="#FFFFFF"border-color:#fff;任何元素都可以設置邊框(boeder)，你可以分別定義top,right,bottom和leftborder="3"cellspacing="3"border-width:3px;用CSS，你可以定義table的邊框為統一樣式，也可以分別定義top,right,bottomandleft邊框的顏色、尺寸和樣式。

你可以使用table,tdorth這些選擇器.如果你需要設置無邊框效果，可以使用CSS定義：border-collapse:collapse;＜brclear="left"＞＜brclear="right"＞＜brclear="all"＞clear:left;clear:right;clear:both;許多2列或者3列布局都使用float屬性來定位。

如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用clear屬性.cellpadding="3"vspace="3"hspace="3"padding:3px;用CSS，任何元素都可以設定padding屬性，同樣，padding可以分別設置top,right,bottomandleft。

padding是透明的。

align="center"text-align:center;margin-right:auto;margin-left:auto;Text-align只適用於文本.象div，p這樣的塊級可以通過margin-right:auto;和margin-left:auto;來水平居中總結：分析和規劃頁面結構-用div元素定義這些結構-指定這個div塊的顏色、字體、邊框、背景以及對齊屬性等等。

本文出自:http://www.181898.cn轉載請注明，謝謝! 全站熱搜 創作者介紹 smileALin 傻瓜 smileALin發表在痞客邦留言(0)人氣() E-mail轉寄 全站分類：不設分類個人分類：HTML此分類下一篇：[html]註解方式 上一篇：[數位邏輯]一些運算法則 下一篇：[PHP]範例 歷史上的今天 2009:[PHP]範例 ▲top 留言列表 發表留言 站方公告 [公告]2022年度農曆春節期間服務公告[公告]MIB廣告分潤計劃、PIXwallet錢包帳戶條款異動通知[公告]2021年度農曆春節期間服務公告 活動快報 舒特膚經典三件組 舒特膚全新升級！有效解決敏弱肌5大問題：乾燥、粗... 看更多活動好康 熱門文章 文章分類 給未來的自己(1) 給未來的自己(0) 程式學習(11) HTML(2)JavaScript(2)PHP(1)MySQL(0)C#(0)Java(1)組合語言(0)C語言(0)ASP(8)CSS(1)資料庫(1) Linux(1)music(1)ComputerScience(1)job(1) 最新文章 我的連結 其他 奧米加影像處理(PhotpShop) 程式學習 程式學習1井民全觀點(Jing'sPerspective) 最新留言 文章精選 文章精選 2010二月(2) 2010一月(1) 2009十一月(1) 2009十月(1) 2009九月(1) 2009八月(13) 2009七月(1) 所有文章列表 文章搜尋 新聞交換(RSS) 誰來我家 參觀人氣 本日人氣： 累積人氣： QRCode POWEREDBY (登入) 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗