整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
色大氣全屏背景通用登錄頁面html模板是一款適用于PC端和手機(jī)端的登錄界面模板、APP登錄界面模板。現(xiàn)在就業(yè)非常重要的一個項(xiàng)目你準(zhǔn)備好了嗎？下午小編教你從無到有的敲代碼敲出自己博客最重要的項(xiàng)目 高薪就業(yè)輕松2倍。
<!DOCTYPE html>
<html lang="en">
<head>
<title>藍(lán)色登錄界面HTML代碼</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--圖標(biāo)樣式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<!--主要樣式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/img-01.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="images/avatar-01.jpg" alt="AVATAR">
</div>
<span class="login100-form-title p-t-20 p-b-45">Hello</span>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入用戶名">
<input class="input100" type="text" name="username" placeholder="用戶名" autocomplete="off">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="請輸入密碼">
<input class="input100" type="password" name="pass" placeholder="密碼">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
</div>
<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn">登 錄</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
<a href="#" class="txt1">忘記密碼？</a>
</div>
<div class="text-center w-full">
<a class="txt1" href="#">
立即注冊
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-1.12.4.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
大家需要這個項(xiàng)目css代碼，js，圖片做練習(xí)的可以找我免費(fèi)領(lǐng)取，如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個字 找我領(lǐng)取 24小時(shí)在線！
tml的主體結(jié)構(gòu)
標(biāo)簽的分類
標(biāo)簽的關(guān)系
sublime快捷鍵
單標(biāo)簽
雙標(biāo)簽
路徑
超鏈接額外知識運(yùn)用
錨點(diǎn)
空連接
超鏈接的優(yōu)化寫法 寫在head標(biāo)簽中
特殊標(biāo)記符
列表
<!doctype html><html><head>
單標(biāo)簽
<!doctype html>
雙標(biāo)簽
<head></head>
包含（嵌套關(guān)系、父子關(guān)系）
<head>
并列
<head></head><body></body>
| 快捷鍵 | 作用 |
|---|---|
| html:xt + tab | html4.01模板【新版本可能失效】 |
| html + tab | html5模板 |
| tab | 補(bǔ)全標(biāo)簽 |
| ctrl + shift + d | 快速復(fù)制一行 |
| ctrl + shift + k | 快速刪除一行 |
| ctrl + 鼠標(biāo)左鍵單擊 | 集體輸入 |
| ctrl + h | 查找替換 |
| ctrl + f | 查找 |
| ctrl + / | 注釋 |
| ctrl + L | 快速選中當(dāng)前行 |
| ctrl + shift + ↑(↓) | 代碼的快速上移和下移 |
<!-- --> 注釋標(biāo)簽<br /> 換行標(biāo)簽<hr /> 水平線標(biāo)簽<img src="logo.gif" alt="logo" title="這是淘寶的logo" width="200" height="100" />圖片標(biāo)簽
<p></p> 段落標(biāo)簽<h1></h1> 標(biāo)題標(biāo)簽 h1 - h6<font></font> 文本標(biāo)簽<strong></strong> 文本加粗標(biāo)簽，有語音加強(qiáng)<b></b> 文本加粗標(biāo)簽<em></em> 文字傾斜，有語音加強(qiáng)<i></i> 文字傾斜<del></del> 刪除線，有語音加強(qiáng)<s></s> 刪除線<ins></ins> 下劃線，有語音加強(qiáng)<u></u> 下劃線<a title="百度" target="_blank">百度</a> 超鏈接
相對路徑
同一個目錄下直接寫文件的名稱就可以
文件和圖片在下一級目錄中，需要文件夾名稱 + \ + 文件名稱
圖片在上一級目錄中 ../ + 文件名稱
圖片在上一級的其它文件夾中 ../ + 文件夾名稱 + 文件名稱
總結(jié)：找到下級目錄使用/，找到上一級目錄使用../
絕對路徑
從盤符中開始的，這種路徑不能使用！因?yàn)轫?xiàng)目最后都要移動，文件的路徑都是會變的。如：c:\baidu\logo.jpg
錨點(diǎn)
1.設(shè)置一個錨點(diǎn) 設(shè)置一個id
<div id="top"></div>
2.超鏈接到錨點(diǎn)
<a href="#top"></a>
空連接
<a href="#"></a>
超鏈接的優(yōu)化寫法 寫在head標(biāo)簽中
<base targer="_blank">
讓所有的超鏈接都是從新窗口中打開
| 空格 | |
|---|---|
| < | < |
| > | > |
| ? | © |
更多信息請查閱
無序列表
<ul type="disc">
類型：disc 默認(rèn)小黑點(diǎn) circle 空心小圓點(diǎn) square 小方塊
有序列表
<ol type="A" start="C">
類型：a A 字母順序 i I羅馬順序 1數(shù)字 start 表示開始的位置
自定義列表
<dl>
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
