版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
網(wǎng)頁根底——WEB標(biāo)準(zhǔn)、DIV+CSS第一局部《WEB編程根底》《WEB編程根底》教學(xué)目標(biāo)通過這一局部的學(xué)習(xí)讓學(xué)生了解Web標(biāo)準(zhǔn)。進(jìn)一步熟悉穩(wěn)固DIV+CSS相關(guān)知識(shí),能夠熟練對(duì)網(wǎng)頁進(jìn)行布局和樣式設(shè)置。Web標(biāo)準(zhǔn)電子信息工程學(xué)院網(wǎng)頁布局網(wǎng)頁頁面布局〔DIV〕網(wǎng)頁樣式設(shè)置〔CSS〕《WEB編程根底》教學(xué)內(nèi)容重點(diǎn):1、理解Web標(biāo)準(zhǔn)的內(nèi)涵2、掌握CSS樣式的使用3、掌握DIV布局難點(diǎn):
使用DIV+CSS模式進(jìn)行網(wǎng)頁布局并進(jìn)行樣式設(shè)置《WEB編程根底》教學(xué)重難點(diǎn)
Web標(biāo)準(zhǔn)《WEB編程根底》1、什么是Web標(biāo)準(zhǔn)?Web標(biāo)準(zhǔn),即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說的Web標(biāo)準(zhǔn)一般指進(jìn)行網(wǎng)站建設(shè)所采用的根本XHTML語言的網(wǎng)站設(shè)計(jì)語言。Web標(biāo)準(zhǔn)中典型的應(yīng)用模式就是DIV+CSS。實(shí)際上,Web標(biāo)準(zhǔn)并不是一個(gè)標(biāo)準(zhǔn),而是一些列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)由一系列的標(biāo)準(zhǔn)組成。由于Web設(shè)計(jì)越來越趨向于整體與結(jié)構(gòu)化,對(duì)于網(wǎng)頁設(shè)計(jì)者來說,理解Web標(biāo)準(zhǔn)首先要理解結(jié)構(gòu)和表現(xiàn)別離的意義。
一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》2、什么是W3C?W3C組織是對(duì)網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非盈利組織,W3C是WorldWideWebConsortium〔萬維網(wǎng)聯(lián)盟〕的縮寫,像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C制定的。W3C致力于實(shí)現(xiàn)所有的用戶都能夠?qū)eb加以利用。W3C同時(shí)與其他標(biāo)準(zhǔn)化組織協(xié)同工作,比方Internet工程工作小組、無線應(yīng)用協(xié)議〔WAP〕以及
Unicode
聯(lián)盟〔UnicodeConsortium〕。
一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)網(wǎng)頁主要由三局部組成:結(jié)構(gòu)〔Structure〕、表現(xiàn)〔Presentation〕和行為〔Behavior〕。結(jié)構(gòu)化標(biāo)準(zhǔn)語言,主要包括XHTML和XML。表現(xiàn)標(biāo)準(zhǔn)語言,主要包括CSS。行為標(biāo)準(zhǔn),主要包括對(duì)象模型〔如W3CDOM〕、ECMAScript等。
一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔1〕HTML超文本標(biāo)記語言,即HTML〔HypertextMarkupLanguage〕,是用于描述網(wǎng)頁文檔的一種標(biāo)記語言。HTML是一種標(biāo)準(zhǔn),一種標(biāo)準(zhǔn),它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)局部。網(wǎng)頁文件本身是一種文本文件,通過在文本文件中添加標(biāo)記符,可以告訴瀏覽器如何顯示其中的內(nèi)容〔如:文字如何處理,畫面如何安排,圖片如何顯示等〕。
一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔2〕XHTMLXHTML是〔TheExtensibleHyperTextMarkupLanguage,可擴(kuò)展超文本標(biāo)識(shí)語言〕的縮寫。XHTML是當(dāng)前HTML版的繼承者。HTML語法要求比較松散,這樣對(duì)網(wǎng)頁編寫者來說,比較方便,但對(duì)于機(jī)器來說,語言的語法越松散,處理起來就越困難,對(duì)于傳統(tǒng)的計(jì)算機(jī)來說,還有能力兼容松散語法,但對(duì)于許多其他設(shè)備,比方,難度就比較大。
一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔3〕XMLXML〔ExtensibleMarkupLanguage〕即可擴(kuò)展標(biāo)記語言。它與HTML一樣,都是標(biāo)準(zhǔn)通用語言。Xml是Internet環(huán)境中跨平臺(tái)的,依賴于內(nèi)容的技術(shù),是當(dāng)前處理結(jié)構(gòu)化文檔信息的有力工具。擴(kuò)展標(biāo)記語言XML是一種簡單的數(shù)據(jù)存儲(chǔ)語言,使用一系列簡單的標(biāo)記描述數(shù)據(jù),而這些標(biāo)記可以用方便的方式建立,雖然XML占用的空間比二進(jìn)制數(shù)據(jù)要占用更多的空間,但XML極其簡單易于掌握和使用。一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔4〕CSSCSS是英語CascadingStyleSheets〔層疊樣式表單〕的縮寫,是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容別離的一種標(biāo)記性語言。通過CSS可以控制HTML或者XML標(biāo)簽的表現(xiàn)形式。W3C推薦使用CSS布局方法,似的Web更加簡單,結(jié)構(gòu)更加清晰。一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔5〕DOMDOM是DocumentObjectModel〔文檔對(duì)象模型〕的縮寫。DOM是W3C組織推薦的處理可擴(kuò)展置標(biāo)語言的標(biāo)準(zhǔn)編程接口。它可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說,這是表示和處理一個(gè)HTML或XML文檔的常用方法。W3CDOM被設(shè)計(jì)成適合多個(gè)平臺(tái),可使用任意編程語言實(shí)現(xiàn)的方法。DOM給了腳本語言〔類似ECMAScript〕無限發(fā)揮的能力。一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》3、W3C發(fā)布的標(biāo)準(zhǔn)〔6〕ECMAScriptECMAScript是一種由Ecma國際〔前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)〕通過ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言。這種語言在萬維網(wǎng)上應(yīng)用廣泛,它往往被稱為JavaScript或Jscript。一、了解Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)《WEB編程根底》由于存在不同的瀏覽器版本,Web開發(fā)者常常需要為耗時(shí)的多版本開發(fā)而艱苦工作。當(dāng)新的硬件〔比方移動(dòng)〕和軟件〔比方微瀏覽器〕開始瀏覽Web時(shí),這種情況開始會(huì)變得更加嚴(yán)重。為了Web更好地開展,對(duì)于開發(fā)人員和最終用戶而言非常重要的事情是,在開發(fā)新的應(yīng)用程序時(shí),瀏覽器開發(fā)商和站點(diǎn)開發(fā)商共同遵守標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)可確保每個(gè)人都有權(quán)利訪問相同的信息。二、為什么使用Web標(biāo)準(zhǔn)?
Web標(biāo)準(zhǔn)《WEB編程根底》一旦web開發(fā)人員遵守了web標(biāo)準(zhǔn),由于開發(fā)人員可以更容易地理解彼此的編碼,web開發(fā)的團(tuán)隊(duì)協(xié)作將得到簡化。只有使用web標(biāo)準(zhǔn),才能確保在不頻繁和費(fèi)時(shí)地重寫代碼的情況下,所有的瀏覽器,無論新的或老式的,都可以正確地顯示您的站點(diǎn)。標(biāo)準(zhǔn)的web文檔更易被搜索引擎訪問,也更易被準(zhǔn)確地索引。標(biāo)準(zhǔn)的web文檔更易被轉(zhuǎn)換為其他格式。標(biāo)準(zhǔn)的web文檔更易被程序代碼訪問〔比方JavaScript和DOM〕。二、其他的考慮
Web標(biāo)準(zhǔn)《WEB編程根底》1、易用性易用性是HTML標(biāo)準(zhǔn)的一個(gè)重要局部。標(biāo)準(zhǔn)使得殘疾人士更容易地使用web。盲人可使用計(jì)算機(jī)為他們讀出網(wǎng)頁。而弱視的人士可重新排列并放大網(wǎng)頁。簡單的web標(biāo)準(zhǔn),比方HTML和CSS,將使您的網(wǎng)頁更容易被語音閱讀器和其他不常見的輸出設(shè)備理解。二、其他的考慮
Web標(biāo)準(zhǔn)《WEB編程根底》2、易于維護(hù)多年以來,Web標(biāo)準(zhǔn)團(tuán)隊(duì)一直推薦保持視覺設(shè)計(jì)和內(nèi)容相別離的優(yōu)點(diǎn)。這意味著HTML變得非常的簡單,大局部的HTML頁面只有一些<div>和<p>標(biāo)簽,以及一個(gè)指向強(qiáng)大的CSS文件的鏈接。這種完全的別離使得你的頁面開發(fā)和維護(hù)變得簡單,開發(fā)團(tuán)隊(duì)之間能夠更好的協(xié)調(diào)。二、其他的考慮圖1電子信息工程學(xué)院網(wǎng)站首頁效果圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》一、網(wǎng)頁效果〔任務(wù)提出〕電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS〔CascadingStyleSheets〕樣式定義如何顯示HTML元素樣式通常存儲(chǔ)在樣式表中把樣式添加到HTML4.0中,是為了解決內(nèi)容與表現(xiàn)別離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在CSS文件中多個(gè)樣式定義可層疊為一電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS根底語法CSS規(guī)那么由兩個(gè)主要的局部構(gòu)成:選擇器,以及一條或多條聲明。選擇器通常是您需要改變樣式的HTML元素。每條聲明由一個(gè)屬性和一個(gè)值組成。屬性〔property〕是您希望設(shè)置的樣式屬性〔styleattribute〕。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。selector{declaration1;declaration2;...declarationN}selector{property:value}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS根底語法下面這行代碼的作用是將h1元素內(nèi)的文字顏色定義為紅色,同時(shí)將字體大小設(shè)置為14像素。在這個(gè)例子中,h1是選擇器,color和font-size是屬性,red和14px是值。h1{color:red;font-size:14px;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS根底語法下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu):
圖2CSS語法結(jié)構(gòu)圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS根底語法⑴值的不同寫法和單位除了英文單詞red,我們還可以使用十六進(jìn)制的顏色值#ff0000:為了節(jié)約字節(jié),我們可以使用CSS的縮寫形式:p{color:#ff0000;}p{color:#f00;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)1、CSS根底語法⑵記得寫引號(hào)如果值為假設(shè)干單詞,那么要給值加引號(hào):⑶多重聲明如果要定義不止一個(gè)聲明,那么需要用分號(hào)將每個(gè)聲明分開。p{font-family:"sansserif";}p{text-align:center;color:red;} 電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)2、CSS高級(jí)語法⑴選擇器的分組你可以對(duì)選擇器進(jìn)行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開。在下面的例子中,我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的。
h1,h2,h3,h4,h5,h6{color:green;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)2、CSS高級(jí)語法⑵繼承及其問題根據(jù)CSS,子元素從父元素繼承屬性。但是它并不總是按此方式工作??纯聪旅孢@條規(guī)那么:
body{font-family:Verdana,sans-serif;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)2、CSS高級(jí)語法⑵繼承及其問題根據(jù)上面這條規(guī)那么,站點(diǎn)的body元素將使用Verdana字體〔假設(shè)訪問者的系統(tǒng)中存在該字體的話〕。通過CSS繼承,子元素將繼承最高級(jí)元素〔在本例中是body〕所擁有的屬性〔這些子元素諸如p,td,ul,ol,ul,li,dl,dt,和dd〕。不需要另外的規(guī)那么,所有body的子元素都應(yīng)該顯示Verdana字體,子元素的子元素也一樣。并且在大局部的現(xiàn)代瀏覽器中,也確實(shí)是這樣的。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)2、CSS高級(jí)語法⑵繼承及其問題但是在那個(gè)瀏覽器大戰(zhàn)的血腥年代里,這種情況就未必會(huì)發(fā)生,那時(shí)候?qū)?biāo)準(zhǔn)的支持并不是企業(yè)的優(yōu)先選擇。比方說,Netscape4就不支持繼承,它不僅忽略繼承,而且也忽略應(yīng)用于body元素的規(guī)那么。IE/Windows直到IE6還存在相關(guān)的問題,在表格內(nèi)的字體樣式會(huì)被忽略。我們又該如何是好呢?電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)2、CSS高級(jí)語法⑵繼承及其問題如果你不希望"Verdana,sans-serif"字體被所有的子元素繼承,又該怎么做呢?比方說,你希望段落的字體是Times。沒問題。創(chuàng)立一個(gè)針對(duì)p的特殊規(guī)那么,這樣它就會(huì)擺脫父元素的規(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;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器
id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。下面的兩個(gè)id選擇器,第一個(gè)可以定義元素的顏色為紅色,第二個(gè)定義元素的顏色為綠色:#red{color:red;}#green{color:green;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器下面的HTML代碼中,id屬性為red的p元素顯示為紅色,而id屬性為green的p元素顯示為綠色。<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>注意:id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑴id選擇器和派生選擇器在現(xiàn)代布局中,id選擇器常常用于建立派生選擇器。#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑴id選擇器和派生選擇器上面的樣式只會(huì)應(yīng)用于出現(xiàn)在id是sidebar的元素內(nèi)的段落。這個(gè)元素很可能是div或者是表格單元,盡管它也可能是一個(gè)表格或者其他塊級(jí)元素。它甚至可以是一個(gè)內(nèi)聯(lián)元素,比方<em></em>或者<span></span>,不過這樣的用法是非法的,因?yàn)椴豢梢栽趦?nèi)聯(lián)元素<span>中嵌入<p>。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑴id選擇器和派生選擇器一個(gè)選擇器,多種用法:即使被標(biāo)注為sidebar的元素只能在文檔中出現(xiàn)一次,這個(gè)id選擇器作為派生選擇器也可以被使用很屢次:
#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑴id選擇器和派生選擇器一個(gè)選擇器,多種用法:在這里,與頁面中的其他p元素明顯不同的是,sidebar內(nèi)的p元素得到了特殊的處理,同時(shí),與頁面中其他所有h2元素明顯不同的是,sidebar中的h2元素也得到了不同的特殊處理。#sidebarh2{ font-size:1em; font-weight:normal; font-style:italic; margin:0; line-height:1.5; text-align:right; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑵單獨(dú)的選擇器id選擇器即使不被用來創(chuàng)立派生選擇器,它也可以獨(dú)立發(fā)揮作用:
#sidebar{ border:1pxdotted#000; padding:10px; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)3、CSSid選擇器⑵單獨(dú)的選擇器根據(jù)這條規(guī)那么,id為sidebar的元素將擁有一個(gè)像素寬的黑色點(diǎn)狀邊框,同時(shí)其周圍會(huì)有10個(gè)像素寬的內(nèi)邊距〔padding,內(nèi)部空白〕。老版本的Windows/IE瀏覽器可能會(huì)忽略這條規(guī)那么,除非你特別地定義這個(gè)選擇器所屬的元素:
div#sidebar{ border:1pxdotted#000; padding:10px; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)4、CSS類選擇器在CSS中,類選擇器以一個(gè)點(diǎn)號(hào)顯示:在上面的例子中,所有擁有center類的HTML元素均為居中。在下面的HTML代碼中,h1和p元素都有center類。這意味著兩者都將遵守“.center〞選擇器中的規(guī)那么。
.center{text-align:center}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)4、CSS類選擇器
<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>注意:類名的第一個(gè)字符不能使用數(shù)字!它無法在Mozilla或Firefox中起作用。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)4、CSS類選擇器和id一樣,class也可被用作派生選擇器:在上面這個(gè)例子中,類名為fancy的更大的元素內(nèi)部的表格單元都會(huì)以灰色背景顯示橙色文字。元素也可以基于它們的類而被選擇:在上面的例子中,類名為fancy的表格單元將是帶有灰色背景的橙色。.fancytd{ color:#f60; background:#666; }td.fancy{ color:#f60; background:#666; }電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)4、CSS類選擇器你可以將類fancy分配給任何一個(gè)表格元素任意多的次數(shù)。那些以fancy標(biāo)注的單元格都會(huì)是帶有灰色背景的橙色。那些沒有被分配名為fancy的類的單元格不會(huì)受這條規(guī)那么的影響。還有一點(diǎn)值得注意,class為fancy的段落也不會(huì)是帶有灰色背景的橙色,當(dāng)然,任何其他被標(biāo)注為fancy的元素也不會(huì)受這條規(guī)那么的影響。這都是由于我們書寫這條規(guī)那么的方式,這個(gè)效果被限制于被標(biāo)注為fancy的表格單元〔即使用td元素來選擇fancy類〕。<tdclass="fancy">電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)5、CSS屬性選擇器CSS屬性選擇器對(duì)帶有指定屬性的HTML元素設(shè)置樣式??梢詾閾碛兄付▽傩缘腍TML元素設(shè)置樣式,而不僅限于class和id屬性?!?〕屬性選擇器下面的例子為帶有title屬性的所有元素設(shè)置樣式:[title]{color:red;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)5、CSS屬性選擇器〔2〕屬性和值選擇器下面的例子為title=“Helloworld〞的所有元素設(shè)置樣式:〔3〕屬性和值選擇器-多個(gè)值下面的例子為包含指定值的title屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值:[title=Helloworld]{border:5pxsolidblue;}[title~=hello]{color:red;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)5、CSS屬性選擇器〔4〕設(shè)置表單的樣式
屬性選擇器在為不帶有class或id的表單設(shè)置樣式時(shí)特別有用!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;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)6、創(chuàng)立CSS〔1〕外部樣式表當(dāng)樣式需要應(yīng)用于很多頁面時(shí),外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用<link>標(biāo)簽鏈接到樣式表。<link>標(biāo)簽在〔文檔的〕頭部:<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)6、創(chuàng)立CSS〔1〕外部樣式表瀏覽器會(huì)從文件mystyle.css中讀到樣式聲明,并根據(jù)它來格式文檔。外部樣式表可以在任何文本編輯器中進(jìn)行編輯。文件不能包含任何的html標(biāo)簽。樣式表應(yīng)該以.css擴(kuò)展名進(jìn)行保存。下面是一個(gè)樣式表文件的例子:hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}注意:不要在屬性值與單位之間留有空格。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)6、創(chuàng)立CSS〔2〕內(nèi)部樣式表當(dāng)單個(gè)文檔需要特殊的樣式時(shí),就應(yīng)該使用內(nèi)部樣式表。你可以使用<style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表,就像這樣:<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)6、創(chuàng)立CSS〔3〕內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起,內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢。請(qǐng)慎用這種方法,例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。要使用內(nèi)聯(lián)樣式,你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式〔style〕屬性。Style屬性可以包含任何CSS屬性。本例展示如何改變段落的顏色和左外邊距:<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景CSS允許應(yīng)用純色作為背景,也允許使用背景圖像創(chuàng)立相當(dāng)復(fù)雜的效果。CSS在這方面的能力遠(yuǎn)遠(yuǎn)在HTML之上。1〕背景色可以使用background-color屬性為元素設(shè)置背景色。這個(gè)屬性接受任何合法的顏色值。這條規(guī)那么把元素的背景設(shè)置為灰色:p{background-color:gray;}如果您希望背景色從元素中的文本向外少有延伸,只需增加一些內(nèi)邊距:電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景1〕背景色如果您希望背景色從元素中的文本向外少有延伸,只需增加一些內(nèi)邊距:p{background-color:gray;padding:20px;}可以為所有元素設(shè)置背景色,這包括body一直到em和a等行內(nèi)元素。background-color不能繼承,其默認(rèn)值是transparent。transparent有“透明〞之意。也就是說,如果一個(gè)元素沒有指定背景色,那么背景就是透明的。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景2〕背景圖像要把圖像放入背景,需要使用background-image屬性。background-image屬性的默認(rèn)值是none,表示背景上沒有放置任何圖像。如果需要設(shè)置一個(gè)背景圖像,必須為這個(gè)屬性設(shè)置一個(gè)URL值:body{background-image:url(/i/eg_bg_04.gif);}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景2〕背景圖像大多數(shù)背景都應(yīng)用到body元素,不過并不僅限于此。下面例子為一個(gè)段落應(yīng)用了背景,而不會(huì)對(duì)文檔的其他局部應(yīng)用背景:p.flower{background-image:url(/i/eg_bg_03.gif);}你甚至可以為行內(nèi)元素設(shè)置背景圖像,下面的例子為一個(gè)鏈接設(shè)置了背景圖像:a.radio{background-image:url(/i/eg_bg_07.gif);}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景3〕背景重復(fù)如果需要在頁面上對(duì)背景圖像進(jìn)行平鋪,可以使用background-repeat屬性。屬性值repeat導(dǎo)致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導(dǎo)致圖像只在水平或垂直方向上重復(fù),no-repeat那么不允許圖像在任何方向上平鋪。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景3〕背景重復(fù)默認(rèn)地,背景圖像將從一個(gè)元素的左上角開始。請(qǐng)看下面的例子:body{background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景4〕背景定位可以利用background-position屬性改變圖像在背景中的位置。下面的例子在body元素中將一個(gè)背景圖像居中放置:body{background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔1〕CSS背景4〕背景定位為background-position屬性提供值有很多方法。首先,可以使用一些關(guān)鍵字:top、bottom、left、right和center。通常,這些關(guān)鍵字會(huì)成對(duì)出現(xiàn),不過也不總是這樣。還可以使用長度值,如100px或5cm。最后也可以使用百分?jǐn)?shù)值,如background-position:66%33%;這里,background-position的默認(rèn)值是0%0%,在功能上相當(dāng)于topleft。。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔2〕CSS文本CSS文本屬性可定義文本的外觀。通過文本屬性,您可以改變文本的顏色、字符間距,對(duì)齊文本,裝飾文本,對(duì)文本進(jìn)行縮進(jìn),等等1〕縮進(jìn)文本CSS提供了text-indent屬性,該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。下面的規(guī)那么會(huì)使所有段落的首行縮進(jìn)5em:p{text-indent:5em;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔2〕CSS文本2〕文本對(duì)齊text-align是一個(gè)根本的屬性,它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。值left、right、center和justify會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊、居中和兩端對(duì)齊。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔2〕CSS文本3〕文本裝飾text-decoration屬性,設(shè)置文本樣式。text-decoration有5個(gè)值:None:關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾Underline:會(huì)對(duì)元素加下劃線Overline:會(huì)在文本的頂端畫一個(gè)上劃線line-through:在文本中間畫一個(gè)貫穿線Blink:會(huì)讓文本閃爍電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔3〕CSS字體1〕CSS字體系列在CSS中,有兩種不同類型的字體系列名稱:通用字體系列-擁有相似外觀的字體系統(tǒng)組合〔比方"Serif"或"Monospace"〕特定字體系列-具體的字體系列〔比方"Times"或"Courier"〕可以通過font-family屬性設(shè)置更具體的字體:h1{font-family:Georgia;}
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔3〕CSS字體2〕字體風(fēng)格font-style屬性最常用于規(guī)定斜體文本。該屬性有三個(gè)值:normal-文本正常顯示italic-文本斜體顯示oblique-文本傾斜顯示說明:斜體〔italic〕是一種簡單的字體風(fēng)格,對(duì)每個(gè)字母的結(jié)構(gòu)有一些小改動(dòng),來反映變化的外觀。與此不同,傾斜〔oblique〕文本那么是正常豎直文本的一個(gè)傾斜版本。通常情況下,italic和oblique文本在web瀏覽器中看上去完全一樣。
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔3〕CSS字體3〕字體加粗font-weight屬性設(shè)置文本的粗細(xì)。使用bold關(guān)鍵字可以將文本設(shè)置為粗體。關(guān)鍵字100-900為字體指定了9級(jí)加粗度。100對(duì)應(yīng)最細(xì)的字體,900對(duì)應(yīng)最粗的字體。數(shù)字400等價(jià)于normal,而700等價(jià)于bold。
p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔3〕CSS字體4〕字體大小font-size屬性設(shè)置文本的大小。使用像素來設(shè)置字體大?。簆{font-size:60px;}使用em來設(shè)置字體大?。簆{font-size:0.875em;}/*14px/16=0.875em*/電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔4〕CSS列表CSS列表屬性允許你放置、改變列表項(xiàng)標(biāo)志,或者將圖像作為列表項(xiàng)標(biāo)志。1〕列表類型要修改用于列表項(xiàng)的標(biāo)志類型,可以使用屬性list-style-type。例如:把無序列表中的列表項(xiàng)標(biāo)志設(shè)置為方塊。ul{list-style-type:square}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔4〕CSS列表2〕列表項(xiàng)圖像有時(shí),常規(guī)的標(biāo)志是不夠的。你可能想對(duì)各標(biāo)志使用一個(gè)圖像,這可以利用list-style-image屬性做到:ulli{list-style-image:url(xxx.gif)}只需要簡單地使用一個(gè)url()值,就可以使用圖像作為標(biāo)志。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔4〕CSS列表3〕列表標(biāo)志位置CSS2.1可以確定標(biāo)志出現(xiàn)在列表項(xiàng)內(nèi)容之外還是內(nèi)容內(nèi)部。這是利用list-style-position完成的。規(guī)定列表中列表工程標(biāo)記的位置:ul{list-style-position:inside;}值描述inside列表項(xiàng)目標(biāo)記放置在文本以內(nèi),且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。outside默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外,且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。inherit規(guī)定應(yīng)該從父元素繼承
list-style-position屬性的值。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格1〕表格邊框如需在CSS中設(shè)置表格邊框,請(qǐng)使用border屬性。下面的例子為table、th以及td設(shè)置了藍(lán)色邊框:
table,th,td{border:1pxsolidblue;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格2〕表格寬度和高度通過width和height屬性定義表格的寬度和高度。下面的例子將表格寬度設(shè)置為100%,同時(shí)將th元素的高度設(shè)置為50px:
table{width:100%;}th{height:50px;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格3〕表格文本對(duì)齊text-align和vertical-align屬性設(shè)置表格中文本的對(duì)齊方式。text-align屬性設(shè)置水平對(duì)齊方式,比方左對(duì)齊、右對(duì)齊或者居中:
td{text-align:right;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格3〕表格文本對(duì)齊vertical-align屬性設(shè)置垂直對(duì)齊方式,比方頂部對(duì)齊、底部對(duì)齊或居中對(duì)齊:td{height:50px;vertical-align:bottom;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格4〕表格內(nèi)邊距如需控制表格中內(nèi)容與邊框的距離,請(qǐng)為td和th元素設(shè)置padding屬性:td{padding:15px;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)7、CSS樣式〔5〕CSS表格5〕表格顏色下面的例子設(shè)置邊框的顏色,以及th元素的文本和背景顏色:table,td,th{border:1pxsolidgreen;}th{background-color:green;color:white;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSSDIV+CSS是網(wǎng)站標(biāo)準(zhǔn)〔或稱“WEB標(biāo)準(zhǔn)〞〕中常用的術(shù)語之一,通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格〔table〕定位方式的區(qū)別,因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中,不再使用表格定位技術(shù),而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。
用div盒模型結(jié)構(gòu)給各局部內(nèi)容劃分到不同的區(qū)塊,然后用css來定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔1〕DIV元素DIV元素是用來為HTML文檔內(nèi)大塊〔block-level〕的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的,其中所包含元素的特性由DIV標(biāo)簽的屬性來控制,或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔2〕頁面布局與規(guī)劃頁面的布局,大致分為以下幾個(gè)局部:1〕頂部局部,其中又包括了LOGO、MENU和一幅Banner圖片;2〕內(nèi)容局部又可分為側(cè)邊欄、主體內(nèi)容;3〕底部,包括一些版權(quán)信息。電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔3〕DIV結(jié)構(gòu)
圖2DIV結(jié)構(gòu)圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔3〕DIV結(jié)構(gòu)│body{}/*這是一個(gè)HTML元素,具體我就不說明了*/
└#Container{}/*頁面層容器*/
├#Header{}/*頁面頭部*/
├#PageBody{}/*頁面主體*/
│├#Sidebar{}/*側(cè)邊欄*/
│└#MainBody{}/*主體內(nèi)容*/
└#Footer{}/*頁面底部*/
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔4〕寫入整體層結(jié)構(gòu)與CSS<divid="container"><!--頁面層容器--><divid="Header"><!--頁面頭部--></div><divid="PageBody"><!--頁面主體--><divid="Sidebar"><!--側(cè)邊欄--></div><divid="MainBody"><!--主體內(nèi)容--></div></div><divid="Footer"><!--頁面底部--></div></div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》二、關(guān)鍵技術(shù)8、DIV+CSS〔4〕寫入整體層結(jié)構(gòu)與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}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作1、創(chuàng)立層結(jié)構(gòu)<body><divid="Header"><!--頁面頭部--></div><divid="PageBody"><!--頁面主體--><divid="homeNav"><!--側(cè)邊欄--> <div>首頁</div><div>學(xué)院概況</div>
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作1、創(chuàng)立層結(jié)構(gòu)<div>師資隊(duì)伍</div><div>教學(xué)科研</div><div>黨建工作</div><div>實(shí)訓(xùn)基地</div><div>學(xué)生園地</div><div>招生就業(yè)</div></div>
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作1、創(chuàng)立層結(jié)構(gòu)<divclass="even"><h1><ahref="#">招生就業(yè)</a></h1></div></div><divid="MainBody"><!--主體內(nèi)容--></div></div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作1、創(chuàng)立層結(jié)構(gòu)<divid="MainBody“></div></div><divid="Footer"><!--頁面底部--></div></body>
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔1〕設(shè)置頁面樣式body{margin:0px;background-image:url(imgs/body.jpg);font-family:"微軟雅黑";}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔2〕設(shè)置頁面頭部樣式<divid="Header"> <divclass="logo"></div></div>#Header{margin:0pxauto;background-image:url(imgs/head-background.png);}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔2〕設(shè)置頁面頭部樣式#Header.logo{width:1000px;height:226px;margin:0pxauto;background-image:url(imgs/head-logo1.png);}
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔2〕設(shè)置頁面頭部樣式
圖3頁面和頭部樣式設(shè)置效果圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置頁面主體樣式#PageBody{margin:auto;padding:020px;width:1000px;background-image:url(imgs/body-background.png);overflow:hidden;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置頁面主體樣式
圖4頁面主體樣式設(shè)置效果圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式首先為菜單項(xiàng)設(shè)置h1樣式和鏈接,每間隔一個(gè)菜單項(xiàng)添加class=“even〞:<div><h1><ahref=“#">首頁</a></h1></div><divclass="even"><h1><ahref=“#">學(xué)院概況</a></h1></div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式然后設(shè)置相應(yīng)CSS樣式:#homeNav{ float:left; width:149px;overflow:hidden;z-index:1000;border-right:1pxsolid#999999;background-color:#FFFFFF;box-shadow:#6660px0px10px;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式#homeNavdiv{width:149px;height:60px;position:relative;}#homeNav.even{background-color:#eff4f7;}
電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式#homeNavdiva{text-decoration:none;font-weight:bold;color:#666666;}#homeNavdiva:hover{color:#0c7cbe;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式#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;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔3〕設(shè)置側(cè)邊欄〔導(dǎo)航〕樣式圖5導(dǎo)航樣式設(shè)置效果圖電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置1〕添加層結(jié)構(gòu)和內(nèi)容<divid="MainBody"><!--主體內(nèi)容--> <divid="home"><divclass="imgs"> </div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置1〕添加層結(jié)構(gòu)和內(nèi)容<divclass="news"><ahref="#"><divclass="title"></div></a><ul><li><ahref="#"title="我校師生為社區(qū)居民免費(fèi)修家電"><divclass="text">我校師生為社區(qū)居民免費(fèi)修家電</div><divclass="time">2023-06-05</div></a></li>……</ul></div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置1〕添加層結(jié)構(gòu)和內(nèi)容<divclass="notice"><ahref="#"><divclass="title"></div></a><ul><li><ahref="#"title="關(guān)于舉辦“端午詩會(huì)〞的通知"><divclass="text">關(guān)于舉辦“端午詩會(huì)〞的通知</div><divclass="time">2023-04-20</div></a></li>……</ul></div></div></div>電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置2〕樣式設(shè)置#MainBody{ float:right;width:850px;}#home{padding-left:1px;}#home.imgs{width:850px; height:300px;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置2〕樣式設(shè)置#home.news,#home.notice{width:410px;float:left;padding-left:5px;font-family:"宋體";}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置2〕樣式設(shè)置#home.news.title{width:350px;height:40px;background:url(imgs/home-news.png);cursor:pointer;}電子信息工程學(xué)院網(wǎng)頁布局《WEB編程根底》三、網(wǎng)頁布局制作2、添加內(nèi)容、設(shè)置樣式〔4〕主體內(nèi)容設(shè)置2〕樣式設(shè)置#
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度個(gè)人旅游資金過橋借款協(xié)議2篇
- 2025年物流企業(yè)產(chǎn)品研發(fā)與技術(shù)支持合同3篇
- 二零二五版門衛(wèi)人員勞動(dòng)合同及職業(yè)素養(yǎng)提升協(xié)議4篇
- 2025年物業(yè)管理公司風(fēng)險(xiǎn)管理與保險(xiǎn)采購合同3篇
- 2025年度個(gè)人信用卡透支額度調(diào)整協(xié)議3篇
- 2025年金融產(chǎn)品銷售擔(dān)保合同書規(guī)范文本2篇
- 建設(shè)公司合同范本(2篇)
- 2025年度園林苗木繁育與推廣合作協(xié)議4篇
- 2024年重慶高職分類考試《電工基礎(chǔ)》備考試題庫大全-下(判斷、填空題)
- 二零二五版酒店客房家具更換分期支付合同3篇
- 國家自然科學(xué)基金項(xiàng)目申請(qǐng)書
- 電力電纜故障分析報(bào)告
- 中國電信網(wǎng)絡(luò)資源管理系統(tǒng)介紹
- 2024年浙江首考高考選考技術(shù)試卷試題真題(答案詳解)
- 《品牌形象設(shè)計(jì)》課件
- 倉庫管理基礎(chǔ)知識(shí)培訓(xùn)課件1
- 藥品的收貨與驗(yàn)收培訓(xùn)課件
- GH-T 1388-2022 脫水大蒜標(biāo)準(zhǔn)規(guī)范
- 高中英語人教版必修第一二冊語境記單詞清單
- 政府機(jī)關(guān)保潔服務(wù)投標(biāo)方案(技術(shù)方案)
- HIV感染者合并慢性腎病的治療指南
評(píng)論
0/150
提交評(píng)論