綜合練習二
效果圖：
HTML
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/login.css" />
</head>
<body>
<div id="div1">
<div id="div2">
<img src="img/logo.png" />
</div>
<p id="p1" class="graytext bigfont">與世界分享你的知識、經驗和見解</p>
<input class="txt" type="text" placeholder="手機號或郵箱" />
<input class="txt" type="text" placeholder="密碼"/>
<input class="txt" type="text" placeholder="驗證碼"/>
<button id="btn_login" type="button">登錄</button>
<div id="div3">
<a class="vlink graytext" href="">注冊</a>
<a class="vlink graytext" href="">修改密碼</a>
</div>
<div id="div4" class="graytext">
©2017知乎
</div>
</div>
</body>
</html>
~~~
CSS
~~~
body
{
background-color: black;
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;
font-size: 16px;
}
#div1
{
width:300px;
margin:150px auto;
}
#div2
{
/*width:160px;
margin:0px auto;*/
text-align: center;
margin-bottom: 60px;
}
.graytext
{
color:#555555;
text-align: center;
}
#p1
{
margin-bottom:50px;
}
.bigfont
{
font-size: 18px;
}
/*outline:輸入文本框的外邊線，在獲得焦點的時候出現*/
.txt
{
width:100%;
box-sizing: border-box;
/*border-width: 1px;
border-color: #E8E8E8;*/
border:1px solid #E8E8E8;
height: 48px;
outline: none;
}
.txt::-webkit-input-placeholder{
color:black;
}
.txt::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:black;
}
.txt:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:black;
}
.txt:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:black;
}
#btn_login
{
margin-top:30px;
width:100%;
height:46px;
background-color: #0f88eb;
border:none;
border-radius: 2px;
color:white;
font-size: 16px;
}
#btn_login:hover
{
background-color: red;
}
#div3
{
margin-top:30px;
text-align: center;
}
/*text-decoration:none 去掉超鏈接的下劃線*/
.vlink
{
font-size: 18px;
text-decoration: none;
margin-left:10px;
margin-right:10px;
}
#div4
{
margin-top:30px;
font-size: 12px;
}
~~~
