asp.net基础学习之前端页面布局
前端就是给人看的界面，后台人员不仅要知道后台代码的编写，更要知道前端的布局。有时候要比前端人员知道的还要多，因为有可能前端人员是个21天精通ps的大师级人物。这时候你可以自己写前端。
1.CSS html的标签,”id”对应”#”,”class”对应”.” .id是唯一标志的，在同一页面中不能有相同的值,class则没这约束。如： Css 关联选择符: 2.页面布局： DIV和CSS布局 2.页面满宽度显示 3.页面元素 3.主题 主题是定义页面和控件外观的文件的集合。它通常包含外观文件(扩展名为.skin)、级联样式表文件(扩展名为.css)、图片和其他资源等的组合，但一个主题至少包含一个外观文件。 -------------------------------------------------------------------------------- 4.母版页 什么是母版页: "color: #800000">创建内容页 "htmlcode">
重写之前的样式: 内容页: 选中刚才的母版页即可： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
"color: #800000"> "color: #800000">定义样式的方法，分别是内联式和级联式。
"color: #800000"> "color: #800000">内嵌式。这种CSS一般位于HTML文件的头部，即在与标签内，并且以结束。
采用内嵌式比内联式方便了很多，body内的代码也相对简洁，修改某个元素的样式时只需修改head内的代码即可。
"color: #800000">链接式。利用这种方法在网页中可以调用已经定义好的样式表来实现样式表的应用，定义好的样式表通常单独以文件的形式存放在站点目录中。这种方法实现了将网页结构和表现的彻底分离，最适合大型网站的CSS样式定义。
"htmlcode">
<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" />
//直接插入即可引用
h1{......}
#div1{......}
//引用时，使用id属性声明即可 id="div1"
.div2{......}
//引用时，使用class属性声明即可 class="div2"
"htmlcode">
a:link{font-weight : bold ;text-decoration : none ;color : #C00000 ;}
a:visited {font-weight : bold ;text-decoration : none ;color :
#C30000 ;}
1.页面水平居中
设置页面水平居中的方法是在body的style样式中设置text-align属性的值为center。如果还希望页面的宽度固定，则可以通过设置div的width属性来实现。
设置页面满宽显示的方法是将div的固定宽度设置为百分比即可
定位页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位，这里仅介绍流布局和坐标绝对定位
如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠。如果不设置元素的定位方式，则默认就是流式布局。
在使用坐标绝对定位之前，必须先将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用于表示对象向右浮动
"color: #800000">创建母版页:
"color: #800000"> 嵌套母版页
"TestContentPlaceHolder"
runat="server"/> 控件，在内容页中可以定义要替换的内容。
<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>
下一篇：asp.net实现中英文多域名检测的方法