10.png
雖說(shuō)簡(jiǎn)易，但對(duì)于啥也不會(huì)的小白的我一點(diǎn)也不簡(jiǎn)易。但經(jīng)過(guò)學(xué)習(xí)和借鑒其他大佬的制作方法后勉強(qiáng)做出一個(gè)像樣的網(wǎng)頁(yè),但做完以后還小有成就感
它的模型來(lái)源于QQ郵箱登錄頁(yè)面：
11.png
1.先下載好網(wǎng)頁(yè)制作的軟件（我用的是sublime），利用時(shí)間學(xué)習(xí)html和css的基本語(yǔ)法，基本可以把大框架搭好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄qq郵箱</title>
</head>
<body>
主體
</body>
</html>
2.我首先制作的是最難的部分：表單。雖然在書(shū)中學(xué)了不少表單的知識(shí)，但確實(shí)實(shí)在不夠用，有時(shí)做到一半的時(shí)候要借助搜索引擎或者尋求其他同學(xué)的幫助，我加了許多 【表示空格】來(lái)把“忘了密碼？”和“注冊(cè)新賬號(hào)”隔開(kāi)（我后來(lái)才知道可以用float語(yǔ)法來(lái)制作）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄qq郵箱</title>
</head>
<body>
<form style="position: absolute;left:749px;top:81px">
<fieldset style="height: 380px;width: 290px;border-color: #e0f3ff;">
<input type="submit"value="微信登錄"style="width:140px;height:40px;">
<input type="submit"value="QQ登錄"style="width:140px;height:40px;"></br></br>
  <input type="text" placeholder=支持QQ號(hào)/郵箱/手機(jī)號(hào)登錄 style="width:260px;height:30px"></br></br>
  <input type="password" placeholder=QQ密碼 style="width:260px;height:30px"></br></br>
<input type="checkbox" value="下次自動(dòng)登錄">下次自動(dòng)登錄</br></br>
<input type="submit" style="text-align:center;width:280px;height:40px;color:white;background-color:#0099FF" value="登    錄" /></br>
<p style="text-align:center;border-color:#99CCFF;color:#99CCFF;font-size:13px;"><a href>掃碼快捷登錄</a></p></br>
<p style="color:#99CCFF;font-size:13px;"><a href>忘了密碼?</a>                                         <a href>注冊(cè)新賬號(hào)</a> </p>
</form>
</body>
</html>
12.png
3.用float【左右浮動(dòng)】把頁(yè)面分成左右兩個(gè)框架，再在兩個(gè)框架的上下各加一段文字，上面的我又用了大量的 （實(shí)在迫不得已，不然會(huì)出現(xiàn)顏色斷層），接著對(duì)框架高度寬度進(jìn)行嚴(yán)格修改（保證不出現(xiàn)滾動(dòng)條），文字大小顏色、背景顏色也套用css中的style語(yǔ)法進(jìn)行修飾，顏色的話，可以利用顏色代碼表來(lái)尋找相應(yīng)的顏色（可能我找的顏色稍有誤差。。），在要加超鏈接的地方套用相應(yīng)語(yǔ)法，就可以做出超鏈接的效果
<a href>需超鏈接的部分</a>
13.png
4.最后加上那個(gè)圖片，適當(dāng)調(diào)整下圖片的大小，它所在的位置可能挺難調(diào)的，最后變成這樣，也算大功告成了
<img src="圖片位置"height="高度" width="寬度" />
10.png
網(wǎng)頁(yè)制作的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.content .login{
float:left;
border:1px solid #1d5494;
}
.content .login2{
float:right;
text-align:center;
border:1px solid #1d5494;
}
h1 {background-color: #C4E1FF}
table{border:1px solid silver;}
#p1{font-size:20px;}
</style>
<title>登錄qq郵箱</title>
</head>
<body>
<div class="login">
<div id="header" style="background-color:#99CCFF;">MAil QQ郵箱                                                                                                                                                                                          
<a href>基本版</a> | <a href>English</a> | <a href>手機(jī)版</a> | <a href>企業(yè)郵箱</a> </p></div>
<div1 id="menu" style="height:600px;width:500px;float:left">
<br/><br/><br/><br/>
<h2 style=color:#0099FF;>QQ郵箱，常聯(lián)系！</h2></br>
<p>2500年前，人們飛鴿傳書(shū)</p>
<p>184年前，莫爾斯發(fā)明了電報(bào)</p>
<p>51年前，第一封電子郵件發(fā)出</p>
<p>今天，QQ郵箱聯(lián)系你、我、他</p></div>
</div1</div>
<img src="C:\Users\pigion\Desktop\9.png"height="400" width="300" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="login2">
<br/><br/>
<form style="position: absolute;left:749px;top:81px">
<fieldset style="height: 380px;width: 290px;border-color: #e0f3ff;">
<input type="submit"value="微信登錄"style="width:140px;height:40px;">
<input type="submit"value="QQ登錄"style="width:140px;height:40px;"></br></br>
  <input type="text" placeholder=支持QQ號(hào)/郵箱/手機(jī)號(hào)登錄 style="width:260px;height:30px"></br></br>
  <input type="password" placeholder=QQ密碼 style="width:260px;height:30px"></br></br>
<input type="checkbox" value="下次自動(dòng)登錄">下次自動(dòng)登錄</br></br>
<input type="submit" style="text-align:center;width:280px;height:40px;color:white;background-color:#0099FF" value="登    錄" /></br>
<p style="text-align:center;border-color:#99CCFF;color:#99CCFF;font-size:13px;"><a href>掃碼快捷登錄</a></p></br>
<p style="color:#99CCFF;font-size:13px;"><a href>忘了密碼?</a>                                         <a href>注冊(cè)新賬號(hào)</a> </p>
</form>
</div>
<div id="footer" style="background-color:#C4E1FF;clear:both;text-align:center;">
<a href>關(guān)于騰訊</a> | <a href>服務(wù)條款</a> | <a href>隱私政策</a> | <a href>客服中心</a> | <a href>聯(lián)系我們</a> | <a href>幫助中心</a> | ?1998 - 2020 Tencent Inc. All Rights Reserved.</div>
</div>
</body>
</html>
