其實我覺得工程師要靠配色去創造不同的風格,還有美學真的是有難度
而且像是一頁式網站的風格的內容範例,
要工程師去想真的是要有想像力啊~
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
這裡都只有Controllers裡面的Entities>產生畫面View
或許後面不夠寫會再回頭創造出資料表的連結也是有可能的,可以期待~
一頁式網站
https://laihao2.com/Home/Contact6
只有Controllers裡面的Entities>產生畫面View
Controllers裡面的Entities
public ActionResult Contact6()
{
ViewBag.Message = "Your contact page.";
return View();
}
解釋程式碼
這段程式碼是使用 ASP.NET MVC 框架來處理 Web 應用程式中的「聯絡」頁面。以下是各部分的解釋:
public ActionResult Contact6()
:
Contact6
的控制器方法(也稱為動作方法)。它的返回類型是 ActionResult
,表示它會返回一個行為結果給前端(例如一個視圖、重定向或錯誤訊息)。ViewBag.Message = "Your contact page.";
:
ViewBag
,這是一個 ASP.NET MVC 中的動態物件,允許在控制器和視圖之間傳遞數據。在這裡,它設置了一個名為 Message
的屬性,並賦值為 "Your contact page."
。這個數據會傳遞到相應的視圖(HTML 頁面)中,並顯示出這個訊息。return View();
:
Contact6
的視圖檔案(如 Contact6.cshtml
)來呈現給使用者。如果沒有指定視圖名稱,它會默認使用與方法名稱相同的視圖。產生畫面View程式碼
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact6";
}
<div class="farm-wrapper">
<h3>作品-一頁式網站</h3>
<h3>建置中</h3>
<div class="farm-content">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Shippori+Mincho&display=swap">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
@section styles {
<link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
}
<title>Wedding Party Invitation</title>
<style>
img {
border-radius: 50%;
}
body {
background-color: pink;
}
dl {
margin-left: 20px;
}
dd {
margin-left: 20px;
}
</style>
</head>
<body>
<header>
<div class="innerWrap">
<h1>
<img src="~/templates/eyecatch.png" alt="Welcome to Our Party">
</h1>
<nav>
<ul class="ffJosefin">
<li><a href="#msgArea">Message</a></li>
<li><a href="#dateArea">Date</a></li>
<li><a href="#formArea">Form</a></li>
</ul>
</nav>
@*<p class="scroll ffJosefin">Scroll<br><img src="~/templates/bar.png" alt=""></p>*@
</div>
</header>
<main>
<section class="msgSec" id="msgArea">
<div class="innerWrap">
<h2 class="ffJosefin">Message</h2>
<p>
親愛的朋友們<br>
我很高興邀請你一起享用一頓美味的晚餐。<br>
</p>
<p>
誠摯邀請您在百忙當中撥空參與,讓我們一起敘舊,享受美食,度過一個美好的夜晚!<br>
請填寫以下表單,告知是否出席。<br>
</p>
<p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
</div>
</section>
<section class="dateSec" id="dateArea">
<div class="innerWrap">
<h2 class="ffJosefin">Save the Date</h2>
<div class="layoutWrap">
<p><img src="~/templates/date_img.jpg" alt=""></p>
<div>
<p class="dateDetailSec">
3022.8.8 <span class="word1">Thu</span><br>
<span class="word2">Start</span> <span class="word3">18:30-</span>
</p>
<section class="accessSec">
<h3 class="ffJosefin">Access</h3>
<p>
永康街1-2-3號<br>
06-123-456-7<br>
</p>
</section>
</div>
</div>
</div>
</section>
<section class="formSec" id="formArea">
<div class="innerWrap">
<h2 class="ffJosefin">RSVP</h2>
<form action="" method="">
<p class="attendRadio">
<label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
<label><input type="radio" name="attend" value="不參加">不參加</label>
</p>
<p>
姓名<input type="text" name="user_name">
</p>
<p>
電子郵件<input type="email" name="user_mail">
</p>
<p>
您的類型
<select name="user_type">
<option value="草食動物">草食動物</option>
<option value="肉食動物">肉食動物</option>
<option value="人類">人類</option>
</select>
</p>
<p class="allergyCheck">
過敏食物<br>
<label><input type="checkbox" name="allergy" value="蛋">蛋</label>
<label><input type="checkbox" name="allergy" value="奶">奶</label>
<label><input type="checkbox" name="allergy" value="小麥">小麥</label>
<label><input type="checkbox" name="allergy" value="大豆">大豆</label>
</p>
<p>
留言
<textarea name="message"></textarea>
</p>
<p class="submitBtn">
<input type="submit" value="Send" class="ffJosefin">
</p>
</form>
</div>
</section>
</main>
@*<footer class="ffJosefin">
<p><small>© Capyzou & Capyco</small></p>
</footer>*@
</body>
</html>
解釋程式碼
這段程式碼是基於 ASP.NET MVC 的一個視圖,用於展示一個婚宴派對邀請的網頁,其中包含標題、訊息、日期、表單等。下面是對這段程式碼的詳細解釋:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
ViewBag.Title = "Contact6";
}
Layout
指定了使用的主佈局檔案,這裡指定的是 ~/Views/Shared/_Layout.cshtml
,用於定義頁面的整體外觀。ViewBag.Title
設置了頁面的標題為 "Contact6"。<div class="farm-wrapper">
<h3>作品-一頁式網站</h3>
<h3>建置中</h3>
farm-wrapper
是主內容的容器,內部包含了兩個 <h3>
標題,顯示為 "作品-一頁式網站" 和 "建置中"。<head>
部分<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Shippori+Mincho&display=swap">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
@section styles {
<link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
}
<title>Wedding Party Invitation</title>
<style>
img { border-radius: 50%; }
body { background-color: pink; }
dl { margin-left: 20px; }
dd { margin-left: 20px; }
</style>
</head>
<meta charset="UTF-8">
設置了 UTF-8 編碼,這是處理多語言顯示的標準。<link>
引入了外部和本地的 CSS 檔案,如 reset.css
和 style.css
,以及 Google 字體 Josefin Sans
和 Shippori Mincho
。@Url.Content()
是 ASP.NET MVC 用於生成內容檔案路徑的方法,確保檔案路徑在不同環境下都正確。<style>
樣式對圖片進行圓角處理,並設置了頁面的背景色為粉紅色。<body>
和內容部分頁面標頭區域
<header>
<div class="innerWrap">
<h1><img src="~/templates/eyecatch.png" alt="Welcome to Our Party"></h1>
<nav>
<ul class="ffJosefin">
<li><a href="#msgArea">Message</a></li>
<li><a href="#dateArea">Date</a></li>
<li><a href="#formArea">Form</a></li>
</ul>
</nav>
</div>
</header>
header
中包含一個圖片作為標題,並提供導航欄,使用者可以快速跳轉到不同的部分(訊息、日期、表單)。Message 區塊
<section class="msgSec" id="msgArea">
<div class="innerWrap">
<h2 class="ffJosefin">Message</h2>
<p>親愛的朋友們<br>我很高興邀請你一起享用一頓美味的晚餐。</p>
<p>誠摯邀請您在百忙當中撥空參與,讓我們一起敘舊,享受美食,度過一個美好的夜晚!</p>
<p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
</div>
</section>
Save the Date 區塊
<section class="dateSec" id="dateArea">
<div class="innerWrap">
<h2 class="ffJosefin">Save the Date</h2>
<div class="layoutWrap">
<p><img src="~/templates/date_img.jpg" alt=""></p>
<div>
<p class="dateDetailSec">
3022.8.8 <span class="word1">Thu</span><br>
<span class="word2">Start</span> <span class="word3">18:30-</span>
</p>
<section class="accessSec">
<h3 class="ffJosefin">Access</h3>
<p>永康街1-2-3號<br>06-123-456-7</p>
</section>
</div>
</div>
</div>
</section>
dateSec
部分用來展示活動的日期和地點,包括活動開始時間以及地點資訊。RSVP 表單區塊
<section class="formSec" id="formArea">
<div class="innerWrap">
<h2 class="ffJosefin">RSVP</h2>
<form action="" method="">
<p class="attendRadio">
<label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
<label><input type="radio" name="attend" value="不參加">不參加</label>
</p>
<p>姓名<input type="text" name="user_name"></p>
<p>電子郵件<input type="email" name="user_mail"></p>
<p>您的類型<select name="user_type"><option value="草食動物">草食動物</option><option value="肉食動物">肉食動物</option><option value="人類">人類</option></select></p>
<p class="allergyCheck">過敏食物<br>
<label><input type="checkbox" name="allergy" value="蛋">蛋</label>
<label><input type="checkbox" name="allergy" value="奶">奶</label>
<label><input type="checkbox" name="allergy" value="小麥">小麥</label>
<label><input type="checkbox" name="allergy" value="大豆">大豆</label>
</p>
<p>留言<textarea name="message"></textarea></p>
<p class="submitBtn"><input type="submit" value="Send" class="ffJosefin"></p>
</form>
</div>
</section>
formSec
部分是用來提交回覆(RSVP)的表單,使用者可以選擇是否參加,並填寫姓名、郵件、類型以及過敏資訊。這段程式碼展示了一個婚宴派對邀請網站,包含訊息、日期、地點和 RSVP 表單。使用了多個區塊來呈現不同的資訊,並使用 CSS 和 Google 字體來美化頁面,整體設計簡潔而直觀。
大家明天見~