asp.net基礎學習之前端頁面配置_實用技巧

前端就是給人看的介面，後台人員不僅要知道後台代碼的編寫，更要知道前端的布局。有時候要比前端人員知道的還要多，因為有可能前端人員是個21天精通ps的大師級人物。這時候你可以自己寫前端。

1.CSS
 •CSS(Cascading Style
Sheet)，中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。就文法而言，
 •CSS是一種容易學習的語言。它的“文法”僅由幾個概念組成，使得它相當容易入門。CSS的痛點在於所有主流瀏覽器呈現頁面的方式。儘管實際上每種瀏覽器都能夠理解CSS，但當根據CSS標準顯示頁面時，它們都有各自的“怪癖”。
 •CSS規定了兩種定義樣式的方法，分別是內聯式和級聯式。
 •直接將樣式控制放在單個HTML元素內，稱為內聯式或行內樣式。該樣式通過style屬性來控制每個元素的外觀，直觀但是很繁瑣。除非具有相同樣式的元素較少，否則很少採用。
在網頁的head部分定義或匯入的樣式，稱為級聯式樣式。該樣式可以實現將網頁結構和表現分離，這樣，當修改某些元素的樣式時，只需要修改head部分定義或引入的樣式，該網頁內所有具有相同樣式的元素都會自動應用新的樣式。
 •級聯式樣式又可以分為兩種方式：內嵌式和連結式。
 •在head部分直接實現的CSS樣式，稱為內嵌式。這種CSS一般位於HTML檔案的頭部，即在與標籤內，並且以結束。
採用內嵌式比內聯式方便了很多，body內的代碼也相對簡潔，修改某個元素的樣式時只需修改head內的代碼即可。
 •在head部分通過匯入以副檔名為.css的檔案來實現CSS樣式，稱為連結式。利用這種方法在網頁中可以調用已經定義好的樣式表來實現樣式表的應用，定義好的樣式表通常單獨以檔案的形式存放在網站目錄中。這種方法實現了將網頁結構和表現的徹底分離，最適合大型網站的CSS樣式定義。
 •如果某個元素既引用了連結樣式檔案中定義的樣式，又在head部分定義了新的樣式，或者在元素內部通過style屬性定義了新的樣式，那麼該標記元素最終呈現的效果會是什麼樣呢？這就是樣式嵌套中的衝突問題，瀏覽器解決這種問題的方法就是一旦發現樣式衝突，則通過“就近使用”原則，而不衝突的樣式則通過順序組合後形成最終樣式進行顯示。
 •一般情況下，在樣式表(.css)檔案中定義適合大多數網頁公用的樣式，在網頁內部採用內嵌式定義該頁面特有的樣式。
 •屬性是元素的一部分，可通過樣式表修改。CSS規範定義了一個長屬性列表，但在大多數Web網站中不會用到所有項。
下面介紹這幾種不同的方式來設定: 

<h1 style="color:blue;">CSS樣式</h1><style>  h1 {   color:red  } </style>#h1 {   color:gray  }<h1 id="h1">CSS樣式</h1>.h1 {   color:gray  }<h1 class="h1">CSS樣式</h1> <link href="StyleSheet.css" rel="stylesheet" /> //直接插入即可引用

html的標籤,”id”對應”#”,”class”對應”.” .id是唯一標誌的，在同一頁面中不能有相同的值,class則沒這約束。如：

Css
h1{......}
#div1{......}
//引用時，使用id屬性聲明即可 id="div1"
.div2{......}
//引用時，使用class屬性聲明即可 class="div2"

關聯選擇符:
 •關聯選擇符是一個用空格隔開的兩個或更多的單一標記選擇符組成的字串。一般格式如下：選擇符1 選擇符2 …… {屬性:值; ……}
•這些選擇符具有層次關係，並且它們的優先順序比單一的標記選擇符大。例如： p h2{ color:red }
 •這種定義方式只對p元素所包含的h2元素起作用，單獨的p或者單獨的h2元素均無法應用該樣式。 

並列選擇符
 •如果有多個不同的元素定義的樣式相同，則可以使用並列選擇符簡化定義。例如： h1,h2,h3{ color:blue}
 •每個元素之間用逗號隔開，表示所有的h1、h2、h3標記中的內容都將以藍色樣式顯示。 

偽類:
 •偽類是CSS中非常特殊的類，它能自動地被支援CSS的瀏覽器所識別。偽類可以指定XHTML中的<a>元素以不同的方式顯示連結(links)、已訪問連結(visited
links)和可啟用連結(active links)。甚至不同字型大小和風格。
 •CSS中用4個偽類來定義連結的樣式，分別是：a:link、a:visited、a:hover和a:active，例如：

 a:link{font-weight : bold ;text-decoration : none ;color : #C00000 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #C30000 ;}

2.頁面配置：

DIV和CSS布局
 1.頁面水平置中
設定頁面水平置中的方法是在body的style樣式中設定text-align屬性的值為center。如果還希望頁面的寬度固定，則可以通過設定div的width屬性來實現。

 2.頁面滿寬度顯示
設定頁面滿寬顯示的方法是將div的固定寬度設定為百分比即可

 3.頁面元素
定位頁面元素的定位分為流布局和座標定位布局兩種，其中，座標定位布局又分為絕對位置和相對定位，這裡僅介紹流布局和座標絕對位置
如果採用該布局，則頁面中的元素將按照從左至右、從上到下的順序顯示，各元素之間不能重疊。如果不設定元素的定位方式，則預設就是流式布局。
在使用座標絕對位置之前，必須先將style元素的position屬性設定為absolute，然後就可以由style元素的left、top、right、bottom和z-index屬性來決定元素在頁面中的絕對位置。left屬性工作表示元素的x座標，top屬性工作表示元素的y座標，座標的位置是以它最近的具有position屬性的父容器為參照物的。
 4.表格版面配置
座標定位布局又分為絕對位置和相對定位，這裡僅介紹流布利用表格可以將網頁中的內容合理地放置在相應的地區，每個地區之間互不干擾。
 5.盒子模型
自從 1996 年CSS1 的推出，W3C 組織就建議把所有網頁上的對象都放在一個盒子(box)中，設計師可以通過建立定義來控制這個盒子的屬性，這些對象包括段落、列表、標題、圖片以及層。盒子模型主要定義了4個地區：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)，
 6.層的定位
float浮動屬性是DIV和CSS布局中的一個非常重要的屬性。大部分的DIV布局都是通過float的控制來實現的。具體參數如下。
float:none用於設定是否浮動
float:left用於表示對象向左浮動
float:right用於表示對象向右浮動

3.主題

主題是定義頁面和控制面板的檔案的集合。它通常包含面板檔案(副檔名為.skin)、階層式樣式表檔案(副檔名為.css)、圖片和其他資源等的組合，但一個主題至少包含一個面板檔案。

--------------------------------------------------------------------------------

4.主版頁面

什麼是主版頁面:
 •主版頁面是用於設定頁面外觀的模板，是一種特殊的ASP.NET網頁檔案，同樣也具有其他ASP.NET檔案的功能，如添加控制項、設定樣式等，只不過它的副檔名是.master。
 •引用主版頁面的.aspx頁面稱為內容頁，在內容頁中，主版頁面的ContentPlaceHolder控制項預留的可編輯區會被自動替換為Content控制項，只需在Content控制項地區中填充內容即可，在主版頁面中定義的其他標記將自動出現在引用該主版頁面的內容頁中。
 •當建立新的Web網站時，總是先添加作為所有其他頁面基礎的主版頁面。即使網站中只有少數幾個頁面，主版頁面仍然可以協助確保整個網站擁有一致的外觀。
 •在某種程度上，主版頁面看起來就像正常的ASPX頁面。建立主版頁面的方法也和建立一般頁面的方法非常相似，區別是主版頁面無法單獨在瀏覽器中查看，必須通過建立內容頁才能瀏覽。

 建立主版頁面:
 •每當建立一個新的主版頁面時都會自動添加此預留位置，在內容頁中可以用它來添加頁面特有的位於頁面的標記之間的內容，比如CSS(包括內嵌樣式表和外部樣式表)和JavaScript。
 •主版頁面中的ContentPlaceHolder如果有內容，是可以作為內容頁的預設新項，當基於該主版頁面建立頁面時，內容頁即可以重寫這部分內容，也可以不重寫。

    嵌套主版頁面

 •主版頁面也可以嵌套。嵌套主版頁面是基於另一個主版頁面的主版頁面。內容頁面則可以基於嵌套主版頁面。如果有一個目標為不同地區仍然需要共用相同外觀的Web網站，採用嵌套主版頁面就比較有用。
 •嵌套主版頁面的建立很簡單：當添加主版頁面時選中“選擇主版頁面”複選框即可，就像後面介紹的新增內容頁一樣。然後，在內容頁中要重寫的位置將控制項添加到控制項中。 

建立內容頁
 •主版頁面如果沒有內容頁來使用它，那就沒有任何用處。通為了將一個內容頁基於一個主版頁面，通常在添加新網頁到網站時，就指定主版頁面，為此，只需選中“添加新項”對話方塊底部的“選擇主版頁面”複選框即可。當然，也可以在直接在頁面的@Page指令中設定MasterPageFile屬性。
 •內容頁中只能含有映射到主版頁面中的控制項的控制項。而這些控制項又可以包含標準標記，如HTML元素和伺服器控制項聲明

在內容頁訪問主版頁面中的成員

 •在內容頁中可以通過編程的方式訪問主版頁面中的成員，包括主版頁面上的任何公用屬性或方法以及任何控制項。要實現內容頁對主版頁面中定義的屬性或方法進行訪問，則該屬性或方法必須聲明為公用成員(public)，也可以對主版頁面動態地進行訪問。 

下面來個樣本，使用主版頁面建立內容頁:
 •主版頁面包括一個或多個 <asp:ContentPlaceHolder ID="TestContentPlaceHolder"
runat="server"/> 控制項，在內容頁中可以定義要替換的內容。

 •內容頁中通過添加 Content 控制項並將這些控制項映射到主版頁面上的 ContentPlaceHolder控制項來建立內容。

 添加新項>>主版頁面>>

MasterPage.master

<form id="form1" runat="server">  <div id="main">  <div id="head">   <h1 style="margin:10px 0 0 10px">主版頁面測試</h1>  </div>  <div id="content">   <div id="left">    <h3 style=" margin:10px 0 0 10px">左側導航</h3>    <div style=" margin-left:20px; font-size:18px; font-family:Verdana">     <a href="TestPage.aspx">asp.net</a><br />     <a href="AnotherTestPage.aspx">CSS</a><br />     <a href="#">HTML</a><br />     <a href="#">JQuery</a>    </div>   </div>   <div id="center">    <asp:ContentPlaceHolder ID="TestContentPlaceHolder" runat="server">     可以被重寫的部分    </asp:ContentPlaceHolder>   </div>  </div> </div> </form>

重寫之前的樣式:

內容頁:
添加新項>>web表單
勾選主版頁面:

選中剛才的主版頁面即可：
在代碼中間重寫主版頁面的內容：

<asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" Runat="Server"></asp:Content><asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" Runat="Server"> <div style=" width:100%; height:100%; background-color:#666666">  <div style=" margin:10px 0 0 10px">   <h4>    這裡是另一個內容頁(AnotherTestPage.aspx)   </h4>   <p style=" font-size:12px; font-family:宋體">         Master Page 使您有能力為 web 應用程式中的所有頁面（或頁面組）建立一致的外觀和行為。    Master Page 為其他頁面提供了模版，帶有共用的布局和功能。Master Page 為內容定義了可被內容頁面覆蓋的預留位置。而輸出結果就是 Master Page 和內容頁面的組合。<br />         內容頁包含您希望顯示的內容。    當使用者請求內容頁時，ASP.NET 會對頁面進行合并以產生輸出，輸出結果對 Master Page 的布局和內容頁面的內容進行了合并。   </p>  </div> </div></asp:Content>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。