一、网页介绍
1 网页简介：此作品为用户登岸界面的HTML，采用最简单最盛行的DIV+CSS布局开发,界面简洁干净，得当初学者（大学生、网站自学者）学习利用，代码均配有表明，方便学习。也可以用作web前端期末大作业参考。网站登岸页面源代码
2.开发工具：网站登岸页面源代码均采用HTML/CSS/JS前端最基础的语言编写，可利用如下软件查看及修改HBuilder、DW(Dreamweaver)、Vscode 、Notepad++、Sublime 、Webstorm、Text ，个要建议利用HBuilder软件。
3.知识应用：技术方面重要应用了网页知识中的: Div+CSS、from 、input、Table、img图片的引入以及配景图片的利用、以及其他CSS的知识点。
二、界面展示
三、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="login">
<div class="login_title">
<p><img src="images/tyLOGO.png" style="width:80px;height:80px;margin-right:30px;"/>XXX学校档案管理体系登岸页面</p>
</div>
<div class="login_main">
<div class="main_left">
<img src="./images/login_left.png" alt="">
</div>
<div class="main_right">
<div class="right_title">用户登录</div>
<form action="">
<div class="username">
<img src="./images/username.png" alt="">
<input type="text" placeholder="请输入账号">
</div>
<div class="password">
<img src="./images/password.png" alt="">
<input type="text" placeholder="请输入密码">
</div>
<div class="yes_login"><a href="">登 录</a></div>
<center><p style="margin-top:20px;font-size:12px;color:#FA6F03;">登录遇到问题，请接洽管理员</p></center>
</form>
</div>
</div>
<div class="login_footer">
<p class="name">版权全部：XXX学校XX同砚全部</p>
<p>建议浏览器：IE8及以上、360、谷歌、Firefox </p>
<p>技术支持：XXX学校XX同砚 接洽电话：15285559315</p>
</div>
</div>
</body>
</html>
四、CSS代码
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
/*将标签原有的默认表里边距去掉*/
fieldset, img, input, button {
border: none; /*去掉边框*/
padding: 0;
margin: 0;
outline-style: none; /*去掉环绕边框*/
}
ul, ol {
list-style: none; /*去掉原样式中的小斑点*/
/*ctrl+alt+l*/
}
input {
padding-top: 0;
padding-bottom: 0;
假如我的博客对你有帮助、假如你喜欢我的博客内容，请 “ |
