參加的項目要求書寫一個新的登陸界面，參考了一些百度的寫法，寫了一個固定布局的登陸界面。
第一次正八經兒寫HTML，寫的不好，應該還存在一些問題，後續會不斷把這個代碼及這篇文章進行改進。
代碼及效果圖如下：
LoginActivity.html
<!doctype html>
<html long="zh">
<head>
<meta charset="utf-8">
<title>客戶應用平台</title>
<link rel="stylesheet" href="LoginStyle.css">
</head>
<body>
<!--頭部顯示-->
<nav class="header" id="head">
<img class="Logo" src="LOGO.jpg">
<h1 class="LogoName">客戶應用平台</h1>
<img src="TopPic.png" width="100%" height="53">
</nav>
<!--中部内容-->
<div class="wrap" id="wrap">
<div class="logWrap" >
<img id="banner" class="banner" src="demo2.jpg" >
<div class="logShow">
<!-- 頭部提示資訊 -->
<div class="LoginIndex LoginTop">
<p class="p1">登入</p>
</div>
<!-- 輸入框 -->
<div class="InputStr">
<img src="user.png" width="20" height="20" alt=""/>
<input type="text"
placeholder="輸入使用者名" />
</div>
<div class="InputStr">
<img src="password.png" width="20" height="20" alt=""/>
<input type="text"
placeholder="輸入使用者密碼" />
</div>
<div class="LoginButton">
<a href="index.html" target="_self"><button>登 錄</button></a>
</div>
</div>
</div>
</div>
</body>
</html> LoginStyle.css
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
#head{
height: 90px;
}
#head .Logo{
width: 72px;
height: 72px;
vertical-align: middle;
}
#head .LogoName{
font-size:40px;
font-family:"楷體";
color:#00BFFF;
display:inline;
position: absolute;
top: 14px;
}
#wrap {
height: 408px;
width: 100%;
position:relative;
}
#wrap .logWrap{
height: 408px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
right: 50%;
margin: 0 0 0 -300px;
display: inline-block;
}
#wrap .banner{
height: 300px;
width: 300px;
position: absolute;
top: 26%;
}
#wrap .logShow {
float: right;
height: 408px;
width: 368px;
position: absolute;
top: 0%;
left: 55%;
right: 45%
}
.LoginButton a button {
width: 100%;
height: 45px;
background-color: #21a4ee;
border: none;
color: white;
font-size: 18px;
}
.logShow .LoginIndex.LoginTop .p1 {
display: inline-block;
font-size: 28px;
margin-top: 110px;
width: 86%;
}
#wrap .logShow .LoginIndex.LoginTop {
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
.logShow .InputStr img {
position: absolute;
top: 12px;
left: 8px;
}
.logShow .InputStr input {
width: 100%;
height: 42px;
text-indent: 2.5rem;
}
#wrap .logShow .InputStr {
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
#wrap .logShow .LoginButton {
width: 86%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
} ![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)