【.NET全栈】ASP.NET开发web应用——ASP.NET中的样式、主题和母版页 ...

金歌  论坛元老 | 2024-7-20 04:04:30 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1022|帖子 1022|积分 3066

前言

本章讨论ASP.NET的页面创作技术，现现在的网页网站、Web 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样式

（1）内联样式

内联样式表直接放到HTML标签的内部，这种形式的样式会导致HTML代码的杂乱。内联样式表现例代码如下，代码放在一个HTML文件中在浏览器中运行：
  1. <p style="color:white; background:blue; font-size:x-large; padding:10px">
  2.         这行文本的背景显示为蓝色.
  3.     </p>
复制代码
运行结果：

（2）内部样式表

放置在Web标签页区中的样式聚集。可以使用自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚分离，而且可以对同一页面的格式进行多次重用。内部样式表的表现示比方下：
  1. <html xmlns="http://www.w3.org/1999/xhml">
  2. <head runat="server">
  3.     <title>CSS演示效果</title>
  4.     <style type="text/css">
  5.         .labelStyle
  6.         {
  7.             font-family: 宋体, Arial, Arial, Helvetica, sans-serif;
  8.             font-size: 9pt;
  9.         }
  10.         body
  11.         {
  12.             background-color: #c13d3d;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <form id="form1" runat="server">
  19.         <div>
  20.             <asp:TextBox id="TextBox1" runat="server" CssClass="labelStyle">
  21.             </asp:TextBox>
  22.         </div>
  23.     </form>
  24. </body>
  25. </html>
复制代码
可以看到代码里将CSS样式放在了整哥html文档的head中，与body内容分离，CSS样式可以在整个页面内元素中复用。
运行结果如下：

（3）外部样式表

外部样式表与内部样式表一样，是样式和内容分离的，但是样式是放在单独文件中，这样多个文件都可以使用这个单独文件中的样式。
通常建议使用外部样式表来管理和设置样式，这样样式可以被多个页面重用，而且可以轻松地将样式复制到其他应用步伐中进行复用。
步骤1：新建一个ASP.NET 网站；
步骤2：给项目增加一个html页面；
步骤3：给项目新增一个样式表文件。

   HtmlPage1.html中链接StyleSheet1.css中样式的是这句代码：
  1. <link href="StyleSheet1.css" rel="StyleSheet1" type="text/css">
复制代码
HtmlPage1.html中的代码如下：
  1. <!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>外联CSS样式表</title>    <link href="StyleSheet1.css" rel="StyleSheet1" type="text/css">
  2. </head><body>    <div id="left">        左边的文本    </div>    <div id="right">        右边的文本    </div></body></html>
复制代码
StyleSheet1.css中的代码如下：
  1. #left
  2. {
  3.     font-family: Verdana;
  4.     font-size: 20pt;
  5.     background-color: #ff6a00;
  6.     border-style: solid;
  7.     border-width: 2px;
  8.     width: 100px;
  9.     height: 300px;
  10.     float: left;
  11. }
  13. #right
  14. {
  15.     font-family: Verdana;
  16.     font-size: 10pt;
  17.     background-color: #00ffff;
  18.     border-style: solid;
  19.     border-width: 2px;
  20.     height: 300px;
  21.     float: right;
  22. }
复制代码
2、应用CSS样式

关于外联CSS样式的应用已经在前面应用过了，浏览器运行可查看样式。更多详细的、细节的应用，可以参考菜鸟教程中关于CSS样式的学习和应用。
  1. 菜鸟教程链接：https://www.runoob.com/css/css-examples.html
复制代码
我们来看3个菜鸟教程中样式应用的例子，在VS2019中实践吧！
（1）菜鸟教程-简单例子



  • 窗体中代码：
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormSimple.aspx.cs" Inherits="WebAppCainiaoSimple.WebFormSimple" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title>菜鸟教程简单例子</title>
  9.     <link href="StyleSheetSimple.css" rel="stylesheet" type="text/css">
  10. </head>
  11. <body>
  12.     <form id="form1" runat="server">
  13.         <h1>
  14.              CSS实例！
  15.         </h1>
  17.         <p>
  18.             这是一个段落。。。
  19.         </p>
  20.     </form>
  21. </body>
  22. </html>
复制代码


  • CSS样式表中代码：
  1. body {
  2.     background-color: #d0e4fe;
  3. }
  4. h1 {
  5.     color: orange;
  6.     text-align:center;
  7. }
  9. p {
  10.     font-family: "Times New Roman";
  11.     font-size: 20px;
  12. }
复制代码
项目中截图：


运行结果：

（2）菜鸟教程-用户界面



  • 窗体中代码：
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormUser.aspx.cs" Inherits="WebAppCnForm.WebFormUser" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title>菜鸟教程表单</title>
  9.     <link href="StyleSheetUser.css" rel="stylesheet" type="text/css">
  10. </head>
  11. <body>
  12.      <div class="container">
  13.      <form id="form1" runat="server">
  14.         <h3>反馈表单</h3>
  15.       
  16.          <label for="cname">联系人</label>
  17.          <input id="cname" type="text" name="cname" placeholder="请输入姓名..."></input>
  19.          <label for="email">邮箱</label>
  20.          <input id="email" type="text" name="email" placeholder="请输入邮箱..."></input>
  22.          <label for="country">城市</label>
  23.          <select id="country" name="country">
  24.              <option value="beijing">北京</option>
  25.              <option value="shanghai">上海</option>
  26.              <option value="changsha">长沙</option>
  27.          </select>
  29.          <label for="subject">反馈信息</label>
  30.          <textarea id="subject" name="subject" placeholder="反馈内容..." style="height: 200px"></textarea>
  32.          <input type="submit" value="提交"></input>
  33.      </form>
  34.      </div>
  35. </body>
  36. </html>
复制代码


  • 样式表中代码：
  1. body {
  2. }
  4. input[type=text], select, textarea {
  5.     width: 100%;
  6.     padding: 12px;
  7.     border: 1px solid #ccc;
  8.     border-radius: 4px;
  9.     box-sizing: border-box;
  10.     margin-top: 6px;
  11.     margin-bottom: 16px;
  12.     resize: vertical;
  13. }
  15. input[type=submit] {
  16.     background-color: #4caf50;
  17.     color: white;
  18.     padding: 12px 20px;
  19.     border: none;
  20.     border-radius: 4px;
  21.     cursor: pointer;
  22. }
  24. input[type=submit]:hover {
  25.     background-color: #45a049;
  26. }
  28. .container {
  29.     border-radius: 5px;
  30.     background-color: #f2f2f2;
  31.     padding: 20px;
  32. }
复制代码
讲解：
运行结果：

（3）菜鸟教程-设计一个网页




  • 窗体中代码：
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormPage.aspx.cs" Inherits="text.WebFormPage" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title>菜鸟教程做一个网页</title>
  9.     <link href="StyleSheetPage.css" rel="stylesheet" type="text/css">
  10. </head>
  11. <body>
  12.     <form id="form1" runat="server">
  13.         <div class="header">
  14.             <h1>一个漂亮的网页</h1>
  15.             <p>小小的网页</p>
  16.         </div>
  18.         <div class="navbar">
  19.             <a href="#">链接1</a>
  20.             <a href="#">链接2</a>
  21.             <a href="#">链接3</a>
  22.             <a href="#" class="right">链接4</a>
  23.         </div>
  25.         <div class="row">
  26.             <div class="side">
  27.                 <h2>关于我</h2>
  28.                 <h5>我的照片</h5>
  29.                 <div class="fakeimg" style="height:200px;">这边插入图像</div>
  30.                 <p>关于我的介绍</p>
  31.                 <h3>更多内容</h3>
  32.                 <p>我的更多内容...</p>
  33.                 <div class="fakeimg" style="height:60px;">这边插入图片</div>
  34.                 <div class="fakeimg" style="height:60px;">这边插入图片</div>
  35.                 <div class="fakeimg" style="height:60px;">这边插入图片</div>
  36.             </div>
  38.             <div class="main">
  39.                 <h2>标题</h2>
  40.                 <h5>副标题</h5>
  41.                 <div class="fakeimg" style="height:200px;">图像</div>
  42.                 <p>一些文本...</p>
  43.                 <p>菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  44.                 <br>
  45.                 <h2>标题</h2>
  46.                 <h5>副标题</h5>
  47.                 <div class="fakeimg" style="height:200px;">图像</div>
  48.                 <p>一些文本...</p>
  49.                 <p>这是从菜鸟教程上学习的例子，希望学完后能做一个大项目！！！</p>
  50.             </div>
  51.         </div>
  53.         <div class="footer">
  54.             <h2>版权所有</h2>
  55.         </div>
  56.     </form>
  57. </body>
  58. </html>
复制代码


  • CSS样式表代码：
  1. * {
  2.     box-sizing: border-box;
  3. }
  4. /*body样式*/
  5. body {
  6.     font-family: Arial;
  7.     margin: 0;
  8. }
  10. /* 标题 */
  11. .header {
  12.     padding: 80px;
  13.     text-align: center;
  14.     background: #1abc9c;
  15.     color: white;
  16. }
  18. /* 标题字体加大 */
  19. .header h1 {
  20.     font-size: 40px;
  21. }
  23. /* 导航 */
  24. .navbar {
  25.     overflow: hidden;
  26.     background-color: #333;
  27. }
  29. /* 导航栏样式 */
  30.     .navbar a {
  31.         float: left;
  32.         display: block;
  33.         color: white;
  34.         text-align: center;
  35.         padding: 14px 20px;
  36.         text-decoration: none;
  37.     }
  38.     /* 右侧链接 */
  39.         .navbar a.right {
  40.             float: right;
  41.         }
  42.         /* 鼠标移动到链接的颜色 */
  43.         .navbar a:hover {
  44.             background-color: #ddd;
  45.             color: black;
  46.         }
  48. /* 列容器 */
  49. .row {
  50.     display: -ms-flexbox; /* IE10 */
  51.     display: flexbox;
  52.     -ms-flex-wrap: wrap; /* IE10 */
  53.     flex-wrap: wrap;
  54. }
  56. /* 创建两个列 */
  57. /* 边栏 */
  58. .side {
  59.     -ms-flex: 30%; /* IE10 */
  60.     flex: 30%;
  61.     background-color: #f1f1f1;
  62.     padding: 20px;
  63. }
  65. /* 主要的内容区域 */
  66. .main {
  67.     -ms-flex: 70%; /* IE10 */
  68.     flex: 70%;
  69.     background-color: white;
  70.     padding: 20px;
  71. }
  73. /* 测试图片 */
  74. .fakeimg {
  75.     background-color: #aaa;
  76.     width: 100%;
  77.     padding: 20px;
  78. }
  80. /* 底部 */
  81. .footer {
  82.     padding: 20px;
  83.     text-align: center;
  84.     background: #ddd;
  85. }
  87. /* 响应式布局-在屏幕设备宽度尺寸小于700px时，让两栏上下堆叠显示 */
  88. @media screen and (max-width: 700px) {
  89.     .row {
  90.         flex-direction: column;
  91.     }
  92. }
  94. /* 响应式布局 - 在屏幕设备宽度尺寸小于400px时，让导航栏目上下堆叠显示 */
  95. @media screen and (max-width: 400px) {
  96.     .navbar a {
  97.         float: none;
  98.         width: 100%;
  99.     }
  100. }
复制代码
运行结果：


二、主题

主题就是切换风格，比如CSDN可以选择不同的主题，整个页面会有不同风格（也叫皮肤）。不同于CSS样式在HTML中发生的变化，主题是通过控制服务器控件实现的。
1、创建主题

在应用步伐项目中新增一个文件夹，定名为APP_Themes，该文件夹中可以存放多个主题，每个主题用一个单独的子文件夹。
步骤：
   网站项目-鼠标右键-添加-添加ASP.NET文件夹-主题
  

将第一个文件夹定名为ThemeDark，再新建一个子文件夹，定名为ThemeLight。
然后，选中其中一个子文件夹，鼠标右键添加-Web窗体外观文件，定名为TextBox.skin。
皮肤文件有两类：


  • .skin文件
  • CSS文件

2、创建定名皮肤

3、处置惩罚主题辩论

4、为整个网站应用主题

5、添加CSS样式

6、动态应用主题

三、母版页

母版页雷同于Word中的模板，允许在多个页面中共享雷同的内容。比如网站的Logo，可能需要在多个页面中都重用，则将其放在母版页中。
母版页可以简化维护、扩展和修改网站的过程，并提供一致、同一的外观。
1、创建母版页

母版页与其他普通页相似，可以在其中放置文件或图像、HTML控件、Web服务器控件、后置代码等。母版页的扩展名以.master末端，不能被浏览器直接查看。母版页必须在被其他页面使用后才能进行显示。
创建：

默认代码如下：
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebAppMaster.Site1" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <asp:ContentPlaceHolder ID="head" runat="server">
  10.     </asp:ContentPlaceHolder>
  11. </head>
  12. <body>
  13.     <form id="form1" runat="server">
  14.     <div>
  15.         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
  16.         
  17.         </asp:ContentPlaceHolder>
  18.     </div>
  19.     </form>
  20. </body>
  21. </html>
复制代码
如果需要多个ContentPlaceHolder控件，从工具箱中直接拖入即可。




  • 母版页内容修改：
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MasterPage2.Site1" %>
  3. <!DOCTYPE html>
  5. <html>
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title>母版页示例</title>
  9.     <asp:ContentPlaceHolder ID="head" runat="server">
  10.     </asp:ContentPlaceHolder>
  11.     <link href="StyleSheet.css" rel="stylesheet" type="text/css">
  12. </head>
  13. <body>
  14.     <form id="form1" runat="server">
  15.         <div id="content">
  17.         <div id="top">
  18.             <asp:ContentPlaceHolder ID="ContentTop" runat="server">
  19.             </asp:ContentPlaceHolder>
  20.         </div>
  21.         <div id="left">
  22.             <asp:ContentPlaceHolder ID="ContentLeft" runat="server">
  23.             </asp:ContentPlaceHolder>
  24.         </div>
  25.         <div id="right">
  26.             <asp:ContentPlaceHolder ID="ContentRight" runat="server">
  27.             </asp:ContentPlaceHolder>
  28.         </div>
  30.         </div>
  31.     </form>
  32. </body>
  33. </html>
复制代码


  • 母版页CSS样式：
  1. body {
  2.     background-color: #64E9E5;
  3.     margin: 0px;
  4.     height: 100%;
  5. }
  7. #content {
  8.     background-color: #E8E8EF;
  9.     width: 600px;
  10.     height: 100%;
  11.     margin:0px auto;
  12.     top: 0px;
  13. }
  15. #top {
  16.     top: 0px;
  17.     width: 100%;
  18.     height: 100px;
  19.     background-color: #E3FDE4;
  20. }
  22. #left {
  23.     background-color: #CCCC00;
  24.     float: left;
  25.     width: 200px;
  26.     height: 100%;
  27. }
  29. #right {
  30.     height: 100%;
  31.     background-color: #FFCCCC;
  32. }
复制代码


  • 母版页生成的Web窗体代码修改：
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MasterPage2.WebForm1" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentTop" runat="server">
  5.     <h2>使用母版页示例程序</h2>
  6. </asp:Content>
  7. <asp:Content ID="Content3" ContentPlaceHolderID="ContentLeft" runat="server">
  8.     <h3>左侧边栏</h3>
  9. </asp:Content>
  10. <asp:Content ID="Content4" ContentPlaceHolderID="ContentRight" runat="server">
  11.     <h3>右侧边栏</h3>
  12. </asp:Content>
复制代码
运行结果：但是不知是CSS样式设置的不对还是什么原因，样式不是目的预期的，但是显示成功！
别的一个问题就是网站应用步伐只能在运行与IIS浏览器，点击运行的时间只能运行一次，第二次点大概多次点击就报错，没有解决。

报错界面：

2、默认内容

母版页自己有默认内容，如果新增新的控件可以覆盖默认内容。
3、母版页和相对路径

（1）将图片资源转换为服务器控件。
（2）其他HTML控件也可以使用服务器控件特性。
（3）将绝对路径转换为先相对路径。
4、在web.config中配置母版页

可以为web.config配置文件中定义母版页，这样母版页将被应用到网站中全部的文件大概某个指定的文件。到场内容页中没有任何包含content控件，则母版页将会被主动忽略。
配置代码如下：
  1. <configuration>
  2.     <system.web>
  3.         <pages masterPageFile="~/MasterPage/MasterPage.master"/>
  4.     </system.web>
  5. </configuration>
复制代码
5、修改母版页

一些页面可能想覆盖母版页中的显示，可以在Page区中修改Title属性，也可以通过编程的方式修改Title属性。还可以通过CSS样式修改。
6、动态加载母版页

7、母版页的嵌套

母版页与母版页可以嵌套使用。
在ASP.NET中，可以使用多层的嵌套，但是过多使用母版页嵌套也会导致难以维护的问题。
通常建议开发人员使用1层嵌套即可。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表