index.html:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一個簡單的登錄網頁</title> <link href="css/index.css" rel="stylesheet" type="text/css"> </head> <body > <!--align用於設置子內容的居中--> <div align="center"> <br><br><br><br> <h2>登錄例子</h2> <div id="center"> <!--登錄輸入框--> <div class="login" align="left"> <div class="login_line" style="margin-top:35px"> <div style="float:left;margin-left:10px">賬號:</div> <input type="text" style="width:140px;float:left;margin-left:10px"/> </div> <div class="login_line"> <div style="float:left;margin-left:10px">密碼:</div> <input type="password" style="width:140px;float:left;margin-left:10px"/> </div> <div class="login_line"> <input type="button" value="登錄" style="width:60px;float:left;margin-left:10px"/> <input type="button" value="重置" style="width:60px;float:left;margin-left:10px"/> </div> </div> <img style="width:100px; height:100px; float:left;margin:350px 0px 0px 200px;border-radius:50px" src="img/leaf.jpg"> </div> </div> </body> </html>
index.css代碼如下
#center {
width:800px;
height:500px;
background-image:url(../img/bg.png);
background-repeat:no-repeat;
margin:50px 0px 0px 0px;
}
#center .login {
float: left;
height: 150px;
width: 230px;
margin: 150px 0px 0px 100px;
}
#center .login_line {
width:204px;
height:30px;
margin-top: 5px;
color: #FFFFFF;
}
筆記：引入css的方式：<link href="css/index.css" rel="stylesheet" type="text/css">
圖片圓弧處理：<img style="width:100px; height:100px;;border-radius:50px" src="img/leaf.jpg">
radius弧度，是以xx長的半徑畫圓，來處理的