[研究][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
沒有留言:
張貼留言