2022年4月12日 星期二

[研究][ASP.NET]登入畫面表單美工設計(二)

[研究][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


沒有留言:

張貼留言