「asp.net core 系列」教你如何引用靜態資源和布局頁的使用

. 前言

在之前的4篇的內容里，我們較為詳細的介紹了路由以及控制器還有視圖之間的關系。也就是說，系統如何從用戶的HTTP請求解析到控制器里，然后在控制器里處理數據，并返回給視圖，在視圖中顯示出來。這一篇我將為大家介紹基礎的最后一部分，布局頁和靜態資源引入。

1. 布局頁

在控制器和視圖那一篇，我們了解到_ViewStart 里設置了一個Layout屬性的值，這個值正是用來設置布局頁的。所謂的布局頁，就是視圖的公用代碼。在實際開發中，布局頁通常存放我們為整個系統定義的頁面框架，視圖里寫每個視圖的頁面。

回顧一下，默認的_ViewStart里的內容是：

@{
    Layout = "_Layout";
}

默認的布局頁指定的是名為_Layout的布局頁，在本系列第三篇中，我們得知這個視圖應當在Shared文件夾下，那我們進去看一下這個視圖有什么內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcWeb</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcWeb</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            ? 2020 - MvcWeb - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

這是默認的布局頁內容，看著挺多的，但是除了一些html代碼，里面還有一些關鍵的地方需要注意。

1.1 RenderSection

RenderSection 分部渲染，在頁面中創建一個標記，表示這個頁面塊將在子視圖（或者是路由的實際渲染視圖）中添加內容。

來，我們看一下微軟官方給的注釋：

In layout pages, renders the content of the section named name.

意思就是在布局頁中，渲染名稱為name的分部內容。

新創建一個分布頁，名稱為_Layout1：

<html>
    <head>
        <title>Render 測試</title>
    </head>
    <body>
        @RenderSection("SectionDemo")
    </body>
</html>

這個布局頁里什么都沒有，只有一個RenderSection。現在我們新建一個控制器：

using Microsoft.AspNetCore.Mvc;

namespace MvcWeb.Controllers
{
    public class RenderTestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

創建對應的視圖：

Views / RenderTest/Index.cshtml

先設置布局頁為_Layout1：

@{
    Layout = "_Layout1";
}

先試試啟動應用，訪問：

http://localhost:5006/RenderTest/Index

正常情況下，你應該能看到這個頁面：

仔細看一下信息，意思是在 RenderTest/Index.cshtml 視圖中沒有找到 SectionDemo 的分部內容。

那么，如何在視圖中設置分部內容呢？

@{
    Layout = "_Layout1";
}
@section SectionDemo{
    <h1>你好</h1>

}

使用 @section <Section 名稱> 后面跟一對大括號，在大括號中間的內容就是這個section（分部）的內容。

重啟應用，然后刷新頁面，你能看到這樣的頁面：

如果不做特殊要求的話，定義在布局頁中的分部塊，視圖必須實現。當然，RenderSection還有一個參數，可以用來設置分部不是必須的：

public HtmlString RenderSection(string name, bool required);

1.2 RenderBody

先看下微軟給的官方注釋：

In a Razor layout page, renders the portion of a content page that is not within a named section.

簡單講，如果在布局頁中設置了@RenderBody，那么在使用了這個布局頁的視圖里所有沒被分部塊包裹的代碼都會渲染到布局頁中聲明了@RenderBody的地方。

修改_Layout1.cshtml:

<html>
    <head>
        <title>Render 測試</title>
    </head>
    <body>
        <h1>RenderBody 測試 -之前</h1>
        @RenderBody()
        <h1>RenderBody 測試 -之后</h1>
    </body>
</html>

修改RenderTest/Index.cshtml：

@{
    Layout = "_Layout1";
}

RenderBody測試
<h1>我是視圖的內容！</h1>

重啟應用，刷新剛剛訪問的頁面：

可以看出，RenderBody渲染的位置。

2. 靜態資源引入

通常情況下，靜態資源的引入與HTML引用js和css等資源是一致的，但是對于我們在編寫系統時自己創建的腳本和樣式表，asp.net core提供了不同的處理方式。那就是服務器端壓縮功能。

asp.net core 3.0 的mvc 默認項目是不啟動這個功能的，需要我們額外的開啟支持。

2.1 開啟支持

先引入 BuildBundleMinifier

cd MvcWeb # 切換目錄到MvcWeb項目下
dotnet add package BuildBundleMinifier

創建 bundleconfig.json

[
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            "wwwroot/css/site.css"
        ]
    },
      {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
          "wwwroot/js/site.js"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      }
]

每個節點允許設置項：

outputFileName 生成的捆綁壓縮文件，通常路徑攜帶wwwroot
inputFiles 數組，包含要壓縮到此次輸出文件的文件路徑，會按照添加的順序依次加入
minify 輸出類型的縮小選項，可選。默認是 enabled: true
sourceMap 表示是否為捆綁的文件生成源映射的標記
sourceMapRootPath 源映射文件的路徑

2.2 使用

正常情況下在布局頁中，把壓縮后的文件路徑引入即可。不過在開發中，通常按照以下方式引用：

<environment exclude="Development">
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<environment include="Development">
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

注： asp-append-version 表示在引用路徑追加一個版本號，這是針對html靜態資源緩存的問題的一個解決方案，這一步是由程序決定的。

environment表示環境，現在大家知道這個寫法就行，在接下來的篇幅會講。

3. 靜態資源目錄

我們知道到目前為止，我們的靜態資源都是在wwwroot目錄下。那么我們是否可以修改或者添加別的目錄作為靜態資源目錄呢？

在Startup.cs文件內的Configure方法下有這樣一行代碼：

app.UseStaticFiles();

這行代碼的意思就是啟用靜態文件，程序自動從 wwwroot尋找資源。那么，我們就可以從這個方法入手，設置我們自己的靜態資源：

public static IApplicationBuilder UseStaticFiles(this IApplicationBuilder app, StaticFileOptions options);

我們找到了這個方法的另一個重載版本，里面有一個參數類：

public class StaticFileOptions : SharedOptionsBase
{
    public StaticFileOptions();
    public StaticFileOptions(SharedOptions sharedOptions);
    public IContentTypeProvider ContentTypeProvider { get; set; }
    public string DefaultContentType { get; set; }
    public HttpsCompressionMode HttpsCompression { get; set; }
    public Action<StaticFileResponseContext> OnPrepareResponse { get; set; }
    public bool ServeUnknownFileTypes { get; set; }
}

并沒有發現我們想要的，先別慌，它還有個父類。我們再去它的父類里看看：

public abstract class SharedOptionsBase
{
    protected SharedOptionsBase(SharedOptions sharedOptions);
    public IFileProvider FileProvider { get; set; }
    public PathString RequestPath { get; set; }
    protected SharedOptions SharedOptions { get; }
}

這下就比較明了了，需要我們提供一個文件提供器，那么我們來找一個合適的IFileProvider實現類吧：

public class PhysicalFileProvider : IFileProvider, IDisposable

這個類可以滿足我們的要求，它位于命名空間：

namespace Microsoft.Extensions.FileProviders

那么，添加一組我們自己的配置吧：

using Microsoft.Extensions.FileProviders;

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 省略其他代碼，僅添加以下代碼
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"OtherStatic")),
    });
}

在項目的根目錄創建名為OtherStatic的文件夾，然后在里面創建個文件夾，例如： files，并在這個文件夾里隨便添加一個文件。

然后啟動應用訪問：

http://localhost:5006/files/<你添加的文件(包括后綴名)>

然后能在瀏覽器中看到這個文件被正確響應。

當然，這里存在一個問題，如果在 OtherStatic中的文件在wwwroot也有相同目錄結構的文件存在，這樣訪問就會出現問題。這時候，可以為我們新加的這個配置設置一個請求前綴：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"OtherStatic")),
    RequestPath = "/other"
});

重啟程序，然后訪問：

http://localhost:5006/other/files/<你添加的文件(包括后綴名)>

然后就能看到剛才響應的文件，重新訪問之前的路徑，發現瀏覽器提示404。

4. 總結

在這一篇，我們講解了布局頁的內容，靜態資源的壓縮綁定以及添加一個新的靜態資源目錄。通過這幾篇內容，讓我們對asp.net core mvc有了一個基本的認知。下一篇，我們將重新創建一個項目，并結合之前的內容，以實戰為背景，帶領大家完成一個功能完備的web系統。

求關注，求點贊，求轉發~~有啥可以評論喲

建一個 index.html 與 index.css 文件并根據提供內容進行初始化。
在 index.html 中的 <style> 標簽下，找到 ”補全代碼 1“ 和 ”補全代碼 2“，根據測試驗證中的效果圖，進行媒體查詢與 CSS 代碼補充。

按以上要求完成以下效果：

（1）初次加載顯示效果如下：

（2）改變窗口大小，當寬度小于 959px 時，頁面效果如下：

（3）改變窗口大小，當寬度小于 720px 時，頁面效果如下：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>改版前</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <style>
      /*補全代碼1*/
      /* @media ... { */
        @media screen and (max-width:959px){

        }
      .responsive menu {
        clear: left;
        float: left;
        width: 17.5%;
      }
      .responsive article {
        clear: none;
        float: left;
        margin: 20px 0;
        width: 64.9%;
      }
      .responsive article #article_inner {
        margin: 0 20px;
      }
      .responsive aside {
        clear: none;
        float: right;
        width: 17.5%;
      }
      /*}*/

      /*補全代碼2
        @media .... {
            CSS Code
        }
        */
        @media screen and (max-width:720px){
            
        }
    </style>
  </head>

  <body class="responsive">
    <div id="page_wrapper">
      <header>
        <div id="header_inner">
          <h1 id="header_responsive">Static Page</h1>
        </div>
      </header>

      <div id="content_wrapper">
        <menu>
          <div id="menu_inner">
            <ul class="menu_1">
              <li class="menu_1">
                <a
                  href="#nogo"
                  class="menu_1"
                  title="Dummy placeholder link. This doesn't go anywhere."
                  >Menu 1</a
                >
                <ul class="menu_2">
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 1 a</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 1 b</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 1 c</a
                    >
                  </li>
                </ul>
              </li>
              <li class="menu_1">
                <a
                  href="#nogo"
                  class="menu_1"
                  title="Dummy placeholder link. This doesn't go anywhere."
                  >Menu 2</a
                >
                <ul class="menu_2">
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 2 a</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 2 b</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 2 c</a
                    >
                  </li>
                </ul>
              </li>
              <li class="menu_1">
                <a
                  href="#nogo"
                  class="menu_1"
                  title="Dummy placeholder link. This doesn't go anywhere."
                  >Menu 3</a
                >
                <ul class="menu_2">
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 3 a</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 3 b</a
                    >
                  </li>
                  <li class="menu_2">
                    <a
                      href="#nogo"
                      class="menu_2"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Menu 3 c</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </menu>

        <div id="article_aside_wrapper">
          <article>
            <div id="article_inner">
              <div id="intro">
                <h1>How To Use</h1>

                <p>
                  Ever wondered what the difference between Adaptive,
                  Responsive, Static and Liquid sites is? Had someone try and
                  explain it only to be left more confused?
                </p>

                <p>
                  Pick a flavor from the drop down on the top of the page then
                  drag your window narrower and wider, taller and shorter. It
                  will make much more sense when you see for yourself how the
                  approach works.
                </p>
              </div>

              <div id="overview">
                <img
                  src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  alt="Single Column Layout"
                  id="layout_1"
                />
                <img
                  src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  alt="Two Column Layout"
                  id="layout_2"
                />

                <h1 class="overview_adaptive">Adaptive</h1>

                <p class="overview_adaptive">
                  Adaptive is characterized by having defined layouts for
                  different resolutions. Within each layout, resizing the window
                  does not change the layout.
                </p>

                <p class="overview_adaptive">
                  You can think of Adaptive as a series of
                  <a
                    href="#nogo"
                    class="mode"
                    rel="static"
                    title="Change to Static"
                    >Static</a
                  >
                  layouts.
                </p>

                <h1 class="overview_liquid">Liquid</h1>

                <p class="overview_liquid">
                  Liquid (also called "Fluid") is characterized by scaling the
                  width of parts of the design relative to the window. It tends
                  to fail when the window is much smaller or much larger than it
                  was originally designed for.
                </p>

                <h1 class="overview_responsive">Responsive</h1>

                <p class="overview_responsive">
                  Responsive is characterized by having defined layouts for
                  different resolutions. Within each layout, the design is
                  liquid and resizes the width of elements relative to the
                  changing window size.
                </p>

                <p class="overview_responsive">
                  You can think of Responsive as a series of
                  <a
                    href="#nogo"
                    class="mode"
                    rel="liquid"
                    title="Change to Liquid"
                    >Liquid</a
                  >
                  layouts.
                </p>

                <h1 class="overview_static">Static</h1>

                <p class="overview_static">
                  Static layouts are the traditional web: one design that sits
                  in the center of the page and requires horizontal scrolling if
                  the window is too small for it. M dot sites are the
                  traditional answer to this, providing a wholly separate site
                  for a lower resolution - and all the work of creating a
                  separate site.
                </p>
              </div>

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->
            </div>
          </article>

          <aside>
            <div id="aside_inner">
              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->

              <!-- Start: Single Block -->
              <div class="block">
                <div class="block_inner">
                  <img
                    src="https://labfile.oss.aliyuncs.com/courses/3944/layout.png "
                  />
                  <div class="block_content">
                    <h3>Title</h3>
                    <p class="meta">Month dd, yyyy</p>
                    <p class="summary">
                      Summary summary summary summary summary summary
                    </p>
                    <p class="main">
                      Content content content content content content content
                      content content content content content content content
                      content content
                    </p>
                    <a
                      href="#nogo"
                      title="Dummy placeholder link. This doesn't go anywhere."
                      >Link</a
                    >
                  </div>
                </div>
              </div>
              <!-- End: Single Block -->
            </div>
          </aside>
        </div>
      </div>

      <footer>
        <div id="footer_inner">
          <p>
            Built by <a href="#" title="Blog">Nicholas Davison</a> for
            <a href="#" title="Digitaria's Company Website">Digitaria</a>
          </p>
          <p>
            ? Copyright
            <a href="#" title="Digitaria's Company Website">Digitaria</a>
          </p>
        </div>
      </footer>
    </div>
  </body>
</html>

index.css

body {
    background-color: #fff;
    color: #000;
    font-family: Arial;
    font-size: 14px;
    margin: 0;
  }
  a {
    color: #000088;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  a.mode,
  footer a {
    color: #0000ff;
  }
  header {
    margin: 20px 0 0 0;
  }
  #header_inner {
    background-color: #edd;
    border: 1px solid #800;
  }
  #menu_inner {
    background-color: #eed;
    border: 1px solid #880;
  }
  #article_inner {
    background-color: #ded;
    border: 1px solid #080;
  }
  #aside_inner {
    background-color: #dee;
    border: 1px solid #088;
  }
  footer {
    clear: both;
    margin: 0 0 20px 0;
  }
  #footer_inner {
    background-color: #dde;
    border: 1px solid #008;
  }
  #header_inner,
  #menu_inner,
  #article_inner,
  #aside_inner,
  #footer_inner {
    padding: 1px 20px;
  }
  header h1 {
    display: none;
  }
  .responsive header h1#header_responsive,
  .static header h1#header_static {
    display: block;
  }
  #overview {
    border-top: 1px solid #080;
    border-bottom: 1px solid #080;
    zoom: 1;
  }
  #overview:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
  }
  #overview h1 {
    display: none;
  }
  #overview p {
    display: none;
  }
  #overview img {
    display: none;
    float: left;
    margin: 20px 20px 20px 0;
    width: 110px;
  }
  .responsive #overview .overview_responsive,
  .static #overview .overview_static {
    display: block;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 20px 0;
  }
  .block {
    clear: both;
    margin: 20px 0;
    zoom: 1;
  }
  .block:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .block h3 {
    margin: 0;
  }
  .block p {
    margin: 0 0 20px 0;
  }
  .block p.meta {
    color: #888;
    font-size: 80%;
    margin: 0;
  }
  .responsive header {
    margin: 20px 0 0 0;
    padding: 0;
    position: relative;
  }
  .responsive menu,
  .responsive article,
  .responsive aside,
  .responsive footer {
    margin: 20px 0;
    padding: 0;
  }
  .static #page_wrapper {
    margin: 0 auto;
    width: 960px;
  }
  .static header {
    padding: 0;
    position: relative;
  }
  .static menu,
  .static aside {
    clear: none;
    float: left;
    margin: 20px 0;
    padding: 0;
    width: 200px;
    zoom: 1;
  }
  .static aside {
    float: right;
  }
  .static menu ul {
    margin: 20px 0;
    padding: 0;
  }
  .static menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .static menu ul li ul {
    margin: 0 0 0 40px;
  }
  .static article {
    clear: none;
    float: left;
    margin: 20px;
    padding: 0;
    width: 520px;
  }
  .static article .block img {
    clear: left;
    float: left;
    width: 120px;
    zoom: 1;
  }
  .static article .block .block_content {
    clear: right;
    margin-left: 140px;
  }
  .static article .block p.summary {
    display: none;
  }
  .static #overview #layout_3 {
    display: block;
  }
  .static aside .block img {
    display: none;
  }
  .static aside .block p.main {
    display: none;
  }
  .static footer {
    clear: both;
    padding: 0;
  }
  .responsive menu ul {
    margin: 20px 0;
    padding: 0;
  }
  .responsive menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .responsive menu ul li ul {
    margin: 0 0 0 40px;
  }
  .responsive article .block img {
    clear: left;
    float: left;
    width: 20%;
    zoom: 1;
  }
  .responsive article .block .block_content {
    clear: right;
    margin-left: 20.1%;
  }
  .responsive article .block .block_content h3,
  .responsive article .block .block_content p,
  .responsive article .block .block_content a {
    margin-left: 20px;
  }
  .responsive article .block p.summary {
    display: none;
  }
  .responsive aside .block img {
    display: none;
  }
  .responsive aside .block p.main {
    display: none;
  }
  .responsive #page_wrapper {
    margin: 0 20px;
  }

未完待續

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

有些時候

為了看到光明

你必須冒險闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。

在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。

每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。

一、Static（靜態定位）

靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。

可以用于取消元素之前的定位設置。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個靜態定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會保持在固定的位置。

固定定位的元素會脫離正常的文檔流。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運行結果：

移動前

移動后

比如我們經常看到的網頁右下角顯示的“返回到頂部”，就可以用固定定位來實現。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁面內容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

運行結果：

三、Relative（相對定位）

相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。

不使元素脫離文檔流，空間會保留，不影響其他布局。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

運行結果：

沒使用相對定位之前是這樣的：

使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。

雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。

四、Absolute（絕對定位）

絕對定位使元素相對于最近的非 static 定位祖先元素進行定位。如果沒有這樣的元素，則相對于初始包含塊（initial containing block）。絕對定位的元素會脫離正常的文檔流。

如果該元素為內聯元素，則會變成塊級元素，可直接設置其寬和高的值（讓內聯具備快特性）；
如果該元素為塊級元素，使其寬度根據內容決定。（讓塊具備內聯的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

將第二個設置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。

第二個相對于它的父元素向右偏移100，向下偏移30。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

五、z-index（層級順序的改變）

層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

注意：

默認值是0
數值越大層越靠上
不帶單位
沒有最大值和最小值
可以給負數

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

運行結果：

可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。

以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網頁中元素的位置和堆疊順序。

在實際應用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網頁不僅美觀，而且易于使用和維護。記住，好的設計總是細節和功能的完美結合。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

在線咨詢

上一篇：ERP系統架構設計方案
下一篇：html簡單的二級菜單制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「asp.net core 系列」教你如何引用靜態資源和布局頁的使用

. 前言

1. 布局頁

1.1 RenderSection

1.2 RenderBody

2. 靜態資源引入

2.1 開啟支持

2.2 使用

3. 靜態資源目錄

4. 總結

index.html

index.css

一、Static（靜態定位）

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

五、z-index（層級順序的改變）

您的項目需求