整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在之前的4篇的內(nèi)容里，我們較為詳細的介紹了路由以及控制器還有視圖之間的關(guān)系。也就是說，系統(tǒng)如何從用戶的HTTP請求解析到控制器里，然后在控制器里處理數(shù)據(jù)，并返回給視圖，在視圖中顯示出來。這一篇我將為大家介紹基礎(chǔ)的最后一部分，布局頁和靜態(tài)資源引入。
在控制器和視圖那一篇，我們了解到_ViewStart 里設(shè)置了一個Layout屬性的值，這個值正是用來設(shè)置布局頁的。所謂的布局頁，就是視圖的公用代碼。在實際開發(fā)中，布局頁通常存放我們?yōu)檎麄€系統(tǒng)定義的頁面框架，視圖里寫每個視圖的頁面。
回顧一下，默認的_ViewStart里的內(nèi)容是：
@{
Layout = "_Layout";
}
默認的布局頁指定的是名為_Layout的布局頁，在本系列第三篇中，我們得知這個視圖應(yīng)當在Shared文件夾下，那我們進去看一下這個視圖有什么內(nèi)容：
<!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>這是默認的布局頁內(nèi)容，看著挺多的，但是除了一些html代碼，里面還有一些關(guān)鍵的地方需要注意。
RenderSection 分部渲染，在頁面中創(chuàng)建一個標記，表示這個頁面塊將在子視圖（或者是路由的實際渲染視圖）中添加內(nèi)容。
來，我們看一下微軟官方給的注釋：
In layout pages, renders the content of the section named name.
意思就是在布局頁中，渲染名稱為name的分部內(nèi)容。
新創(chuàng)建一個分布頁，名稱為_Layout1：
<html>
<head>
<title>Render 測試</title>
</head>
<body>
@RenderSection("SectionDemo")
</body>
</html>這個布局頁里什么都沒有，只有一個RenderSection。現(xiàn)在我們新建一個控制器：
using Microsoft.AspNetCore.Mvc;
namespace MvcWeb.Controllers
{
public class RenderTestController : Controller
{
public IActionResult Index()
{
return View();
}
}
}創(chuàng)建對應(yīng)的視圖：
Views / RenderTest/Index.cshtml
先設(shè)置布局頁為_Layout1：
@{
Layout = "_Layout1";
}先試試啟動應(yīng)用，訪問：
http://localhost:5006/RenderTest/Index
正常情況下，你應(yīng)該能看到這個頁面：
仔細看一下信息，意思是在 RenderTest/Index.cshtml 視圖中沒有找到 SectionDemo 的分部內(nèi)容。
那么，如何在視圖中設(shè)置分部內(nèi)容呢？
@{
Layout = "_Layout1";
}
@section SectionDemo{
<h1>你好</h1>
}使用 @section <Section 名稱> 后面跟一對大括號，在大括號中間的內(nèi)容就是這個section（分部）的內(nèi)容。
重啟應(yīng)用，然后刷新頁面，你能看到這樣的頁面：
如果不做特殊要求的話，定義在布局頁中的分部塊，視圖必須實現(xiàn)。當然，RenderSection還有一個參數(shù)，可以用來設(shè)置分部不是必須的：
public HtmlString RenderSection(string name, bool required);先看下微軟給的官方注釋：
In a Razor layout page, renders the portion of a content page that is not within a named section.
簡單講，如果在布局頁中設(shè)置了@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>我是視圖的內(nèi)容！</h1>重啟應(yīng)用，刷新剛剛訪問的頁面：
可以看出，RenderBody渲染的位置。
通常情況下，靜態(tài)資源的引入與HTML引用js和css等資源是一致的，但是對于我們在編寫系統(tǒng)時自己創(chuàng)建的腳本和樣式表，asp.net core提供了不同的處理方式。那就是服務(wù)器端壓縮功能。
asp.net core 3.0 的mvc 默認項目是不啟動這個功能的，需要我們額外的開啟支持。
先引入 BuildBundleMinifier
cd MvcWeb # 切換目錄到MvcWeb項目下
dotnet add package BuildBundleMinifier創(chuàng)建 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
}
]每個節(jié)點允許設(shè)置項：
正常情況下在布局頁中，把壓縮后的文件路徑引入即可。不過在開發(fā)中，通常按照以下方式引用：
<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靜態(tài)資源緩存的問題的一個解決方案，這一步是由程序決定的。
environment表示環(huán)境，現(xiàn)在大家知道這個寫法就行，在接下來的篇幅會講。
我們知道到目前為止，我們的靜態(tài)資源都是在wwwroot目錄下。那么我們是否可以修改或者添加別的目錄作為靜態(tài)資源目錄呢？
在Startup.cs文件內(nèi)的Configure方法下有這樣一行代碼：
app.UseStaticFiles();這行代碼的意思就是啟用靜態(tài)文件，程序自動從 wwwroot尋找資源。那么，我們就可以從這個方法入手，設(shè)置我們自己的靜態(tài)資源：
public static IApplicationBuilder UseStaticFiles(this IApplicationBuilder app, StaticFileOptions options);我們找到了這個方法的另一個重載版本，里面有一個參數(shù)類：
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; }
}并沒有發(fā)現(xiàn)我們想要的，先別慌，它還有個父類。我們再去它的父類里看看：
public abstract class SharedOptionsBase
{
protected SharedOptionsBase(SharedOptions sharedOptions);
public IFileProvider FileProvider { get; set; }
public PathString RequestPath { get; set; }
protected SharedOptions SharedOptions { get; }
}這下就比較明了了，需要我們提供一個文件提供器，那么我們來找一個合適的IFileProvider實現(xiàn)類吧：
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")),
});
}在項目的根目錄創(chuàng)建名為OtherStatic的文件夾，然后在里面創(chuàng)建個文件夾，例如： files，并在這個文件夾里隨便添加一個文件。
然后啟動應(yīng)用訪問：
http://localhost:5006/files/<你添加的文件(包括后綴名)>
然后能在瀏覽器中看到這個文件被正確響應(yīng)。
當然，這里存在一個問題，如果在 OtherStatic中的文件在wwwroot也有相同目錄結(jié)構(gòu)的文件存在，這樣訪問就會出現(xiàn)問題。這時候，可以為我們新加的這個配置設(shè)置一個請求前綴：
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"OtherStatic")),
RequestPath = "/other"
});重啟程序，然后訪問：
http://localhost:5006/other/files/<你添加的文件(包括后綴名)>
然后就能看到剛才響應(yīng)的文件，重新訪問之前的路徑，發(fā)現(xiàn)瀏覽器提示404。
在這一篇，我們講解了布局頁的內(nèi)容，靜態(tài)資源的壓縮綁定以及添加一個新的靜態(tài)資源目錄。通過這幾篇內(nèi)容，讓我們對asp.net core mvc有了一個基本的認知。下一篇，我們將重新創(chuàng)建一個項目，并結(jié)合之前的內(nèi)容，以實戰(zhàn)為背景，帶領(lǐng)大家完成一個功能完備的web系統(tǒng)。
求關(guān)注，求點贊，求轉(zhuǎn)發(fā)~~有啥可以評論喲
按以上要求完成以下效果：
（1）初次加載顯示效果如下：
（2）改變窗口大小，當寬度小于 959px 時，頁面效果如下：
（3）改變窗口大小，當寬度小于 720px 時，頁面效果如下：
<!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>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;
}未完待續(xù)
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
有些時候
為了看到光明
你必須冒險闖入黑暗之中
- 2024.03.29 -
CSS定位屬性是用于控制網(wǎng)頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。
在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。
每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。
靜態(tài)定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態(tài)定位狀態(tài)下，不能配合top、bottom、left、right來改變元素的位置。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>
<div>這是一個靜態(tài)定位的元素。</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>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設(shè)置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>運行結(jié)果：
移動前
移動后
比如我們經(jīng)常看到的網(wǎng)頁右下角顯示的“返回到頂部”，就可以用固定定位來實現(xiàn)。
<!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 {
/* 頁面內(nèi)容樣式 */
}
#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>運行結(jié)果：
相對定位是將元素對于它在標準流中的位置進行定位，通過設(shè)置邊移屬性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>運行結(jié)果：
沒使用相對定位之前是這樣的：
使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。
雖然它的位置發(fā)生了變化，但它在標準文檔流中的原位置依然保留。
絕對定位使元素相對于最近的非 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>將第二個設(shè)置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。
第二個相對于它的父元素向右偏移100，向下偏移30。
想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點這里前往學(xué)習(xí)哦！云端源想
層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設(shè)置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。
注意：
代碼示例：
<!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>運行結(jié)果：
可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。
以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網(wǎng)頁中元素的位置和堆疊順序。
在實際應(yīng)用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網(wǎng)頁不僅美觀，而且易于使用和維護。記住，好的設(shè)計總是細節(jié)和功能的完美結(jié)合。
我們下期再見！
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由：云端源想分享
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
