解釋導覽頁的程式碼跟關於網頁的內容
解釋導覽頁的程式碼
這段程式碼是使用 ASP.NET MVC 框架構建的前端網頁模板。主要包含 HTML、C# Razor 語法,以及引入了 Bootstrap 5 框架來美化頁面。下面逐步解釋這個程式碼:
<!DOCTYPE html>
<html lang="zh-Hant-TW">
這段標記宣告了文件的類型為 HTML 並指定網頁語言為繁體中文(台灣)。
<head>
區塊<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title - 來好</title>
meta charset="utf-8"
設定了字符編碼為 UTF-8,支援多語言顯示。meta name="viewport"
是為了讓網頁在行動裝置上自動調整大小。<title>
使用 @ViewBag.Title
來動態生成標題,並附加固定標題「來好」。<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
這行程式碼通過 CDN 加載 Bootstrap 5 的 CSS,為頁面提供響應式布局和預定義樣式。
<style>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
min-height: 100vh;
}
.navbar-nav .nav-link {
color: rgba(255,255,255,.55);
}
.navbar-nav .nav-link:hover {
color: rgba(255,255,255,.75);
}
.dropdown-menu {
background-color: #343a40;
}
.dropdown-item {
color: rgba(255,255,255,.55);
}
.dropdown-item:hover {
background-color: #495057;
color: #fff;
}
</style>
body
設定使用 Flexbox,頁面內容會依據視窗大小自動調整,保證頁面佔滿整個視窗。.content
設定頁面主要內容的最小高度和內邊距,確保內容充滿視窗並具有良好的排版效果。navbar
、dropdown-menu
和 dropdown-item
的樣式自定義了顏色,這部分用來調整導覽列中的鏈接、下拉菜單的配色和效果。<nav>
導覽列<nav class="navbar navbar-expand-md navbar-dark bg-dark">
navbar-expand-md
設定導覽列在中等及以上螢幕寬度下顯示完整導航,並在更小的螢幕上折疊。navbar-dark bg-dark
為導覽列設定深色背景及深色字體樣式。<a class="navbar-brand" href="@Url.Action("About", "Home")">關於</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@Url.Action("About", "Home")
動態生成「關於」頁面的 URL,指向 Home
控制器的 About
動作方法。<div class="content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 來好</p>
</footer>
</div>
@RenderBody()
用於在頁面中顯示子視圖的內容,這是 Razor 引擎動態注入的佔位符。<footer>
) 顯示當前年份和固定的「來好」文字,年份通過 @DateTime.Now.Year
動態生成。<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
這段程式碼引入了 Bootstrap 5 的 JavaScript 功能,支援如下拉選單等互動效果。
@RenderSection("scripts", required: false)
@RenderSection("scripts")
是一個佔位符,允許子視圖在需要時插入自己的 JavaScript 代碼。required: false
表示這個區塊是可選的。
關於網頁的內容
https://laihao2.com/Home/About
解釋程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "About";
}
@*<h2>@ViewBag.Title.</h2>*@
@*<h3>@ViewBag.Message</h3>*@
@*<p>Use this area to provide additional information.</p>*@
<h2></h2>
<h3></h3>
@*<img src="~/templates/myphoto.jpg" alt="My Photo" />*@
@*<img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" />*@
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>關於來好</title>
<style>
img {
border-radius: 50%;
}
body {
background-color: pink;
}
dl {
margin-left: 20px;
}
dd {
margin-left: 20px;
}
p::before {
content: "♥";
}
/*虛擬元素*/
</style>
</head>
<body>
<h1>親愛的訪客</h1>
<h2>很高興認識你</h2>
@*<h2>自我介紹</h2>*@
<img src="~/templates/webphoto.jpg" alt="My Photo" style="width: 200px; height: auto; float: left; " />
<h3>■ 興趣</h3>
<p>
擁有多年經驗的軟體開發,
有著深厚的熱情和豐富的實踐經驗。
對各國文化有著深厚的興趣,並且一直在努力學習語文。
這不僅豐富了語言能力,
也加深了對文化的理解。
喜歡結合不同的文化和技術風格,
創造出獨具特色的解決方案。
期待與您合作,共同創造出色的作品!
</p>
<p>
長年、開発経験を持つソフトウェア エンジニアであり、
ソフトウェア開発に対する深い情熱と豊富な実務経験を持っています。
日本文化に深い興味があり、日本語を一生懸命勉強してきました。
これにより日本語力が豊かになっただけでなく、日本文化への理解も深まりました。
仕事では、豊富な経験から磨いた高い技術と国際的な文化背景を活かして、
ソリューションを作成することを楽しんでいます。
素晴らしい作品を一緒に作っていけることを楽しみにしています!
</p>
<h3>
相關證照
</h3>
<p>
PL-900 Power Platform 商業智慧應用基礎認證/
AI-900 AI 人工智慧基礎認證/
GS1條碼管理師/
EPCIE 物聯網工程師認證/
Google Ads 搜尋廣告認證/
Google Analytics (分析) 認證
</p>
<h3>
聯繫方式
</h3>
@*<p>Email:jzs2home@hotmail.com</p>*@
<dl style="margin-left: 20px;">
<dt>Email:</dt>
<dd style="margin-left: 20px;">
<a href="mailto:jzs2home@hotmail.com">jzs2home@hotmail.com</a>
</dd>
<dt>(匿名)留言板:</dt>
<dd style="margin-left: 20px;">
<a href="http://jzs2home.byethost15.com/index.php?i=1" target="_blank">http://jzs2home.byethost15.com/index.php?i=1</a>
</dd>
</dl>
<img src="~/templates/microsoftAI900.png" alt="microsoftAI900" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEADSSEARCH.png" alt="GOOGLEADSSEARCH" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEANALYTICS.png" alt="GOOGLEANALYTICS" style="width:200px; height:auto;" />
</body>
</html>
這段程式碼是 ASP.NET MVC 中的 Razor 檢視,展示了一個「關於」頁面的 HTML 與 C# 結合的結構。具體解釋如下:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "About";
}
Layout
設定了這個檢視使用的母版頁面,路徑是 ~/Views/Shared/_Layout.cshtml
。這個母版頁面將包含共用的頁面結構,如導航列、頁腳等。ViewBag.Title = "About";
動態設置了頁面的標題為「About」,這個值會被母版頁面中的 @ViewBag.Title
語法讀取,用於顯示在 <title>
標籤或其他地方。<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>關於來好</title>
<!DOCTYPE html>
定義了文件類型為 HTML5。lang="zh-Hant-TW"
指定語言為繁體中文(台灣)。<meta charset="UTF-8">
設置字符編碼為 UTF-8,支援多語言內容。link
標籤引入了外部的 CSS 文件 css/style.css
,用於設計頁面樣式。<title>
標籤設置了頁面的標題為「關於來好」。<style>
img {
border-radius: 50%;
}
body {
background-color: pink;
}
dl {
margin-left: 20px;
}
dd {
margin-left: 20px;
}
p::before {
content: "♥";
}
</style>
img
) 被設置為圓形 (border-radius: 50%
)。background-color: pink
)。dl
和 dd
定義列表的左側內邊距調整為 20px,讓內容排列更加美觀。p::before
定義段落的虛擬元素,為每個段落前添加了一個「♥」符號。<h1>親愛的訪客</h1>
<h2>很高興認識你</h2>
<img src="~/templates/webphoto.jpg" alt="My Photo" style="width: 200px; height: auto; float: left;" />
<h1>
和 <h2>
標籤分別表示頁面主標題和副標題。~/templates/webphoto.jpg
的圖片,寬度設為 200px,且圖片浮動至左側 (float: left;
) 以便讓文本內容環繞圖片。<h3>■ 興趣</h3>
<p>
擁有多年經驗的軟體開發,
有著深厚的熱情和豐富的實踐經驗。
...
</p>
<p>
長年、開発経験を持つソフトウェア エンジニアであり、
...
</p>
<h3>相關證照</h3>
<p>
PL-900 Power Platform 商業智慧應用基礎認證/
AI-900 AI 人工智慧基礎認證/
...
</p>
<dl>
<dt>Email:</dt>
<dd><a href="mailto:jzs2home@hotmail.com">jzs2home@hotmail.com</a></dd>
<dt>(匿名)留言板:</dt>
<dd><a href="http://jzs2home.byethost15.com/index.php?i=1" target="_blank">留言板</a></dd>
</dl>
<dl>
, <dt>
, <dd>
) 來排列 email 和匿名留言板的地址,並使用 <a>
標籤創建超連結。<img src="~/templates/microsoftAI900.png" alt="microsoftAI900" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEADSSEARCH.png" alt="GOOGLEADSSEARCH" style="width:200px; height:auto;" />
<img src="~/templates/GOOGLEANALYTICS.png" alt="GOOGLEANALYTICS" style="width:200px; height:auto;" />
<img>
標籤展示了多個認證的徽章圖片,如 Microsoft AI-900、Google Ads 搜尋廣告和 Google Analytics 認證。這個「關於」頁面展示了個人的技術背景、興趣愛好、相關認證和聯繫方式,並通過 CSS 美化了網頁佈局。
但是~
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
就算沒有資料庫還是要有Controllers裡面的Entities之後才是產生畫面View
解釋Controllers裡面的程式碼
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
這段程式碼是 ASP.NET MVC 控制器中的一個動作方法 (Action Method),名稱為 About
。具體解釋如下:
public ActionResult About()
public
: 此方法是公開的,表示可以從外部訪問。ActionResult
: 返回值類型是 ActionResult
,這是 ASP.NET MVC 中所有動作結果的基類,表示該動作會產生一個 HTTP 回應。常見的結果類型包括 ViewResult
(渲染一個視圖頁面)、RedirectResult
(重定向到另一個 URL) 等。About()
: 這是動作方法的名稱,在此處表示處理應用程式的「關於」頁面。ViewBag.Message
ViewBag.Message = "Your application description page.";
ViewBag
是 ASP.NET MVC 中用來在控制器和視圖之間傳遞數據的一種動態屬性機制。它允許你在控制器中設置數據,然後在視圖中讀取這些數據。ViewBag.Message
設置為一個字串 "Your application description page."
,這是一個簡單的訊息,表示這個頁面用來描述應用程式。在對應的視圖 (About.cshtml
) 中,可以通過 @ViewBag.Message
來顯示這個訊息。return View();
View()
是控制器動作返回的一個方法,這個方法會渲染與該動作名稱相對應的視圖頁面。在這裡,它將返回一個名為 About
的視圖。ASP.NET MVC 會根據慣例尋找位於 Views/Home/About.cshtml
的視圖文件,來渲染該頁面。/Home/About
路徑時,這個 About
動作會執行。它會設置 ViewBag.Message
,然後返回與之對應的 About.cshtml
視圖。視圖將可以使用 ViewBag.Message
顯示相應的訊息內容。大家明天見,再來就是工業風網站的首頁~