2022年4月24日 星期日

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

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

2022-04-24

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

只是設計一個還可以看的畫面,筆記一下。

Login.html

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset="UTF-8">
<style>
.css-form {
    border: 2px solid rgb(211, 215, 236);
    border-radius: 42px;
    box-shadow: rgb(45 64 150 / 6%) 0px 6px 0px;
    padding: 24px;
    position: relative;
	width:500px;
	height:350px;
	margin-left:auto;
	margin-right:auto;
}
.css-input {
    box-sizing: border-box;
    outline: none;
    width: 95%;
    padding: 18px 18px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.25px;
    font-weight: 600;
    color: rgb(44, 42, 80);
    border-radius: 42px;
    border: 2px solid rgb(211, 215, 236);
	margin:10px;
}
.css-btn {
    box-sizing: border-box;
    outline: none;
    width: 28%;
    padding: 18px 24px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.25px;
    font-weight: 600;
    color: rgb(44, 42, 80);
    border-radius: 42px;
    border: 2px solid rgb(211, 215, 236);
	margin:10px;
}
</style>
</head>
<body>
<div class="css-form">
<center><h1>管理平台</h1></center>
<input type="text" placeholder="電子郵箱" class="css-input">
<input type="password" placeholder="密碼" class="css-input">
<center>
<input type="button" class="css-btn" value="登入">
<input type="button" class="css-btn" value="忘記密碼">
<input type="button" class="css-btn" value="註冊">
</center>
</div>
</body>
</html>



(下圖)結果



(完)

相關

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


沒有留言:

張貼留言