前端是人们看到的界面，后端人员不仅要知道后端代码的编译，还要知道前端的布局。有时候他们比前端人员懂得多，因为前端人员有可能是精通PS 21天的高手。这个时候可以自己写前端。

1.1.CSS CSS(层叠样式表)，中文翻译为层叠样式表，是一种标记语言，用于控制网页的样式，并允许从网页内容中分离样式信息。就语法而言，CSS是一门容易学习的语言。它的“语法”只由几个概念组成，这使得它非常容易上手。CSS的难点在于所有主要浏览器呈现页面的方式。虽然几乎每个浏览器都可以理解CSS，但在按照CSS标准显示页面时，它们都有自己的“怪癖”。CSS指定了两种定义样式的方式，即内嵌和级联。将样式控件直接放在单个HTML元素中称为内联或内联样式。这种样式通过style属性控制每个元素的外观，直观但繁琐。除非很少有相同风格的元素，否则很少使用。在网页头部定义或导入的样式称为级联样式。这种样式可以将网页的结构和表达分开，这样在修改某些元素的样式时，只需要修改头部定义或引入的样式，网页中所有样式相同的元素都会自动应用新的样式。级联样式可以分为两种方式：嵌入样式和链接样式。直接在头部实现的CSS样式称为嵌入式。这种CSS通常位于HTML文件的头部，也就是和标签的内部，以结尾。嵌入式比内联方便多了，体中代码也相对简单。修改元素样式时，只需要修改头部的代码。在头部，css样式是通过导入扩展名为的文件来实现的。CSS，也就是所谓的链接样式。使用这个方法，可以调用网页中定义的样式表来实现样式表的应用。定义的样式表通常作为文件存储在站点目录中。这种方法将网页的结构和表达完全分离，最适合大型网站的CSS样式定义。如果一个元素不仅引用了链接样式文件中定义的样式，还在头部定义了一个新的样式，或者通过元素内部的style属性定义了一个新的样式，那么标记元素的最终呈现效果如何？这就是样式嵌套中的冲突问题。浏览器解决这个问题的方法是，一旦发现样式冲突，就采用“就近使用”的原则，而不冲突的样式则按顺序组合，形成最终样式进行显示。通常，适用于大多数网页的样式是在样式表中定义的。css)文件，并且特定于页面的样式是在网页内部内嵌定义的。属性是元素的一部分，可以通过样式表进行修改。CSS规范定义了一个很长的属性列表，但是并不是所有的项目都在大多数网站中使用。以下是设置：的几种不同方法

h1 style=' color:blue'CSS样式/h1 style h1 { color : red }/style # h1 { color 3360 gray } h1 id=' h1 ' CSS样式/h1 . h1 { color 3360 gray } h1 class=' h1 ' CSS样式/H1link href='样式表. css' rel='样式表'///可以通过直接插入来引用html标记。“id”对应于“#”，而“class”对应于“.”。id是唯一的标记，在同一页中不能有相同的值，但是类没有这个约束。例如：

Cssh1 {.} # div1 {.}//引用时可以用id属性声明；id=' div1 '。div2 {.}//引用时可以通过类属性声明。

关联选择器：关联选择器是由两个或多个由空格分隔的单个标记选择器组成的字符串。一般格式如下：选择器1选择器2.{属性：值；}这些选择器具有层次关系，其优先级大于单个标记选择器。例如，p h2{ color:red }的定义只适用于p元素中包含的h2元素，这种样式不能单独应用于p或h2元素。

平行选择器如果有许多不同的元素定义相同的样式，您可以使用平行选择器来简化定义。例如：h1、h2、h3 {Color : Blue}每个元素用逗号分隔，这意味着H1、H2和h3标签中的所有内容将以蓝色样式显示。

伪类：是CSS中非常特殊的类，支持CSS的浏览器可以自动识别。伪类可以指定XHTML中的a元素以不同的方式显示链接、访问过的链接和活动链接。甚至不同的字体大小和风格。在CSS中，四个伪类用于定义链接的样式，即：a:link、a:visited、a:hover和a:active，例如：

a : link { font-weight : bold；文字装饰：无；颜色： # C00000:已访问{ font-weight : bold；文字装饰：无；颜色： # C30000}2.页面布局：

DIV和CSS布局1。页面水平居中设置页面水平居中的方法是在正文的样式样式中将文本对齐属性的值设置为居中。如果希望页面宽度固定，可以通过设置div的width属性来实现。

2.页面全宽显示设置页面全宽显示的方法是将div的固定宽度设置为百分比

3.页面元素的定位页面元素的定位可以分为流程布局和坐标定位布局，其中坐标定位布局可以分为绝对定位和相对定位。这里只介绍流程布局和坐标绝对定位。如果采用这种布局，页面中的元素将从左到右、从上到下显示，元素不能重叠。如果不设置元素的定位方式，默认为流式布局。在使用坐标绝对定位之前，必须将style元素的position属性设置为absolute，然后通过style元素的left、top、right、bottom和z-index属性来确定元素在页面中的绝对位置。左侧属性表示元素的x坐标，顶部属性表示元素的y坐标。坐标位置基于其最近的具有位置属性的父容器。4.表格布局坐标定位布局分为绝对定位和相对定位。这里我们只介绍一下，利用表格可以将网页中的内容合理的放置在相应的区域，各个区域之间互不干扰。5.盒子模型自从1996年引入CSS1以来，W3C就建议网页上的所有对象都应该放在一个盒子里。设计者可以通过创建定义来控制此框的属性。这些对象包括段落、列表、标题、图片和图层。盒子模型主要定义了四个区域：内容、填充、边框和边距。6.图层的定位浮动属性是DIV和CSS布局中非常重要的属性。大多数DIV布局都是通过对浮点的控制来实现的。具体参数如下。Float:none用于设置是否浮动。float:left用于指示对象向左浮动。float:right用于指示对象向右浮动

3.主题

主题是定义页面和控件外观的文件集合。它通常包含外观文件(扩展名。皮肤)，级联样式表文件(扩展名。css)、图片和其他资源，但是一个主题至少包含一个外观文件。

-

4.母版页

什么是母版页：是用于设置页面外观的模板。这是一个特殊的ASP.NET网页文件，除了扩展名为之外，它还具有其他ASP.NET文件的功能，如添加控件和设置样式。主人。那个。引用母版页的aspx页称为内容页。在内容页中，由母版页的内容占位符控件保留的可编辑区域将被内容控件自动替换。只需填写内容控制区域，母版页中定义的其他标签就会自动出现在引用该母版页的内容页中。创建新网站时，始终首先添加作为所有其他页面基础的母版页。即使一个网站只有几个页面，母版页也有助于确保整个网站的外观和感觉一致。在某种程度上，母版页看起来像一个普通的ASPX页面。创建母版页的方法也与创建普通页的方法非常相似，只是母版页不能单独在浏览器中查看，只能通过创建内容页来查看。

每当创建新的母版页时，Create master page :都会自动添加此占位符，它可用于在页面标签之间添加特定于页面的内容，例如CSS(包括嵌入式样式表和外部样式表)和JavaScript。如果母版页中有内容，内容占位符可以用作内容页的默认新项目。当基于母版页创建新页面时，内容页可能会也可能不会重写这部分内容。

嵌套母版页

母版页也可以嵌套。嵌套母版页是基于另一个母版页的母版页。内容页可以基于嵌套母版页。如果有一个网站针对不同的区域，并且仍然需要共享相同的外观，那么嵌套母版页非常有用。创建嵌套母版页很简单：添加母版页时，只需选中“选择母版页”复选框，就像添加稍后描述的内容页一样。然后，将控件添加到要在内容页中重写它的控件中。

创建内容页母版页如果没有内容页可以使用，那就没用了。为了使内容页基于母版页，通常在向网站添加新网页时指定母版页。为此，只需选中“添加新项目”对话框底部的“选择母版页”复选框。当然，也可以直接在页面的@Page指令中设置MasterPageFile属性。内容页只能包含映射到母版页中的控件的控件。这些控件可以包含标准标记，例如HTML元素和服务器控件声明

在内容页上访问母版页中的成员

母版页中的成员可以在内容页中以编程方式访问，包括母版页上的任何公共属性或方法以及任何控件。为了让内容页访问母版页中定义的属性或方法，必须将属性或方法声明为公共成员，或者可以动态访问母版页。

下面是一个使用母版页创建内容页的示例。的母版页包括一个或多个ASP : content placeholder id=' testcontent placeholder ' runat=' server '/控件，可以在内容页中定义要替换的内容。

在内容页中，通过添加内容控件并将这些控件映射到母版页上的内容占位符控件来创建内容。

添加新项目母版页

MasterPage.master

表单id=' form 1 ' runat=' server ' Div id=' main ' Div id=' head ' h1 style=' margin :10 px 010 px '母版页测试/h1/Div Div id=' content ' Div id=' left ' H3 style=' margin 336010 px 010 px '左导航/H3 Div style=' margin-left :20 px；font-size :18 px；font-family : verdana ' a href=' testpage . aspx ' ASP . net/ABR/a href=' other testpage . aspx ' CSS/ABR/a href=' # ' HTML/ABR/a href=' # ' JQuery/a/Div/Div id=' center ' ASP 3360 content placeholder id=' testcontent placeholder ' runat=' server '可重写的部分/ASP 3360 content placeholder/Div/form重写以前的样式

内容页：添加新项目网页表单检查母版页：

只需选择刚才的母版页：在代码中间重写母版页的内容；

asp: content ID=' content 1 ' contentplaceholdrid=' TestContentPlaceHolder ' Runat=' Server '/asp: contentasp3360 content ID=' content 1 ' contentplaceholdrid=' TestContentPlaceHolder ' Runat=' Server ' div style=' width :100 '；高度：100%；background-color 3360 # 66666 ' div style=' margin :10 px 0010 px ' H4这里是另一个内容页面(other test page . aspx)/H4 PS style=' font-size :12 px；字体系列：母版页使您能够为web应用程序中的所有页面(或页面组)创建一致的外观和行为。母版页为具有共享布局和功能的其他页面提供模板。母版页为可以被内容页覆盖的内容定义占位符。输出结果是母版页和内容页的组合。br/内容页面包含您想要显示的内容。当用户请求内容页面时，ASP.NET组合页面以生成输出，输出结果组合母版页的布局和内容页面的内容。/p/div/div/ASP :内容

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。