二、主题1、创建主题2、创建命名皮肤3、处理主题冲突4、为整个网站应用主题5、添加CSS样式6、动态应用主题

三、母版页1、创建母版页2、默认内容3、母版页和相对路径4、在web.config中配置母版页5、修改母版页6、动态加载母版页7、母版页的嵌套

Base应用程序越来越注重页面的外观和可操作性。

一致的外观能给用户良好的形象并能充分展示企业的形象和文化内涵。

ASP.NET提供了多种用于统一页面外观的方法。

样式CSS标准的一部分样式并不是ASP.NET中才有的技术但是使用这个技术能够为ASP.NET

Web项目提供一致的格式外观。

主题主题可以为Web服务器控件提供一致的外观设置与样式属于相同的技术但主题只针对于服务器控件。

母版页母版页用于定义网站的一致性布局。

接下来要学习做的事情主要有3个在ASP.NET应用CSS样式创建和使用主题创建和使用母版页。

一、在ASP.NET中应用CSS样式

Web应用中使用HTML语言存在一些限制比如在不同的浏览器中显示效果不一样、缺乏标准的支持、HTML代码结构混乱等。

解决这些问题的方案是使用CSS标准CSS支持所有现代的浏览器并且提供了一整套格式化属性可以应用这些属性到任何的HTML元素上比如添加边框、设置字体等。

CSS技术是Web标准的主要表现层技术除了设置一些外观之外现如今很多符合Web标准的站点都在使用CSS来进行页面的布局。

要设计一个标准的Web站点站点是指互联网上的一个网站、网页或网络服务的地址或位置。

应该多考虑使用CSS而较少地使用HTML的标签格式化语法。

1、创建CSS样式

内联样式表直接放到HTML标签的内部这种形式的样式会导致HTML代码的混乱。

内联样式表示例代码如下代码放在一个HTML文件中在浏览器中运行

stylecolor:white;

padding:10px这行文本的背景显示为蓝色./p运行结果

2内部样式表

放置在Web标签页区中的样式集合。

可以使用自样式表的样式来格式化Web控件。

使用内联样式让格式与内容清楚分离并且可以对同一页面的格式进行多次重用。

内部样式表的表示示例如下

html

xmlnshttp://www.w3.org/1999/xhml

head

runatservertitleCSS演示效果/titlestyle

{font-family:

CssClasslabelStyle/asp:TextBox/div/form

/body

/html可以看到代码里将CSS样式放在了整哥html文档的head中与body内容分离CSS样式可以在整个页面内元素中复用。

运行结果如下

外部样式表与内部样式表一样是样式和内容分离的但是样式是放在单独文件中这样多个文件都可以使用这个单独文件中的样式。

通常建议使用外部样式表来管理和设置样式这样样式可以被多个页面重用并且可以轻松地将样式复制到其他应用程序中进行复用。

步骤1新建一个ASP.NET

HtmlPage1.html中链接StyleSheet1.css中样式的是这句代码

link

typetext/cssHtmlPage1.html中的代码如下

!DOCTYPE

关于外联CSS样式的应用已经在前面应用过了浏览器运行可查看样式。

更多具体的、细节的应用可以参考菜鸟教程中关于CSS样式的学习和应用。

菜鸟教程链接https://www.runoob.com/css/css-examples.html我们来看3个菜鸟教程中样式应用的例子在VS2019中实践吧

1菜鸟教程-简单例子

CodeBehindWebFormSimple.aspx.cs

InheritsWebAppCainiaoSimple.WebFormSimple

%!DOCTYPE

xmlnshttp://www.w3.org/1999/xhtml

head

charsetutf-8/title菜鸟教程简单例子/titlelink

relstylesheet

runatserverh1CSS实例/h1p这是一个段落。

。

。

/p/form

/body

InheritsWebAppCnForm.WebFormUser

%!DOCTYPE

xmlnshttp://www.w3.org/1999/xhtml

head

charsetutf-8/title菜鸟教程表单/titlelink

relstylesheet

valuechangsha长沙/option/selectlabel

idsubject

xmlnshttp://www.w3.org/1999/xhtml

head

charsetutf-8/title菜鸟教程做一个网页/titlelink

relstylesheet

classheaderh1一个漂亮的网页/h1p小小的网页/p/divdiv

classnavbara

styleheight:200px;这边插入图像/divp关于我的介绍/ph3更多内容/h3p我的更多内容.../pdiv

classfakeimg

styleheight:60px;这边插入图片/div/divdiv

classfakeimg

styleheight:200px;图像/divp一些文本.../pp菜鸟教程学的不仅是技术更是梦想/pbrh2标题/h2h5副标题/h5div

classfakeimg

styleheight:200px;图像/divp一些文本.../pp这是从菜鸟教程上学习的例子希望学完后能做一个大项目/p/div/divdiv

/body

响应式布局-在屏幕设备宽度尺寸小于700px时让两栏上下堆叠显示

media

主题就是切换风格比如CSDN可以选择不同的主题整个页面会有不同风格也叫皮肤。

不同于CSS样式在HTML中发生的变化主题是通过控制服务器控件实现的。

1、创建主题

在应用程序项目中新增一个文件夹命名为APP_Themes该文件夹中可以存放多个主题每个主题用一个单独的子文件夹。

将第一个文件夹命名为ThemeDark再新建一个子文件夹命名为ThemeLight。

然后选中其中一个子文件夹鼠标右键添加-Web窗体外观文件命名为TextBox.skin。

皮肤文件有两类

母版页类似于Word中的模板允许在多个页面中共享相同的内容。

比如网站的Logo可能需要在多个页面中都重用则将其放在母版页中。

母版页可以简化维护、扩展和修改网站的过程并提供一致、统一的外观。

1、创建母版页

母版页与其他普通页相似可以在其中放置文件或图像、HTML控件、Web服务器控件、后置代码等。

母版页的扩展名以.master结尾不能被浏览器直接查看。

母版页必须在被其他页面使用后才能进行显示。

默认代码如下

xmlnshttp://www.w3.org/1999/xhtml

head

charsetutf-8/title/titleasp:ContentPlaceHolder

IDhead

runatserver/asp:ContentPlaceHolder

/head

runatserverdivasp:ContentPlaceHolder

runatserver/asp:ContentPlaceHolder/div/form

/body

/html如果需要多个ContentPlaceHolder控件从工具箱中直接拖入即可。

母版页内容修改

xmlnshttp://www.w3.org/1999/xhtml

head

charsetutf-8/title母版页示例/titleasp:ContentPlaceHolder

IDhead

runatserver/asp:ContentPlaceHolderlink

hrefStyleSheet.css

idleftcolumnasp:ContentPlaceHolder

IDLeftContent

runatserver/asp:ContentPlaceHolder/divdiv

idrightcolumnasp:ContentPlaceHolder

IDRightContent

runatserver/asp:ContentPlaceHolder/div/div/form

/body

要实现自适应高度需要将height设置为100%margin表示也页面边界的距离

body

ContentPlaceHolderIDLeftContent

runatserverh3左侧边栏/h3

ContentPlaceHolderIDRightContent

runatserverh3右侧边栏/h3

可以为web.config配置文件中定义母版页这样母版页将被应用到网站中所有的文件或者某个指定的文件。

加入内容页中没有任何包含content控件则母版页将会被自动忽略。

配置代码如下

masterPageFile~/MasterPage/MasterPage.master//system.web

一些页面可能想覆盖母版页中的显示可以在Page区中修改Title属性也可以通过编程的方式修改Title属性。

还可以通过CSS样式修改。

6、动态加载母版页

在ASP.NET中可以使用多层的嵌套但是过多使用母版页嵌套也会导致难以维护的问题。