html+css樸實(shí)無(wú)華的登錄頁(yè)面
1樓源碼鏈接
剛接觸前端，有問(wèn)題歡迎指出，不斷修改才會(huì)進(jìn)步。
Code-----------------------------------------------------------------
<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="utf-8">
<title>主頁(yè)</title>
<style?type="text/css">
????body{
????????background-image:?linear-gradient(to?left,pink,rgb(29,?142,?235));
????}
????.A{
????????width:?100%;
????????height:?97vh;
????????display:?flex;
????????justify-content:?center;
????????align-items:?center;
????}
????.box{
????????width:?400px;
????????height:?600px;
????????background-image:?linear-gradient(to?left,rgb(255,?192,?236),rgba(0,?204,?255,?0.349));
????????box-shadow:?2px?2px?2px?2px?rgba(0,?0,?0,?0.267);
????}
????.t1{
????????font-size:?30px;
????}
????.t2{
????????font-size:?13px;
????????margin-bottom:?30px;
????}
????p{
????????color:?pink;
????}
????input.user,input.pass{
????????width:?360px;
????????height:?37px;
????????border:?none;
????????outline:?none;
????????margin-top:?35px;
????????border-radius:?20px;
????}
????.text{
????????display:?flex;
????????flex-direction:?column;
????????align-items:?center;
????}
????.forget{
????????text-decoration:?none;
????????color:?rgba(0,?0,?0,?0.349);
????????font-size:?13px;
????????float:?right;
????????margin-left:?300px;
????????margin-top:?5px;
????}
????.forget:hover{
????????color:?rgb(168,?47,?142);
????????transition-duration:?2s;
????}
????#t3{
????????color:?rgba(0,?0,?0,?0.315);
????????font-size:?10px;
????????margin-top:?120px;
????}
????#st{
????????text-decoration:?none;
????????margin-top:?100px;
????????border:?1px?rgba(255,?192,?203,?0.363)?solid;
????????width:?90px;
????????height:?30px;
????????background-image:?linear-gradient(to?left,rgba(255,?0,?221,?0.199),rgba(0,?255,?242,?0.425));
????????text-align:?center;
????????border-radius:?15px;
????????line-height:?30px;
????????color:?rgba(0,?0,?0,?0.651);
????}
????#st:hover{
????????background-color:?pink;
????????transition-duration:?1s;
????}
</style>
</head>
<body>
????<div?class="A">
????????<div?class="box">
????????????<div?class="text">
????????????????<p?class="t1">BILIBILI</p>
????????????????<p?class="t2">歡迎回來(lái)</p>
????????????????<input?type="text"?placeholder="手機(jī)號(hào)/用戶(hù)名"?autocomplete="on"?class="user">
????????????????<input?type="password"?placeholder="密碼"?class="pass">
????????????????<a?href="https://www.bilibili.com/";?class="forget">忘記密碼?</a>
????????????????<input?type="submit"?id="st">
????????????????<p?id="t3">上海寬娛數(shù)碼科技有限公司</p>
????????????</div>
????????</div>
????</div>
</body>
</html>
