[研究][ASP.NET]登入畫面表單美工設計(六)
2022-04-24
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
只是設計一個還可以看的畫面，筆記一下。
Login.html
<style>
.css-form {
color: #202124;
font-size: 15px;
line-height: 1.4286;
padding: 20px 40px 36px;
height: 340px;
width: 370px;
border-color:blue;
border:1px solid blue;
border-radius: 10px;
margin:60px auto auto auto;
}
.css-input {
white-space: normal;
border: 1px;
display: block;
line-height: 24px;
min-width: 0%;
outline: 1px;
box-sizing: inherit;
border-radius: 4px;
color: #202124;
font-size: 17px;
height: 28px;
margin: 1px 1px 0 1px;
padding: 13px 15px 13px 15px;
text-align: left;
border: 1px solid;
border-color:blue;
width:330px;
}
.css-btn {
font-size: 14px;
border-color: #ffffff;
background-color: #5555ff;
color: #ffffff;
width:117px;
height:40px;
border-radius:10px;
shadow:none;
}
</style>
<div class="css-form">
<h1><center>管理平台</center></h1>
<div style="font-size: 17px; ">帳號</div>
<input id="userid" name="userid" type="email" class="css-input" placeholder="請輸入Email">
<br \>
<div style="font-size: 17px; ">密碼</div>
<input id="pw name="userid" type="password" class="css-input" placeholder="請輸入密碼">
<br \><br \>
<button type="submit" class="css-btn">登入</button>
<button type="button" class="css-btn">忘記密碼</button>
<button type="button" class="css-btn">註冊</button>
</div> |
(下圖)結果
(完)
相關
[研究][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
沒有留言:
張貼留言