css精品分享課件_第1頁
css精品分享課件_第2頁
css精品分享課件_第3頁
css精品分享課件_第4頁
css精品分享課件_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

單元二：搭建風(fēng)格統(tǒng)一的Web站點(diǎn)

信息技術(shù)應(yīng)用系

懷艾芹目錄CSS樣式控制使用DIV+CSS布局網(wǎng)頁母版頁

2.1.1CSS的基本概念CSS的英文名為CascadingStyleSheet，譯成中文的意思為層疊樣式表。樣式就是格式，對(duì)于網(wǎng)頁來說，像網(wǎng)頁顯示的文字的大小、顏色以及圖片位置以及段落、列表等，都是網(wǎng)頁顯示的樣式。層疊就是指當(dāng)HTML文件引用多個(gè)CSS樣式時(shí)，如果CSS的定義發(fā)生沖突，瀏覽器將依據(jù)層次的先后順序來應(yīng)用樣式，如果不考慮樣式的優(yōu)先級(jí)時(shí)，一般會(huì)遵循“最近優(yōu)先原則”。CSS和HTML一樣，也是一種標(biāo)記語言，代碼也很簡單，也需要通過濟(jì)覽器解釋執(zhí)行，也可用任何任何文本編輯器來編寫，其文件的擴(kuò)展名為.css。CSS基本語法結(jié)構(gòu)選擇器{樣式屬性：取值；樣式屬性：取值；…}

2.1.1CSS的基本概念語法說明1.CSS語法結(jié)構(gòu)僅由選擇器、樣式屬性和值三部分組成。

2.選擇器表示希望進(jìn)行格式化的元素，包括多種形式，所有的HTML標(biāo)記都可以作為選擇器。例：body{color:red}3.屬性和值之間要用冒號(hào)隔開。

4.如果屬性的值由多個(gè)單詞組成，并用單詞之間有空格，必須給值加上引號(hào)。例：p{font-family:”CourierNew”}5.如果需要對(duì)一個(gè)選擇器指定多個(gè)屬性時(shí)，用分號(hào)將屬性分開。例：p{text-align:center;color:red}2.1.2CSS的選擇器-標(biāo)記選擇器標(biāo)記選擇器(任意的HTML標(biāo)記)<程序2-1>

<html><head><styletype="text/css">p{color:red;font-size:3cm;}</style></head><body><p>aaaaaaaaaaaa</p><p>bbbbbbbbbbb</p></body>

注意：其樣式僅僅作用在選擇器指定的HTML元素上。2.1.2CSS的選擇器-類別選擇器類別選擇器不同的元素顯示相同的樣式，可使用類別選擇器實(shí)現(xiàn)。類選擇器的名稱可自定義，以點(diǎn)作為開頭，點(diǎn)后不能以數(shù)字開頭。任何一個(gè)類選擇器都適用于所有的HTML標(biāo)記，只需要將HTML標(biāo)記的類屬性值設(shè)為類選擇器名稱即可。<程序2-2><head><styletype="text/css">.one{font-family:楷體_GB2312;color:red;}</style></head><body><pclass="one">這是第1行文本</p><h3class="one">這是一個(gè)3級(jí)標(biāo)題</h3><divclass="one">這是一個(gè)div塊</div></body>2.1.2CSS的選擇器-類別選擇器類別選擇器

在HTML標(biāo)記中，還可以同時(shí)給一個(gè)標(biāo)記運(yùn)用多個(gè)class類別選擇器，從而將多個(gè)類別的樣式風(fēng)格同時(shí)運(yùn)用到一個(gè)標(biāo)記中。<程序2-3><head><styletype="text/css">.blue{color:blue;}.big{font-size:22px;}</style></head><body><h4>一種都不用</h4><h4class="blue">兩種class，只使用blue</h4><h4class="big">兩種class，只使用big</h4><h4class="bluebig">兩種class，同時(shí)使用blue和big</h4></body></html>2.1.2CSS的選擇器-ID選擇器ID選擇器ID選擇器的使用方法跟class選擇器基本相同，不同之處在于ID選擇器只能在HTML頁面中使用一次，因此其針對(duì)性更強(qiáng)。在HTML標(biāo)記中只需要利用id屬性，就可以直接調(diào)用CSS中的ID選擇器。ID選擇器命名時(shí)要在名字前面加“#”，命名時(shí)不能以數(shù)字開頭。<程序2-4><head><styletype="text/css">p{color:blue;font-size:18px;}#spec{color:red;font-size:23px;}</style></head><body><p>這是第一段文本。</p><p>這是第二段文本。</p><pid="spec">這是第三段文本，它的樣式有點(diǎn)特殊。</p><p>這是第四段文本。</p></body></html>

注意：如果一個(gè)樣式只被一個(gè)標(biāo)記用，作成ID；如果要被多個(gè)標(biāo)記用，作成class2.1.2CSS的選擇器-通配符選擇器通配符選擇器如果希望所有的html元素都符合某一種樣式，可以使用通配符選擇符。例：*{margin:0px;padding:0px;}讓所有的html元素的外邊距和內(nèi)邊距的值默認(rèn)為0;<程序2-5>

<html><head><styletype="text/css">*{margin:0px;padding:0px;}</style></head><body><p>這是一段文字</p></body></html>2.1.3復(fù)合選擇器-交集選擇器交集選擇器前面介紹了3種基本的選擇器，以這3種基本選擇器為基礎(chǔ)，通過組合，可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能。復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過不同方式連接而成的選擇器。交集選擇器由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。其中第1個(gè)必須是標(biāo)記選擇器，第2個(gè)必須是類別選擇器或者是ID選擇器。這兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。這種方式構(gòu)成的選擇器，將選中同時(shí)滿足前后二者定義的元素，也就是前者所定義的標(biāo)記類型，并且指定了后者的類別或者id的元素。2.1.3復(fù)合選擇器-交集選擇器<程序2-6><html><head><styletype="text/css">p{color:blue;}p.spec{color:red;}.spec{color:green;}</style></head><body><p>普通段落文本（藍(lán)色）</p><h3>普通標(biāo)題文本（黑色）</h3><pclass="spec">指定了.spec類別的段落文本（紅色）</p><h3class="spec">指定了.spec類別標(biāo)題文本（綠色）</h3></body></html>2.1.3復(fù)合選擇器-并集選擇器并集選擇器多個(gè)元素如果使用同樣的樣式規(guī)則，可以使用并集選擇器，這樣可以減少重復(fù)定義樣式。

任何形式的選擇器都可以作為并集選擇器的一部分。

多個(gè)選擇器中間用“，”隔開。

例：

div,a,h1,.one,#two{color:red;font-size:2cm;background:green}2.1.3復(fù)合選擇器-并集選擇器<程序2-7><html><head><styletype="text/css">div,a,h1,.one,#two{color:red;font-size:2cm;background:green;}</style></head><body><div>dddddddddddddd</div><h1>hhhhhhhhhhhh</h1><ahref="#">超鏈接</a><pclass="one">p1p1pp1p1p1p1p1p1</p><pid="two">p2p2p2pp2p2p2p</p></body></html>

2.1.3復(fù)合選擇器-后代選擇器后代選擇器是一個(gè)用空格隔開的兩個(gè)或更多的單元選擇符組成的字符串例：pem{color:red;font-size:2cm;background:green}表示段落（p）中的強(qiáng)調(diào)文本（em）是紅色文字，字號(hào)為2cm,背景色是綠色。.style1span{color:red;font-style:italic;}2.1.3復(fù)合選擇器-后代選擇器<程序2-8>

<html><head><title>后代選擇器示例1</title><styletype="text/css">pem{color:red;font-size:2cm;background:green}</style></head><body><p>ppppppppppppppppppppp</p><em>ememememememememmeme</em><p><em>ememememememememmeme</em></p></body></html>2.1.3復(fù)合選擇器-后代選擇器<程序2-9><html><head><title>后代選擇器示例2</title><styletype="text/css">.style1{font_size:20px;color:black;background-color:silver;}.style1span{color:red;font-style:italic;}</style></head><body><pclass=“style1”>這是一則非常<span>重<b>import</b>要</span>的新聞</p></body></html>注意：后代選擇器產(chǎn)生的影響不僅限于元素的“直接后代”，而且會(huì)影響到它的“各級(jí)后代”。

2.1.4選擇器的注意事項(xiàng)一個(gè)html元素可以同時(shí)被id和class修飾，id選擇器的優(yōu)先級(jí)大于類選擇器。一個(gè)html元素最多可被一個(gè)id選擇器修飾，但可以被多個(gè)類選擇器修飾。

注意：1.類選擇符之間用空格隔開。

2.當(dāng)class選擇器發(fā)生沖突時(shí)，以在CSS文件中，最后出現(xiàn)的那個(gè)class選擇器樣式為準(zhǔn)。2.1.4選擇器的注意事項(xiàng)<程序2-10><html><head><styletype="text/css">.style1{font-size:20px;background-color:pink;color:black;}#style2{background-color:silver;font-style:italic;}</style></head><body><spanid="style2"class="style1">這是一則重要的新聞</span></body></html>2.1.4選擇器的注意事項(xiàng)<程序2-11><html><head><styletype="text/css">.style2{background-color:silver;font-style:italic;}.style1{font-size:20px;background-color:pink;color:black;}</style></head><body><spanclass="style1style2">這是一則重要的新聞</span></body></html>2.1.5選擇器的優(yōu)先級(jí)在運(yùn)用選擇器的過程中，可能會(huì)遇到一個(gè)元素由不同選擇器定義的情況，這時(shí)候就要考慮到選擇器的優(yōu)先級(jí)，id選擇器>class選擇器>html選擇器>通配符選擇器，！important語法主要用來提升樣式規(guī)則的應(yīng)用優(yōu)先級(jí)。只要使用了!important語法聲明，瀏覽器就會(huì)優(yōu)先選擇它聲明的樣式來顯示。<html><head><styletype="text/css">p{color:red}.blue{color:blue}#id1{color:yellow}</style></head><body><pid="id1"class="blue">注意文字的顏色</p></body></html>

注意：如果將樣式p{color:red}改為p{color:red!important}，則文字會(huì)顯示為紅色

2.1.6在網(wǎng)頁中添加CSS的方法在網(wǎng)頁中可以使用四種不同的方法，將CSS樣式表添加到網(wǎng)頁里。行內(nèi)樣式內(nèi)嵌式鏈接式導(dǎo)入樣式2.1.6在網(wǎng)頁中添加CSS的方法-行內(nèi)樣式表行內(nèi)樣式表

是將CSS樣式定義在HTML標(biāo)記內(nèi)的，這是最簡單的樣式定義方法?；菊Z法：<標(biāo)記style="樣式屬性:屬性值;樣式屬性:屬性值;…">語法說明：標(biāo)記：HTML標(biāo)記，如body、table、p等；標(biāo)記的style定義只能影響標(biāo)記本身；style的多個(gè)屬性之間用分號(hào)分割；標(biāo)記本身定義的style優(yōu)先于其他所有樣式定義。注意：該方法的好處是比較方便，弊端是如果多個(gè)標(biāo)簽樣式一樣的話，寫的次數(shù)太多。2.1.6在網(wǎng)頁中添加CSS的方法-行內(nèi)樣式表<程序2-12><html><head><title>行內(nèi)樣式表</title></head><body><pstyle="color:red;font-size:2cm;background:green">ppppppppppppppppp</p><divstyle="color:red;font-size:2cm;background:green">ddddddddddddddd</div><h1style="color:red;font-size:2cm;background:green">hhhhhhhhhhhhhhhh</h1></body></html>2.1.6

在網(wǎng)頁中添加CSS的方法-內(nèi)嵌式樣式表內(nèi)嵌式樣式表是通過<style>標(biāo)記把樣式表的內(nèi)容直接定義在HTML文件的<head>標(biāo)記內(nèi)，然后在整個(gè)HTML文件中直接調(diào)用使用該樣式的樣式?；菊Z法<styletype="text/css"><!--選擇符1（樣式屬性：屬性值；樣式屬性：屬性值；……）選擇符2（樣式屬性：屬性值；樣式屬性：屬性值；……）選擇符3（樣式屬性：屬性值；樣式屬性：屬性值；……）……選擇符n（樣式屬性：屬性值；樣式屬性：屬性值；……）--></style>注意：好處是可讓整個(gè)網(wǎng)頁都能使用樣式表中定義的樣式。2.1.6在網(wǎng)頁中添加CSS的方法-內(nèi)嵌式樣式表語法說明：<style>元素是用來說明所要定義的樣式，type屬性是指style元素以CSS的語法定義；<!--……-->隱藏標(biāo)記：避免了因?yàn)g覽器不支持CSS而導(dǎo)致錯(cuò)誤，加上這些標(biāo)記后，不支持CSS的瀏覽器，會(huì)自動(dòng)跳過此段內(nèi)容，避免一些錯(cuò)誤；選擇符1……選擇符n：選擇符也就是樣式的名稱，所有的HTML標(biāo)記都可以作為選擇符；樣式屬性主要是關(guān)于對(duì)選擇符格式化顯示風(fēng)格的樣式屬性名稱；屬性值設(shè)置對(duì)應(yīng)樣式屬性的值。2.1.6在網(wǎng)頁中添加CSS的方法-內(nèi)嵌式樣式表<程序2-13><html><head><title>內(nèi)部樣式表</title><styletype="text/css"><!--.one{color:red;font-size:2cm;background:green;}--></style></head><body><pclass="one">ppppppppppppppppppp</p><divclass="one">dddddddddddddddddddd</d><h4class="one">hhhhhhhhhhhhhhhhhhhh</h4></body></html>2.1.6在網(wǎng)頁中添加CSS的方法-鏈接式樣式表鏈接式樣式表要先把樣式表保存為一個(gè)單獨(dú)的文件，然后在HTML文件中使用<link>標(biāo)記鏈接，<link>標(biāo)記必須放在HTML代碼的<head>區(qū)域內(nèi)。基本語法：<linkrel="stylesheet"type="text/css"href="外部樣式表的文件名稱">語法說明：鏈接外部樣式表時(shí)，不需要使用style元素，只需直接用<link>標(biāo)記放在<head>標(biāo)記中就可以了；rel=“stylesheet”是指在HTML文件中使用的是外部樣式表；type=“text/css”是指該文件的類型是樣式表文件；Href表示樣式表文件的地址，可以是絕對(duì)地址或相對(duì)地址?？梢酝瑫r(shí)鏈接幾個(gè)樣式表，靠后的樣式表優(yōu)先于靠前的樣式表。注意：整個(gè)網(wǎng)站中的每個(gè)網(wǎng)頁都可以使有該樣式。

2.1.6在網(wǎng)頁中添加CSS的方法-鏈接式樣式表<程序2-14>1.css文件.one{color:red;font-size:2cm;background:green}2.html文件<html><head><title>鏈接外部樣式表舉例</title><linkhref="1.css“rel="stylesheet"type="text/css“/></head><body><pclass="one">ppppppppppppppppppppp</p><divclass="one">ddddddddddddddddddd</d><h4class="one">hhhhhhhhhhhhhhhhhhhh</h4></body></html>

2.1.6在網(wǎng)頁中添加CSS的方法-導(dǎo)入式樣式表導(dǎo)入式樣式表是指在內(nèi)嵌式樣式表的<style>區(qū)域里引用一個(gè)外部的樣式表文件，導(dǎo)入時(shí)用@import?；菊Z法：<styletype=“text/css”>@importurl(外部樣式表文件地址);………</style>語法說明：import語句后面的“；”是不可省略的。外部樣式表文件的文件擴(kuò)展名必須為.css。樣式表文件的地址，可以是絕對(duì)地址或相對(duì)地址。

2.1.6在網(wǎng)頁中添加CSS的方法-導(dǎo)入式樣式表

<程序2-15><html><head>導(dǎo)入外部樣式表舉例</title><styletype="text/css">@importurl(1.css);</style></head><body><pclass="one">pppppppppppppppp</p><divclass="one">ddddddddddddddddddd</div><h1class="one">hhhhhhhhhhhhhhhhhhhhhh</h1></body></html>2.1.7各種方式優(yōu)先級(jí)問題前面介紹了CSS控制頁面的4種不同方法，各種方法都有其自身的特點(diǎn)，這4種方法如果同時(shí)運(yùn)用到同一個(gè)HTML文件的標(biāo)記上，就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。如果我們把導(dǎo)入式和鏈接式統(tǒng)稱為外部式，那么優(yōu)先級(jí)規(guī)則應(yīng)該寫為：

1.行內(nèi)式>嵌入式>外部樣式

2.外部樣式中，出現(xiàn)在后面的優(yōu)先級(jí)高于出現(xiàn)在前面的<程序2-16><html><head><styletype="text/css">p{color:blue;}@importurl(red.css);</style></head><body><pstyle="color:gray">觀察文字顏色</p></body></html>2.1.7各種方式優(yōu)先級(jí)問題<程序2-17><html><head><styletype="text/css">@importurl(red.css);</style><linkhref="green.css"type="text/css"rel="stylesheet"></head><body><p>觀察文字顏色</p>//文字顏色為綠色</body></html>注意：這兩種樣式表誰放在后面，就以誰的樣式為準(zhǔn)。2.2使用DIV+CSS布局網(wǎng)頁

DIV+CSS排版是一種很新的排版理念，首先要將頁面使用<div>整體劃分成幾個(gè)板塊，然后對(duì)各個(gè)板塊使用CSS進(jìn)行定位和樣式設(shè)置，最后在各個(gè)板塊中添加相應(yīng)的內(nèi)容。制作如下圖所示樣式的網(wǎng)頁2.2使用DIV+CSS布局網(wǎng)頁

HTML代碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><linkrel="stylesheet"type="text/css"href="sohu.css"/><title>無標(biāo)題文檔</title></head><body><divclass="top"><divclass="login">登錄部分</div><divclass="indexpage">設(shè)為首頁</div><divclass="myhref">鏈接</div></div><divclass="logo"><imgsrc="logo.jpg"/></div><divclass="navi">導(dǎo)航欄</div>2.2使用DIV+CSS布局網(wǎng)頁

<divclass="ad"><divclass="stud">招生廣告</div><divclass="ad2">廣告2</div><divclass="house">房地產(chǎn)廣告</div><divclass="picad"><tableheight=100%valign="center"align="center"><tr><td><imgsrc="13.jpg"/></td></tr></table></div></div></body></html>css樣式body{width:950px;margin:5pxauto0pxauto;/*background-color:pink;*/font-size:12px;}.top{width:950px;height:22px;/*background-color:green;*/}2.2使用DIV+CSS布局網(wǎng)頁css樣式body{width:950px;margin:5pxauto0pxauto;/*background-color:pink;*/font-size:12px;}.top{width:950px;height:22px;/*background-color:green;*/}.login{width:416px;height:22px;background-color:#66FFCC;float:left;}.indexpage{width:105px;height:22px;background-color:#FFFF99;float:left;margin-left:80px;}.myhref{width:250px;height:22px;float:right;background-color:#66FFCC;}.logo{width:137px;height:68px;background-color:yellow;float:left;margin-top:5px;}.logoimg{width:137px;height:68px;}.navi{width:807px;height:68px;background-color:#7ce574;float:left;margin-left:6px;margin-top:5px;}.ad{width:950px;height:212px;/*background-color:pink;*/margin-top:5px;float:left;border:1pxsolidsilver;}2.2使用DIV+CSS布局網(wǎng)頁css樣式.stud{width:130px;height:196px;background-color:#FC7E8C;float:left;margin-top:5px;margin-left:2px;}.ad2{width:431px;height:196px;background-color:purple;float:left;margin:5px0px0px14px;}.house{width:170px;height:196px;background-color:#7ce574;float:left;boder:1pxsolidpink;margin:5px0px0px14px;}.picad{height:212px;width:180px;float:right;/*background-color:#7ce574;*/border-left:1pxsolidsilver;}.picadimg{height:200px;width:170px;}

2.3母版頁-MasterPage

網(wǎng)站的布局通常是統(tǒng)一的，上面是Logo、菜單條、下面是公司地址、版權(quán)聲明等。如果每個(gè)頁面都重復(fù)做這些功能的話，重復(fù)性勞動(dòng)、一旦修改那么每個(gè)頁面都要修改。ASP.NET使用母版（MasterPage)技術(shù)來解決這個(gè)問題。2.3母版頁-MasterPage

MasterPage是這樣一種技術(shù)，把頁面布局畫好，在變化的內(nèi)容部分“留空”，留空的部分由子頁面填充內(nèi)容，這樣子頁面只要填空就行，不用重復(fù)設(shè)計(jì)頁面結(jié)構(gòu)，一旦要修改頁面結(jié)構(gòu)修改母版頁就可以，這樣所有頁面都會(huì)變化。母版頁“挖坑”，具體頁面“填坑”。母版頁、具體內(nèi)容頁中幾乎可以使用所有的普通WebForm頁面能夠使用的技術(shù)。添加一個(gè)母版頁：使用<asp:ContentPlaceHolder>挖坑，新建的母版頁已經(jīng)自動(dòng)設(shè)置了兩個(gè)ContentPlaceHolder，還可以添加更多的ContentPlaceHolder。

創(chuàng)建使用母版頁的具體頁面：使用母版頁的具體頁面和普通aspx頁面不同的是，Page指令用MasterPageFile屬性表示頁面使用哪個(gè)母版頁，頁面不包含html等內(nèi)容，只定義了<asp:Content>這些填坑的內(nèi)容。<asp:Content>就是用來在具體頁面中對(duì)母版頁進(jìn)行填坑的，ContentPlaceHolderID為這個(gè)Content要填母版頁中的哪個(gè)坑，對(duì)應(yīng)母版頁中的ContentPlaceHolder的id。2.3母版頁-MasterPage例：創(chuàng)建新聞發(fā)布系統(tǒng)母版頁2.3母版頁-MasterPage例：創(chuàng)建新聞發(fā)布系統(tǒng)母版頁common.master：<formid="form1"runat="server"><divid="top"><imgsrc="image/niunanlogo.jpg"/><imgsrc="image/tg029logo.gif"/></div><divid="search">搜索條件：<asp:RadioButtonID="rbtnTitle"GroupName="con"Text="標(biāo)題"

Checked="true"runat="server"/><asp:RadioButtonID="rbtnContent"GroupName="con"runat="server"Text="內(nèi)容"

/><asp:TextBoxID="txtKey"CssClass="txtkey"runat="server"></asp:TextBox>

2.3母版頁-MasterPage例：創(chuàng)建新聞發(fā)布系統(tǒng)母版頁common.master：<asp:ImageButtonID="ibtnSearch"ImageUrl="~/image/search.gif"runat="server"/></div><divid="main"><asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server"></asp:ContentPlaceHolder></div><divid="footer">版權(quán)所有©<ahref="#">張三</a>&<ahref=""target="_blank">天津機(jī)電職業(yè)技術(shù)學(xué)院</a></div></form>2.3母版頁-MasterPage例：創(chuàng)建新聞發(fā)布系統(tǒng)母版頁

Index.aspx：<asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"><divid="category"class="commonfrm"><h4>新聞分類</h4><ul><li><ahref="#">首頁</a></li><li><ahref="#">體育新聞</a></li><li><ahref="#">財(cái)經(jīng)新聞</a></li><li><ahref="#">社會(huì)新</a></li></ul></div><divid="content"><divid="newNews"class="commonfrm"><h4>最新新聞</h4>

2.3母版頁-MasterPageIndex.aspx：<table><tr><thclass="th_category">所屬類別</th><th>新聞標(biāo)題</th><thclass="th_time">發(fā)布時(shí)間</th></tr><tr><td><ahref="#"class="td_category">[體育新聞]</a></td><td><ahref="#">123456789</a></td><td>2016-3-8</td></tr><tr><td><ahref="#"class="td_category">[體育新聞]</a></td><td><ahref="#">123456789</a></td><td>2016-3-8</td></tr><tr><td><ahref="#"class="td_category">[體育新聞]</a></td><td><ahref="#">123456789</a></td><td>2016-3-8</td></tr>……………………….</table></div>

2.3母版頁-MasterPageIndex.aspx：<divid="hotnews"class="commonfrm"><h4>熱點(diǎn)新聞</h4><table><tr><thclass="th_category">所屬類別</th><th>新聞標(biāo)題</th><thclass="th_time">發(fā)布時(shí)間</th></tr><tr><td><ahref="#"class="td_category">[體育新聞]</a></td><td><ahref="#">123456789</a></td><td>2016-3-8</td></tr>…………</table></div></div></asp:Content>2.3母版頁-MasterPagecommon.cs：*{margin:0px;padding:0px;}body{font-size:14px;}#top,#search,#main,#footer{margin:10pxauto;width:760px;}#top{height:120px;}#topimg{float:left;}#search{height:27px;clear:left;}.txtkey{border:1pxsolid#9ccfff;background-color:#eff7ff; height:27px;line-height:27px; width:480px;font-size:14px;}#category{width:180px;margin-right:5px;height:380px;border:1pxsolid#dedfde;float:left;margin-bottom:10px;}ulli{list-style-type:none;}li{text-align:center;margin:20px;}2.3母版頁-MasterPagecommon.cs：lia:link,lia:visited{color:#00f;text-decoration:underline;font-weight:bold;}lia:hover{color:#f00;}#content{border:1pxsolid#dedfde;height:380px;width:570px;float:left;margin-bottom:10px;}.commonfrmh4{ color:#fff;background-color:#7baeef; height:26px;padding-left:10px; padding-top:5px;font-size:14px;}.commonfrmtable{ width:100%;text-align:center;border-collapse:collapse;}2.3母版頁-MasterPagecommon.cs：.commonfrmtabletrth,.commonfrmtabletrtd{padding:5px;}.commonfrm.th_category{width:100px;}.commonfrm.th_time{width:150px;}.commonfrm.td_category{color:#999;}#footer{text-align:center;border-top:1pxsolid#d6d7d6;padding-top:10px;clear:left;}input{vertical-align:middle;}a:link,a:visited{color:#000;text-decoration:none;}a:hover{color:#00f;text-decoration:underline;}2.3母版頁-MasterPage

具體頁面可以對(duì)母版頁填坑也可以不填坑，如果不填坑則顯示<asp:ContentPlaceHolder>中定義的內(nèi)容。

在母版頁中使用超鏈接、圖片地址的時(shí)候需要注意路徑問題，在母版頁中的“runat=server”控件的鏈接地址，圖片地址等會(huì)被解析為相對(duì)于母版頁的地址，而客戶端HTML控件ASP.NET引擎是直接輸出的，因此是解析為相對(duì)于具體頁面的地址。建議使用服務(wù)端控件、如果不能使用服務(wù)器控件，那么可以在aspx頁面中調(diào)用ResolveClientUrl進(jìn)行虛擬路徑的轉(zhuǎn)換。

每個(gè)具體頁面可以設(shè)置不同的標(biāo)題，只要在具體頁面的@page中設(shè)置Title屬性即可。

例：圖片路徑問題

解決方案一：使用服務(wù)器控件<asp:ImageID="Image1"ImageUrl="~/image/niunanlogo.jp

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論