asp.net基础学习之前端页面布局(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站点,采用嵌套母版页就比较有用。
 •嵌套母版页的创建很简单:当添加母版页时选中“选择母版页”复选框即可,就像后面介绍的添加内容页一样。然后,在内容页中要重写的位置将控件添加到控件中。 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyjsy.html