[研究][ASP.NET]登入畫面表單美工設計(二)
2022-04-12
環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
只是設計一個還可以看的畫面,筆記一下。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default6.aspx.cs"
Inherits="WebApplication1.Default6" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<%--bootstrap.css 非必須--%>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="/favicon.ico" />
<style>
.LoginForm {
padding: 10px;
width: 400px;
border: 4px solid #1199CD;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
margin-bottom: 30px;
border-radius: 12px;
overflow: auto;
}
</style>
</head>
<body>
<br />
<form id="form1" runat="server">
<div class="LoginForm">
登入
<hr />
<p>
帳 號:
<input name="TextBox1" type="text" id="TextBox1" autocomplete="Off" /><br />
</p>
<p>
密 碼:
<input name="TextBox2" type="password" id="TextBox2" autocomplete="Off" /><br />
</p>
<p>
驗證碼:
<input name="txtCaptchaCode" type="text" id="txtCaptchaCode" autocomplete="Off" style="width: 60px;" />
<img src="GetCaptchaCode.aspx" width="69" height="20" />
</p>
<p style="text-align: center">
<input type="submit" name="Button1" value="登入" id="Button1" />
</p>
<span id="Label_Message"></span>
</div>
</form>
</body>
</html>
|
(下圖)結果
(下圖)結果 (有 bootstrap.css)(完)
相關
[研究][ASP.NET]登入畫面表單美工設計(六)
[研究][ASP.NET]登入畫面表單美工設計(五)
[研究][ASP.NET]登入畫面表單美工設計(四)
[研究][ASP.NET]登入畫面表單美工設計(三)
https://shaurong.blogspot.com/2022/04/aspnet_14.html
[研究][ASP.NET]登入畫面表單美工設計(二)
https://shaurong.blogspot.com/2022/04/aspnet_12.html
[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html


沒有留言:
張貼留言