asp.net基礎(chǔ)中如何布局前端頁(yè)面-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)asp.net基礎(chǔ)中如何布局前端頁(yè)面，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為銀川等服務(wù)建站，銀川等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為銀川企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

前端就是給人看的界面，后臺(tái)人員不僅要知道后臺(tái)代碼的編寫，更要知道前端的布局。

 ?CSS(Cascading Style
Sheet)，中文譯為層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。就語(yǔ)法而言，
 ?CSS是一種容易學(xué)習(xí)的語(yǔ)言。它的“語(yǔ)法”僅由幾個(gè)概念組成，使得它相當(dāng)容易入門。CSS的難點(diǎn)在于所有主流瀏覽器呈現(xiàn)頁(yè)面的方式。盡管實(shí)際上每種瀏覽器都能夠理解CSS，但當(dāng)根據(jù)CSS標(biāo)準(zhǔn)顯示頁(yè)面時(shí)，它們都有各自的“怪癖”。
 ?CSS規(guī)定了兩種定義樣式的方法，分別是內(nèi)聯(lián)式和級(jí)聯(lián)式。
 ?直接將樣式控制放在單個(gè)HTML元素內(nèi)，稱為內(nèi)聯(lián)式或行內(nèi)樣式。該樣式通過style屬性來控制每個(gè)元素的外觀，直觀但是很繁瑣。除非具有相同樣式的元素較少，否則很少采用。
在網(wǎng)頁(yè)的head部分定義或?qū)氲臉邮?，稱為級(jí)聯(lián)式樣式。該樣式可以實(shí)現(xiàn)將網(wǎng)頁(yè)結(jié)構(gòu)和表現(xiàn)分離，這樣，當(dāng)修改某些元素的樣式時(shí)，只需要修改head部分定義或引入的樣式，該網(wǎng)頁(yè)內(nèi)所有具有相同樣式的元素都會(huì)自動(dòng)應(yīng)用新的樣式。
 ?級(jí)聯(lián)式樣式又可以分為兩種方式：內(nèi)嵌式和鏈接式。
 ?在head部分直接實(shí)現(xiàn)的CSS樣式，稱為內(nèi)嵌式。這種CSS一般位于HTML文件的頭部，即在與標(biāo)簽內(nèi)，并且以結(jié)束。
采用內(nèi)嵌式比內(nèi)聯(lián)式方便了很多，body內(nèi)的代碼也相對(duì)簡(jiǎn)潔，修改某個(gè)元素的樣式時(shí)只需修改head內(nèi)的代碼即可。
 ?在head部分通過導(dǎo)入以擴(kuò)展名為.css的文件來實(shí)現(xiàn)CSS樣式，稱為鏈接式。利用這種方法在網(wǎng)頁(yè)中可以調(diào)用已經(jīng)定義好的樣式表來實(shí)現(xiàn)樣式表的應(yīng)用，定義好的樣式表通常單獨(dú)以文件的形式存放在站點(diǎn)目錄中。這種方法實(shí)現(xiàn)了將網(wǎng)頁(yè)結(jié)構(gòu)和表現(xiàn)的徹底分離，最適合大型網(wǎng)站的CSS樣式定義。
 ?如果某個(gè)元素既引用了鏈接樣式文件中定義的樣式，又在head部分定義了新的樣式，或者在元素內(nèi)部通過style屬性定義了新的樣式，那么該標(biāo)記元素最終呈現(xiàn)的效果會(huì)是什么樣呢？這就是樣式嵌套中的沖突問題，瀏覽器解決這種問題的方法就是一旦發(fā)現(xiàn)樣式?jīng)_突，則通過“就近使用”原則，而不沖突的樣式則通過順序組合后形成最終樣式進(jìn)行顯示。
 ?一般情況下，在樣式表(.css)文件中定義適合大多數(shù)網(wǎng)頁(yè)公用的樣式，在網(wǎng)頁(yè)內(nèi)部采用內(nèi)嵌式定義該頁(yè)面特有的樣式。
 ?屬性是元素的一部分，可通過樣式表修改。CSS規(guī)范定義了一個(gè)長(zhǎng)屬性列表，但在大多數(shù)Web站點(diǎn)中不會(huì)用到所有項(xiàng)。
下面介紹這幾種不同的方式來設(shè)置:

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

html的標(biāo)簽,”id”對(duì)應(yīng)”#”,”class”對(duì)應(yīng)”.” .id是標(biāo)志的，在同一頁(yè)面中不能有相同的值,class則沒這約束。如：

Css
h2{......}
#div1{......}
//引用時(shí)，使用id屬性聲明即可 id="div1"
.div2{......}
//引用時(shí)，使用class屬性聲明即可 class="div2"

關(guān)聯(lián)選擇符:
 ?關(guān)聯(lián)選擇符是一個(gè)用空格隔開的兩個(gè)或更多的單一標(biāo)記選擇符組成的字符串。一般格式如下：選擇符1 選擇符2 …… {屬性:值; ……}
?這些選擇符具有層次關(guān)系，并且它們的優(yōu)先級(jí)比單一的標(biāo)記選擇符大。例如： p h3{ color:red }
 ?這種定義方式只對(duì)p元素所包含的h3元素起作用，單獨(dú)的p或者單獨(dú)的h3元素均無(wú)法應(yīng)用該樣式。

并列選擇符
 ?如果有多個(gè)不同的元素定義的樣式相同，則可以使用并列選擇符簡(jiǎn)化定義。例如： h2,h3,h4{ color:blue}
 ?每個(gè)元素之間用逗號(hào)隔開，表示所有的h2、h3、h4標(biāo)記中的內(nèi)容都將以藍(lán)色樣式顯示。

偽類:
 ?偽類是CSS中非常特殊的類，它能自動(dòng)地被支持CSS的瀏覽器所識(shí)別。偽類可以指定XHTML中的<a>元素以不同的方式顯示鏈接(links)、已訪問鏈接(visited
links)和可激活鏈接(active links)。甚至不同字體大小和風(fēng)格。
 ?CSS中用4個(gè)偽類來定義鏈接的樣式，分別是：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.頁(yè)面布局：

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

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

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

3.主題

主題是定義頁(yè)面和控件外觀的文件的集合。它通常包含外觀文件(擴(kuò)展名為.skin)、級(jí)聯(lián)樣式表文件(擴(kuò)展名為.css)、圖片和其他資源等的組合，但一個(gè)主題至少包含一個(gè)外觀文件。

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

4.母版頁(yè)

什么是母版頁(yè):
 ?母版頁(yè)是用于設(shè)置頁(yè)面外觀的模板，是一種特殊的ASP.NET網(wǎng)頁(yè)文件，同樣也具有其他ASP.NET文件的功能，如添加控件、設(shè)置樣式等，只不過它的擴(kuò)展名是.master。
 ?引用母版頁(yè)的.aspx頁(yè)面稱為內(nèi)容頁(yè)，在內(nèi)容頁(yè)中，母版頁(yè)的ContentPlaceHolder控件預(yù)留的可編輯區(qū)會(huì)被自動(dòng)替換為Content控件，只需在Content控件區(qū)域中填充內(nèi)容即可，在母版頁(yè)中定義的其他標(biāo)記將自動(dòng)出現(xiàn)在引用該母版頁(yè)的內(nèi)容頁(yè)中。
 ?當(dāng)創(chuàng)建新的Web站點(diǎn)時(shí)，總是先添加作為所有其他頁(yè)面基礎(chǔ)的母版頁(yè)。即使站點(diǎn)中只有少數(shù)幾個(gè)頁(yè)面，母版頁(yè)仍然可以幫助確保整個(gè)站點(diǎn)擁有一致的外觀。
 ?在某種程度上，母版頁(yè)看起來就像正常的ASPX頁(yè)面。創(chuàng)建母版頁(yè)的方法也和創(chuàng)建一般頁(yè)面的方法非常相似，區(qū)別是母版頁(yè)無(wú)法單獨(dú)在瀏覽器中查看，必須通過創(chuàng)建內(nèi)容頁(yè)才能瀏覽。

 創(chuàng)建母版頁(yè):
 ?每當(dāng)創(chuàng)建一個(gè)新的母版頁(yè)時(shí)都會(huì)自動(dòng)添加此占位符，在內(nèi)容頁(yè)中可以用它來添加頁(yè)面特有的位于頁(yè)面的標(biāo)記之間的內(nèi)容，比如CSS(包括內(nèi)嵌樣式表和外部樣式表)和JavaScript。
 ?母版頁(yè)中的ContentPlaceHolder如果有內(nèi)容，是可以作為內(nèi)容頁(yè)的默認(rèn)新項(xiàng)，當(dāng)基于該母版頁(yè)新建頁(yè)面時(shí)，內(nèi)容頁(yè)即可以重寫這部分內(nèi)容，也可以不重寫。

    嵌套母版頁(yè)

 ?母版頁(yè)也可以嵌套。嵌套母版頁(yè)是基于另一個(gè)母版頁(yè)的母版頁(yè)。內(nèi)容頁(yè)面則可以基于嵌套母版頁(yè)。如果有一個(gè)目標(biāo)為不同區(qū)域仍然需要共享相同外觀的Web站點(diǎn)，采用嵌套母版頁(yè)就比較有用。
 ?嵌套母版頁(yè)的創(chuàng)建很簡(jiǎn)單：當(dāng)添加母版頁(yè)時(shí)選中“選擇母版頁(yè)”復(fù)選框即可，就像后面介紹的添加內(nèi)容頁(yè)一樣。然后，在內(nèi)容頁(yè)中要重寫的位置將控件添加到控件中。

創(chuàng)建內(nèi)容頁(yè)
 ?母版頁(yè)如果沒有內(nèi)容頁(yè)來使用它，那就沒有任何用處。通為了將一個(gè)內(nèi)容頁(yè)基于一個(gè)母版頁(yè)，通常在添加新網(wǎng)頁(yè)到站點(diǎn)時(shí)，就指定母版頁(yè)，為此，只需選中“添加新項(xiàng)”對(duì)話框底部的“選擇母版頁(yè)”復(fù)選框即可。當(dāng)然，也可以在直接在頁(yè)面的@Page指令中設(shè)置MasterPageFile屬性。
 ?內(nèi)容頁(yè)中只能含有映射到母版頁(yè)中的控件的控件。而這些控件又可以包含標(biāo)準(zhǔn)標(biāo)記，如HTML元素和服務(wù)器控件聲明

在內(nèi)容頁(yè)訪問母版頁(yè)中的成員

 ?在內(nèi)容頁(yè)中可以通過編程的方式訪問母版頁(yè)中的成員，包括母版頁(yè)上的任何公共屬性或方法以及任何控件。要實(shí)現(xiàn)內(nèi)容頁(yè)對(duì)母版頁(yè)中定義的屬性或方法進(jìn)行訪問，則該屬性或方法必須聲明為公共成員(public)，也可以對(duì)母版頁(yè)動(dòng)態(tài)地進(jìn)行訪問。

下面來個(gè)示例，使用母版頁(yè)創(chuàng)建內(nèi)容頁(yè):
 ?母版頁(yè)包括一個(gè)或多個(gè) <asp:ContentPlaceHolder ID="TestContentPlaceHolder"
runat="server"/> 控件，在內(nèi)容頁(yè)中可以定義要替換的內(nèi)容。

 ?內(nèi)容頁(yè)中通過添加 Content 控件并將這些控件映射到母版頁(yè)上的 ContentPlaceHolder控件來創(chuàng)建內(nèi)容。

 添加新項(xiàng)>>母版頁(yè)>>

MasterPage.master

<form id="form1" runat="server">
  <div id="main">
  <div id="head">
   <h2 >母版頁(yè)測(cè)試</h2>
  </div>
  <div id="content">
   <div id="left">
    <h4 >左側(cè)導(dǎo)航</h4>
    <div >
     <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>

重寫之前的樣式:

內(nèi)容頁(yè):
添加新項(xiàng)>>web窗體
勾選母版頁(yè):

選中剛才的母版頁(yè)即可：
在代碼中間重寫母版頁(yè)的內(nèi)容：

<asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" Runat="Server">

</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" Runat="Server">

 <div >
  <div >
   <h5>
    這里是另一個(gè)內(nèi)容頁(yè)(AnotherTestPage.aspx)
   </h5>
   <p >
     &nbsp;&nbsp;&nbsp;&nbsp;Master Page 使您有能力為 web 應(yīng)用程序中的所有頁(yè)面（或頁(yè)面組）創(chuàng)建一致的外觀和行為。
    Master Page 為其他頁(yè)面提供了模版，帶有共享的布局和功能。Master Page 為內(nèi)容定義了可被內(nèi)容頁(yè)面覆蓋的占位符。而輸出結(jié)果就是 Master Page 和內(nèi)容頁(yè)面的組合。<br />
     &nbsp;&nbsp;&nbsp;&nbsp;內(nèi)容頁(yè)包含您希望顯示的內(nèi)容。
    當(dāng)用戶請(qǐng)求內(nèi)容頁(yè)時(shí)，ASP.NET 會(huì)對(duì)頁(yè)面進(jìn)行合并以生成輸出，輸出結(jié)果對(duì) Master Page 的布局和內(nèi)容頁(yè)面的內(nèi)容進(jìn)行了合并。
   </p>
  </div>
 </div>
</asp:Content>

關(guān)于asp.net基礎(chǔ)中如何布局前端頁(yè)面就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享文章：asp.net基礎(chǔ)中如何布局前端頁(yè)面-創(chuàng)新互聯(lián)
分享鏈接：http://www.muchs.cn/article14/cdjide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站策劃、靜態(tài)網(wǎng)站、云服務(wù)器、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)