第一部分(網頁基礎)

網頁根底——WEB標準、DIV+CSS第一局部《WEB編程根底》《WEB編程根底》教學目標通過這一局部的學習讓學生了解Web標準。進一步熟悉穩(wěn)固DIV+CSS相關知識，能夠熟練對網頁進行布局和樣式設置。Web標準電子信息工程學院網頁布局網頁頁面布局〔DIV〕網頁樣式設置〔CSS〕《WEB編程根底》教學內容重點：1、理解Web標準的內涵2、掌握CSS樣式的使用3、掌握DIV布局難點：

使用DIV+CSS模式進行網頁布局并進行樣式設置《WEB編程根底》教學重難點

Web標準《WEB編程根底》1、什么是Web標準？Web標準，即網站標準。目前通常所說的Web標準一般指進行網站建設所采用的根本XHTML語言的網站設計語言。Web標準中典型的應用模式就是DIV+CSS。實際上，Web標準并不是一個標準，而是一些列標準的集合。Web標準由一系列的標準組成。由于Web設計越來越趨向于整體與結構化，對于網頁設計者來說，理解Web標準首先要理解結構和表現別離的意義。

一、了解Web標準

Web標準《WEB編程根底》2、什么是W3C？W3C組織是對網絡標準制定的一個非盈利組織，W3C是WorldWideWebConsortium〔萬維網聯盟〕的縮寫，像HTML、XHTML、CSS、XML的標準就是由W3C制定的。W3C致力于實現所有的用戶都能夠對web加以利用。W3C同時與其他標準化組織協同工作，比方Internet工程工作小組、無線應用協議〔WAP〕以及

Unicode

聯盟〔UnicodeConsortium〕。

一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準網頁主要由三局部組成：結構〔Structure〕、表現〔Presentation〕和行為〔Behavior〕。結構化標準語言，主要包括XHTML和XML。表現標準語言，主要包括CSS。行為標準，主要包括對象模型〔如W3CDOM〕、ECMAScript等。

一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔1〕HTML超文本標記語言，即HTML〔HypertextMarkupLanguage〕，是用于描述網頁文檔的一種標記語言。HTML是一種標準，一種標準，它通過標記符號來標記要顯示的網頁中的各個局部。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容〔如：文字如何處理，畫面如何安排，圖片如何顯示等〕。

一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔2〕XHTMLXHTML是〔TheExtensibleHyperTextMarkupLanguage，可擴展超文本標識語言〕的縮寫。XHTML是當前HTML版的繼承者。HTML語法要求比較松散，這樣對網頁編寫者來說，比較方便，但對于機器來說，語言的語法越松散，處理起來就越困難，對于傳統(tǒng)的計算機來說，還有能力兼容松散語法，但對于許多其他設備，比方，難度就比較大。

一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔3〕XMLXML〔ExtensibleMarkupLanguage〕即可擴展標記語言。它與HTML一樣，都是標準通用語言。Xml是Internet環(huán)境中跨平臺的，依賴于內容的技術，是當前處理結構化文檔信息的有力工具。擴展標記語言XML是一種簡單的數據存儲語言，使用一系列簡單的標記描述數據，而這些標記可以用方便的方式建立，雖然XML占用的空間比二進制數據要占用更多的空間，但XML極其簡單易于掌握和使用。一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔4〕CSSCSS是英語CascadingStyleSheets〔層疊樣式表單〕的縮寫，是用于控制網頁樣式并允許將樣式信息與網頁內容別離的一種標記性語言。通過CSS可以控制HTML或者XML標簽的表現形式。W3C推薦使用CSS布局方法，似的Web更加簡單，結構更加清晰。一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔5〕DOMDOM是DocumentObjectModel〔文檔對象模型〕的縮寫。DOM是W3C組織推薦的處理可擴展置標語言的標準編程接口。它可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。W3CDOM被設計成適合多個平臺，可使用任意編程語言實現的方法。DOM給了腳本語言〔類似ECMAScript〕無限發(fā)揮的能力。一、了解Web標準

Web標準《WEB編程根底》3、W3C發(fā)布的標準〔6〕ECMAScriptECMAScript是一種由Ecma國際〔前身為歐洲計算機制造商協會〕通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或Jscript。一、了解Web標準

Web標準《WEB編程根底》由于存在不同的瀏覽器版本，Web開發(fā)者常常需要為耗時的多版本開發(fā)而艱苦工作。當新的硬件〔比方移動〕和軟件〔比方微瀏覽器〕開始瀏覽Web時，這種情況開始會變得更加嚴重。為了Web更好地開展，對于開發(fā)人員和最終用戶而言非常重要的事情是，在開發(fā)新的應用程序時，瀏覽器開發(fā)商和站點開發(fā)商共同遵守標準。Web標準可確保每個人都有權利訪問相同的信息。二、為什么使用Web標準？

Web標準《WEB編程根底》一旦web開發(fā)人員遵守了web標準，由于開發(fā)人員可以更容易地理解彼此的編碼，web開發(fā)的團隊協作將得到簡化。只有使用web標準，才能確保在不頻繁和費時地重寫代碼的情況下，所有的瀏覽器，無論新的或老式的，都可以正確地顯示您的站點。標準的web文檔更易被搜索引擎訪問，也更易被準確地索引。標準的web文檔更易被轉換為其他格式。標準的web文檔更易被程序代碼訪問〔比方JavaScript和DOM〕。二、其他的考慮

Web標準《WEB編程根底》1、易用性易用性是HTML標準的一個重要局部。標準使得殘疾人士更容易地使用web。盲人可使用計算機為他們讀出網頁。而弱視的人士可重新排列并放大網頁。簡單的web標準，比方HTML和CSS，將使您的網頁更容易被語音閱讀器和其他不常見的輸出設備理解。二、其他的考慮

Web標準《WEB編程根底》2、易于維護多年以來，Web標準團隊一直推薦保持視覺設計和內容相別離的優(yōu)點。這意味著HTML變得非常的簡單，大局部的HTML頁面只有一些<div>和<p>標簽，以及一個指向強大的CSS文件的鏈接。這種完全的別離使得你的頁面開發(fā)和維護變得簡單，開發(fā)團隊之間能夠更好的協調。二、其他的考慮圖1電子信息工程學院網站首頁效果圖電子信息工程學院網頁布局《WEB編程根底》一、網頁效果〔任務提出〕電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS〔CascadingStyleSheets〕樣式定義如何顯示HTML元素樣式通常存儲在樣式表中把樣式添加到HTML4.0中，是為了解決內容與表現別離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲在CSS文件中多個樣式定義可層疊為一電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS根底語法CSS規(guī)那么由兩個主要的局部構成：選擇器，以及一條或多條聲明。選擇器通常是您需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成。屬性〔property〕是您希望設置的樣式屬性〔styleattribute〕。每個屬性有一個值。屬性和值被冒號分開。selector{declaration1;declaration2;...declarationN}selector{property:value}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS根底語法下面這行代碼的作用是將h1元素內的文字顏色定義為紅色，同時將字體大小設置為14像素。在這個例子中，h1是選擇器，color和font-size是屬性，red和14px是值。h1{color:red;font-size:14px;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS根底語法下面的示意圖為您展示了上面這段代碼的結構：

圖2CSS語法結構圖電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS根底語法⑴值的不同寫法和單位除了英文單詞red，我們還可以使用十六進制的顏色值#ff0000：為了節(jié)約字節(jié)，我們可以使用CSS的縮寫形式：p{color:#ff0000;}p{color:#f00;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術1、CSS根底語法⑵記得寫引號如果值為假設干單詞，那么要給值加引號：⑶多重聲明如果要定義不止一個聲明，那么需要用分號將每個聲明分開。p{font-family:"sansserif";}p{text-align:center;color:red;} 電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術2、CSS高級語法⑴選擇器的分組你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6{color:green;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術2、CSS高級語法⑵繼承及其問題根據CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作?？纯聪旅孢@條規(guī)那么：

body{font-family:Verdana,sans-serif;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術2、CSS高級語法⑵繼承及其問題根據上面這條規(guī)那么，站點的body元素將使用Verdana字體〔假設訪問者的系統(tǒng)中存在該字體的話〕。通過CSS繼承，子元素將繼承最高級元素〔在本例中是body〕所擁有的屬性〔這些子元素諸如p,td,ul,ol,ul,li,dl,dt,和dd〕。不需要另外的規(guī)那么，所有body的子元素都應該顯示Verdana字體，子元素的子元素也一樣。并且在大局部的現代瀏覽器中，也確實是這樣的。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術2、CSS高級語法⑵繼承及其問題但是在那個瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會發(fā)生，那時候對標準的支持并不是企業(yè)的優(yōu)先選擇。比方說，Netscape4就不支持繼承，它不僅忽略繼承，而且也忽略應用于body元素的規(guī)那么。IE/Windows直到IE6還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術2、CSS高級語法⑵繼承及其問題如果你不希望"Verdana,sans-serif"字體被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字體是Times。沒問題。創(chuàng)立一個針對p的特殊規(guī)那么，這樣它就會擺脫父元素的規(guī)那么：

body{font-family:Verdana,sans-serif;}td,ul,ol,ul,li,dl,dt,dd{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器

id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。下面的兩個id選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：#red{color:red;}#green{color:green;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器下面的HTML代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</p>注意：id屬性只能在每個HTML文檔中出現一次。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑴id選擇器和派生選擇器在現代布局中，id選擇器常常用于建立派生選擇器。#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑴id選擇器和派生選擇器上面的樣式只會應用于出現在id是sidebar的元素內的段落。這個元素很可能是div或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比方<em></em>或者<span></span>，不過這樣的用法是非法的，因為不可以在內聯元素<span>中嵌入<p>。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑴id選擇器和派生選擇器一個選擇器，多種用法：即使被標注為sidebar的元素只能在文檔中出現一次，這個id選擇器作為派生選擇器也可以被使用很屢次：

#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑴id選擇器和派生選擇器一個選擇器，多種用法：在這里，與頁面中的其他p元素明顯不同的是，sidebar內的p元素得到了特殊的處理，同時，與頁面中其他所有h2元素明顯不同的是，sidebar中的h2元素也得到了不同的特殊處理。#sidebarh2{ font-size:1em; font-weight:normal; font-style:italic; margin:0; line-height:1.5; text-align:right; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑵單獨的選擇器id選擇器即使不被用來創(chuàng)立派生選擇器，它也可以獨立發(fā)揮作用：

#sidebar{ border:1pxdotted#000; padding:10px; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術3、CSSid選擇器⑵單獨的選擇器根據這條規(guī)那么，id為sidebar的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有10個像素寬的內邊距〔padding，內部空白〕。老版本的Windows/IE瀏覽器可能會忽略這條規(guī)那么，除非你特別地定義這個選擇器所屬的元素：

div#sidebar{ border:1pxdotted#000; padding:10px; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術4、CSS類選擇器在CSS中，類選擇器以一個點號顯示：在上面的例子中，所有擁有center類的HTML元素均為居中。在下面的HTML代碼中，h1和p元素都有center類。這意味著兩者都將遵守“.center〞選擇器中的規(guī)那么。

.center{text-align:center}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術4、CSS類選擇器

<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>注意：類名的第一個字符不能使用數字！它無法在Mozilla或Firefox中起作用。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術4、CSS類選擇器和id一樣，class也可被用作派生選擇器：在上面這個例子中，類名為fancy的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。元素也可以基于它們的類而被選擇：在上面的例子中，類名為fancy的表格單元將是帶有灰色背景的橙色。.fancytd{ color:#f60; background:#666; }td.fancy{ color:#f60; background:#666; }電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術4、CSS類選擇器你可以將類fancy分配給任何一個表格元素任意多的次數。那些以fancy標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為fancy的類的單元格不會受這條規(guī)那么的影響。還有一點值得注意，class為fancy的段落也不會是帶有灰色背景的橙色，當然，任何其他被標注為fancy的元素也不會受這條規(guī)那么的影響。這都是由于我們書寫這條規(guī)那么的方式，這個效果被限制于被標注為fancy的表格單元〔即使用td元素來選擇fancy類〕。<tdclass="fancy">電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術5、CSS屬性選擇器CSS屬性選擇器對帶有指定屬性的HTML元素設置樣式?？梢詾閾碛兄付▽傩缘腍TML元素設置樣式，而不僅限于class和id屬性?！?〕屬性選擇器下面的例子為帶有title屬性的所有元素設置樣式：[title]{color:red;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術5、CSS屬性選擇器〔2〕屬性和值選擇器下面的例子為title=“Helloworld〞的所有元素設置樣式：〔3〕屬性和值選擇器-多個值下面的例子為包含指定值的title屬性的所有元素設置樣式。適用于由空格分隔的屬性值：[title=Helloworld]{border:5pxsolidblue;}[title~=hello]{color:red;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術5、CSS屬性選擇器〔4〕設置表單的樣式

屬性選擇器在為不帶有class或id的表單設置樣式時特別有用！input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family:Verdana,Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family:Verdana,Arial;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術6、創(chuàng)立CSS〔1〕外部樣式表當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。<link>標簽在〔文檔的〕頭部：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術6、創(chuàng)立CSS〔1〕外部樣式表瀏覽器會從文件mystyle.css中讀到樣式聲明，并根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的html標簽。樣式表應該以.css擴展名進行保存。下面是一個樣式表文件的例子：hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}注意：不要在屬性值與單位之間留有空格。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術6、創(chuàng)立CSS〔2〕內部樣式表當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用<style>標簽在文檔頭部定義內部樣式表，就像這樣:<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術6、創(chuàng)立CSS〔3〕內聯樣式由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式〔style〕屬性。Style屬性可以包含任何CSS屬性。本例展示如何改變段落的顏色和左外邊距：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景CSS允許應用純色作為背景，也允許使用背景圖像創(chuàng)立相當復雜的效果。CSS在這方面的能力遠遠在HTML之上。1〕背景色可以使用background-color屬性為元素設置背景色。這個屬性接受任何合法的顏色值。這條規(guī)那么把元素的背景設置為灰色：p{background-color:gray;}如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景1〕背景色如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：p{background-color:gray;padding:20px;}可以為所有元素設置背景色，這包括body一直到em和a等行內元素。background-color不能繼承，其默認值是transparent。transparent有“透明〞之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景2〕背景圖像要把圖像放入背景，需要使用background-image屬性。background-image屬性的默認值是none，表示背景上沒有放置任何圖像。如果需要設置一個背景圖像，必須為這個屬性設置一個URL值：body{background-image:url(/i/eg_bg_04.gif);}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景2〕背景圖像大多數背景都應用到body元素，不過并不僅限于此。下面例子為一個段落應用了背景，而不會對文檔的其他局部應用背景：p.flower{background-image:url(/i/eg_bg_03.gif);}你甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：a.radio{background-image:url(/i/eg_bg_07.gif);}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景3〕背景重復如果需要在頁面上對背景圖像進行平鋪，可以使用background-repeat屬性。屬性值repeat導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導致圖像只在水平或垂直方向上重復，no-repeat那么不允許圖像在任何方向上平鋪。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景3〕背景重復默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：body{background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景4〕背景定位可以利用background-position屬性改變圖像在背景中的位置。下面的例子在body元素中將一個背景圖像居中放置：body{background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔1〕CSS背景4〕背景定位為background-position屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right和center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如100px或5cm。最后也可以使用百分數值，如background-position:66%33%;這里，background-position的默認值是0%0%，在功能上相當于topleft。。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔2〕CSS文本CSS文本屬性可定義文本的外觀。通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等1〕縮進文本CSS提供了text-indent屬性，該屬性可以方便地實現文本縮進。下面的規(guī)那么會使所有段落的首行縮進5em：p{text-indent:5em;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔2〕CSS文本2〕文本對齊text-align是一個根本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。值left、right、center和justify會導致元素中的文本分別左對齊、右對齊、居中和兩端對齊。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔2〕CSS文本3〕文本裝飾text-decoration屬性，設置文本樣式。text-decoration有5個值：None：關閉原本應用到一個元素上的所有裝飾Underline：會對元素加下劃線Overline：會在文本的頂端畫一個上劃線line-through：在文本中間畫一個貫穿線Blink：會讓文本閃爍電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔3〕CSS字體1〕CSS字體系列在CSS中，有兩種不同類型的字體系列名稱：通用字體系列-擁有相似外觀的字體系統(tǒng)組合〔比方"Serif"或"Monospace"〕特定字體系列-具體的字體系列〔比方"Times"或"Courier"〕可以通過font-family屬性設置更具體的字體：h1{font-family:Georgia;}

電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔3〕CSS字體2〕字體風格font-style屬性最常用于規(guī)定斜體文本。該屬性有三個值：normal-文本正常顯示italic-文本斜體顯示oblique-文本傾斜顯示說明：斜體〔italic〕是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜〔oblique〕文本那么是正常豎直文本的一個傾斜版本。通常情況下，italic和oblique文本在web瀏覽器中看上去完全一樣。

電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔3〕CSS字體3〕字體加粗font-weight屬性設置文本的粗細。使用bold關鍵字可以將文本設置為粗體。關鍵字100-900為字體指定了9級加粗度。100對應最細的字體，900對應最粗的字體。數字400等價于normal，而700等價于bold。

p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔3〕CSS字體4〕字體大小font-size屬性設置文本的大小。使用像素來設置字體大小：p{font-size:60px;}使用em來設置字體大?。簆{font-size:0.875em;}/*14px/16=0.875em*/電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔4〕CSS列表CSS列表屬性允許你放置、改變列表項標志，或者將圖像作為列表項標志。1〕列表類型要修改用于列表項的標志類型，可以使用屬性list-style-type。例如：把無序列表中的列表項標志設置為方塊。ul{list-style-type:square}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔4〕CSS列表2〕列表項圖像有時，常規(guī)的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用list-style-image屬性做到：ulli{list-style-image:url(xxx.gif)}只需要簡單地使用一個url()值，就可以使用圖像作為標志。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔4〕CSS列表3〕列表標志位置CSS2.1可以確定標志出現在列表項內容之外還是內容內部。這是利用list-style-position完成的。規(guī)定列表中列表工程標記的位置：ul{list-style-position:inside;}值描述inside列表項目標記放置在文本以內，且環(huán)繞文本根據標記對齊。outside默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環(huán)繞文本不根據標記對齊。inherit規(guī)定應該從父元素繼承

list-style-position屬性的值。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格1〕表格邊框如需在CSS中設置表格邊框，請使用border屬性。下面的例子為table、th以及td設置了藍色邊框：

table,th,td{border:1pxsolidblue;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格2〕表格寬度和高度通過width和height屬性定義表格的寬度和高度。下面的例子將表格寬度設置為100%，同時將th元素的高度設置為50px：

table{width:100%;}th{height:50px;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格3〕表格文本對齊text-align和vertical-align屬性設置表格中文本的對齊方式。text-align屬性設置水平對齊方式，比方左對齊、右對齊或者居中：

td{text-align:right;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格3〕表格文本對齊vertical-align屬性設置垂直對齊方式，比方頂部對齊、底部對齊或居中對齊：td{height:50px;vertical-align:bottom;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格4〕表格內邊距如需控制表格中內容與邊框的距離，請為td和th元素設置padding屬性：td{padding:15px;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術7、CSS樣式〔5〕CSS表格5〕表格顏色下面的例子設置邊框的顏色，以及th元素的文本和背景顏色：table,td,th{border:1pxsolidgreen;}th{background-color:green;color:white;}電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSSDIV+CSS是網站標準〔或稱“WEB標準〞〕中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格〔table〕定位方式的區(qū)別，因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

用div盒模型結構給各局部內容劃分到不同的區(qū)塊，然后用css來定義盒模型的位置、大小、邊框、內外邊距、排列方式等。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔1〕DIV元素DIV元素是用來為HTML文檔內大塊〔block-level〕的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔2〕頁面布局與規(guī)劃頁面的布局，大致分為以下幾個局部：1〕頂部局部，其中又包括了LOGO、MENU和一幅Banner圖片；2〕內容局部又可分為側邊欄、主體內容；3〕底部，包括一些版權信息。電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔3〕DIV結構

圖2DIV結構圖電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔3〕DIV結構│body{}/*這是一個HTML元素，具體我就不說明了*/

└#Container{}/*頁面層容器*/

├#Header{}/*頁面頭部*/

├#PageBody{}/*頁面主體*/

│├#Sidebar{}/*側邊欄*/

│└#MainBody{}/*主體內容*/

└#Footer{}/*頁面底部*/

電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔4〕寫入整體層結構與CSS<divid="container"><!--頁面層容器--><divid="Header"><!--頁面頭部--></div><divid="PageBody"><!--頁面主體--><divid="Sidebar"><!--側邊欄--></div><divid="MainBody"><!--主體內容--></div></div><divid="Footer"><!--頁面底部--></div></div>電子信息工程學院網頁布局《WEB編程根底》二、關鍵技術8、DIV+CSS〔4〕寫入整體層結構與CSS/*根本信息*/body{font:12px;margin:0px;text-align:center;background:#FFFFFF;}/*頁面層容器*/#container{width:100%}/*頁面頭部*/#Header{width:800px;margin:0auto;height:100px;background:#FFCC99}/*頁面主體*/#PageBody{width:800px;margin:0auto;height:400px;background:#CCFF00}/*頁面底部*/#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作1、創(chuàng)立層結構<body><divid="Header"><!--頁面頭部--></div><divid="PageBody"><!--頁面主體--><divid="homeNav"><!--側邊欄--> <div>首頁</div><div>學院概況</div>

電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作1、創(chuàng)立層結構<div>師資隊伍</div><div>教學科研</div><div>黨建工作</div><div>實訓基地</div><div>學生園地</div><div>招生就業(yè)</div></div>

電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作1、創(chuàng)立層結構<divclass="even"><h1><ahref="#">招生就業(yè)</a></h1></div></div><divid="MainBody"><!--主體內容--></div></div>電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作1、創(chuàng)立層結構<divid="MainBody“></div></div><divid="Footer"><!--頁面底部--></div></body>

電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔1〕設置頁面樣式body{margin:0px;background-image:url(imgs/body.jpg);font-family:"微軟雅黑";}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔2〕設置頁面頭部樣式<divid="Header"> <divclass="logo"></div></div>#Header{margin:0pxauto;background-image:url(imgs/head-background.png);}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔2〕設置頁面頭部樣式#Header.logo{width:1000px;height:226px;margin:0pxauto;background-image:url(imgs/head-logo1.png);}

電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔2〕設置頁面頭部樣式

圖3頁面和頭部樣式設置效果圖電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置頁面主體樣式#PageBody{margin:auto;padding:020px;width:1000px;background-image:url(imgs/body-background.png);overflow:hidden;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置頁面主體樣式

圖4頁面主體樣式設置效果圖電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式首先為菜單項設置h1樣式和鏈接，每間隔一個菜單項添加class=“even〞：<div><h1><ahref=“#">首頁</a></h1></div><divclass="even"><h1><ahref=“#">學院概況</a></h1></div>電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式然后設置相應CSS樣式：#homeNav{ float:left; width:149px;overflow:hidden;z-index:1000;border-right:1pxsolid#999999;background-color:#FFFFFF;box-shadow:#6660px0px10px;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式#homeNavdiv{width:149px;height:60px;position:relative;}#homeNav.even{background-color:#eff4f7;}

電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式#homeNavdiva{text-decoration:none;font-weight:bold;color:#666666;}#homeNavdiva:hover{color:#0c7cbe;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式#homeNavh1{color:#666666;float:left;position:absolute;top:16px;margin:015px;padding:4px0px;font-size:18px; line-height:18px;height:18px;border-left:8pxsolid#0c7cbe;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔3〕設置側邊欄〔導航〕樣式圖5導航樣式設置效果圖電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置1〕添加層結構和內容<divid="MainBody"><!--主體內容--> <divid="home"><divclass="imgs"> </div>電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置1〕添加層結構和內容<divclass="news"><ahref="#"><divclass="title"></div></a><ul><li><ahref="#"title="我校師生為社區(qū)居民免費修家電"><divclass="text">我校師生為社區(qū)居民免費修家電</div><divclass="time">2023-06-05</div></a></li>……</ul></div>電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置1〕添加層結構和內容<divclass="notice"><ahref="#"><divclass="title"></div></a><ul><li><ahref="#"title="關于舉辦“端午詩會〞的通知"><divclass="text">關于舉辦“端午詩會〞的通知</div><divclass="time">2023-04-20</div></a></li>……</ul></div></div></div>電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置2〕樣式設置#MainBody{ float:right;width:850px;}#home{padding-left:1px;}#home.imgs{width:850px; height:300px;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置2〕樣式設置#home.news,#home.notice{width:410px;float:left;padding-left:5px;font-family:"宋體";}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置2〕樣式設置#home.news.title{width:350px;height:40px;background:url(imgs/home-news.png);cursor:pointer;}電子信息工程學院網頁布局《WEB編程根底》三、網頁布局制作2、添加內容、設置樣式〔4〕主體內容設置2〕樣式設置#