整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗？下午小编教你从无到有的敲代码敲出自己博客最重要的项目 高薪就业轻松2倍。
<!DOCTYPE html>
<html lang="en">
<head>
<title>蓝色登录界面HTML代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--图标样式-->
<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>
大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线！
tml的主体结构
标签的分类
标签的关系
sublime快捷键
单标签
双标签
路径
超链接额外知识运用
锚点
空连接
超链接的优化写法 写在head标签中
特殊标记符
列表
<!doctype html><html><head>
单标签
<!doctype html>
双标签
<head></head>
包含（嵌套关系、父子关系）
<head>
并列
<head></head><body></body>
| 快捷键 | 作用 |
|---|---|
| html:xt + tab | html4.01模板【新版本可能失效】 |
| html + tab | html5模板 |
| tab | 补全标签 |
| ctrl + shift + d | 快速复制一行 |
| ctrl + shift + k | 快速删除一行 |
| ctrl + 鼠标左键单击 | 集体输入 |
| ctrl + h | 查找替换 |
| ctrl + f | 查找 |
| ctrl + / | 注释 |
| ctrl + L | 快速选中当前行 |
| ctrl + shift + ↑(↓) | 代码的快速上移和下移 |
<!-- --> 注释标签<br /> 换行标签<hr /> 水平线标签<img src="logo.gif" alt="logo" title="这是淘宝的logo" width="200" height="100" />图片标签
<p></p> 段落标签<h1></h1> 标题标签 h1 - h6<font></font> 文本标签<strong></strong> 文本加粗标签，有语音加强<b></b> 文本加粗标签<em></em> 文字倾斜，有语音加强<i></i> 文字倾斜<del></del> 删除线，有语音加强<s></s> 删除线<ins></ins> 下划线，有语音加强<u></u> 下划线<a href="http://www.baidu.com" title="百度" target="_blank">百度</a> 超链接
相对路径
同一个目录下直接写文件的名称就可以
文件和图片在下一级目录中，需要文件夹名称 + \ + 文件名称
图片在上一级目录中 ../ + 文件名称
图片在上一级的其它文件夹中 ../ + 文件夹名称 + 文件名称
总结：找到下级目录使用/，找到上一级目录使用../
绝对路径
从盘符中开始的，这种路径不能使用！因为项目最后都要移动，文件的路径都是会变的。如：c:\baidu\logo.jpg
锚点
1.设置一个锚点 设置一个id
<div id="top"></div>
2.超链接到锚点
<a href="#top"></a>
空连接
<a href="#"></a>
超链接的优化写法 写在head标签中
<base targer="_blank">
让所有的超链接都是从新窗口中打开
| 空格 | |
|---|---|
| < | < |
| > | > |
| © | © |
更多信息请查阅
无序列表
<ul type="disc">
类型：disc 默认小黑点 circle 空心小圆点 square 小方块
有序列表
<ol type="A" start="C">
类型：a A 字母顺序 i I罗马顺序 1数字 start 表示开始的位置
自定义列表
<dl>
*请认真填写需求信息，我们会在24小时内与您取得联系。
