登录界面html源代码_网页制作:一个简易美观的登录界面
登录界面html源代码_网页制作:一个简易美观的登录界面
效果图
在我们做一个页面之前,要先想好他的一个整体布局,也就是我们这里面的login.html主页面,大致结构如下:
接下来,我们先上代码,看一下具体实现方法:
login.html
登录页面
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<p id="image_logo"><img src="data:images/login/fly.png"></p><form method="post" action="login.js"><p><label class="label_input">用户名</label><input type="text" id="username" class="text_field"/></p><p><label class="label_input">密码</label><input type="text" id="password" class="text_field"/></p><div id="login_control"><input type="button" id="btn_login" value="登录" οnclick="login();"/><a id="forget_pwd" href="forget_pwd.html">忘记密码?</a></div>
</form>
说明: 在这个html里面,我们主要对登录界面进行了整体布局规划,利用div将内部的窗口、图片、标签、输入框、按钮、链接进行分块,这样方便我们之后用css对其进行准确的调位置、调边距。同时也对重要的几个东西设置了id和class,这也是方便我们之后用css对其进行准确的调颜色、调字体。 login.js
/**
Created by Kay on 2016/3/8.
*/
function login() {var username = document.getElementById(“username”);
var pass = document.getElementById(“password”);if (username.value == “”) {
alert("请输入用户名");
} else if (pass.value == “”) {
alert("请输入密码");
} else if(username.value == “admin” && pass.value == “123456”){
window.location.href="welcome.html";
} else {
alert("请输入正确的用户名和密码!")
}
}
说明:
这个js是用来判断用户名和密码是否正确的,实现起来还算简单。
可以记一下,界面跳转的语句:
window.location.href=“welcome.html”;
其次就是对输入框的返回值的获取,这里我们用到了document.getElementById的知识点,通过document的对象方法来获得指定ID值的对象。这里要注意是byId,所以前面的html里的username和password要设id值,而不是name值,不然获取不到的!
关于document的介绍可以点击该链接:详解JavaScript Document对象
login.css
body {
background-image: url(“images/login/loginBac.jpg”);;
background-size: 100%;
background-repeat: no-repeat;
}
#login_frame {
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;background-color: rgba(240, 255, 255, 0.5);border-radius: 10px;
text-align: center;
}
form p > * {
display: inline-block;
vertical-align: middle;
}
#image_logo {
margin-top: 22px;
}
.label_input {
font-size: 14px;
font-family: 宋体;
width: 65px;
height: 28px;
line-height: 28px;
text-align: center;color: white;
background-color: #3CD8FF;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.text_field {
width: 278px;
height: 28px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 0;
}
#btn_login {
font-size: 14px;
font-family: 宋体;
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;color: white;
background-color: #3BD9FF;
border-radius: 6px;
border: 0;float: left;
}
#forget_pwd {
font-size: 12px;
color: white;
text-decoration: none;
position: relative;
float: right;
top: 5px;
}
#forget_pwd:hover {
color: blue;
text-decoration: underline;
}
#login_control {
padding: 0 28px;
}
说明:
这个css就是最难部分了,界面之所以能达到如此美观的效果,比如登录的窗口要在屏幕居中显示、背景透明、框的四个角要有一点弧度、登录按钮与输入框上下对齐等等。
摘要:
①让背景图片拉伸且占据整个屏幕:
background-size: 100%;
background-repeat: no-repeat;
②让一个div块在整个屏幕居中:
width: 400px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px
(其中的margin-left:和margin-top最好是设为width和height的一半值,那样是完全居中的效果,当然记得前面要加个负号!)
③设置圆角:
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
④设置背景颜色且加透明效果:
background-color: rgba(240, 255, 255, 0.5);
⑤让输入框和label对齐居中:
form p > * {
display: inline-block;
vertical-align: middle;
}
⑥去除链接的下划线:
text-decoration: underline;
7、给一个label或者button里面的文字设置居中:
width: 120px;
height: 28px;
line-height: 28px;
text-align: center;
(需要设置line-height 其值等于 height 也就是字的行高等于它所在的label、button的高!)
8、给“登录”和“忘记密码”的中间设置间距:
先在html里给他们绑定一块div:
#login_control {
padding: 0 28px;
}
原文链接:网页制作:一个简易美观的登录界面_javascript_Kuroko’s Development Notes-CSDN博客
登录界面html源代码_网页制作:一个简易美观的登录界面相关推荐
- php网页制作代码_如何制作一个简单的HTML登录页面(附代码)
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 制作登录页面需要用到很多CSS属性和HTML ...
- html邮箱代码怎么写_如何制作一个简单的HTML登录页面(附代码)
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 实例:制作一个HTML登录页面,包含邮箱,登 ...
- 网页制作:一个简易美观的登录界面
这次来总结一下公司的Task 1 实现一个登录界面. 登录界面其实在大三的时候就有做过,但是当时做的界面超级low,主要区别在于有无css,由于公司的设计要求,对于该界面的很多细节处理实在不容易.所以 ...
- 页面中color颜色值_计算机毕业设计中实现一个简易美观的登录界面
点击上方"蓝字",关注我们. 实现一个登录界面,展示一下效果: 然后我们看一下代码: 在我们做一个页面之前,要先想好他的一个整体布局,也就是我们这里面的login.html主页面, ...
- HTML+CSS网页制作:一个简易美观的登录页面实例代码
效果: 我们可以将以下代码.复制粘贴到菜鸟教程或者其他可以在线运行代码的网站.就可以在线调试预览代码了: 菜鸟教程在线编辑器https://www.runoob.com/try/try.php?fil ...
- html5制作购物车页面,利用html来制作一个简单美观的购物车界面
首先来展示一下购物车界面: (学习视频分享:html视频教程) 这个页面只是实现了其布局视图,没有使用js或者jquery相关语言,在博主看来是比较利于我们将其加入到自己的程序中的以下是相关代码: i ...
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- 利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
- 用Python制作一个简易的计时器
前言 今天又带来个小玩意 - 用Python制作一个简易的计时器 这个其实也能自定义一些东西的 就比如名字 颜色啥的 自己看着改就行 有想法的朋友也能自己再写写改改出其他的小功能 效果展示 实现代码 ...
- 制作一个简易的计算器
这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...
最新文章
- 2017浅谈面试(一)
- 一图看清全球270家典型区块链服务商
- 使用com.sun.imageio.plugins.png.PNGMetadata读取图片的元数据
- 《Spring实战》读书笔记--SpringMVC之forward与redirect
- 不信任的 .exe 怎么办,用 Windows 沙盒啊!
- Testng 测试框架源码阅读(二)
- Linux Centos7 离线安装docker 【官网翻译和注释】
- MyFlash——美团点评的开源MySQL闪回工具
- java中的fd是什么意思_java中关键字和保留字分别是什么意思
- go语言net包rpc远程调用的使用
- python装饰器是什么意思_对Python装饰器的理解
- java 8 中文字体_jdk安装中文字体,解决Can't read the embedded font LNUHUF+SimSun
- 格力机器人图解_你所不知道的格力机器人战略
- r语言 svycoxph_R语言之生信⑦Cox比例风险模型(单因素)
- C语言程序怎么解决数独,数独解法解决方法
- 基于 Verilog 的经典数字电路设计(14)移位寄存器
- QtreeWidget添加右键菜单
- 为什么kafka客户端需要配置 /etc/hosts文件
- 抖音橱窗和抖音小店有什么区别?四和能聚分析抖音电商两种模式
- PAT - 浙江大学计算机程序设计能力考试简介
热门文章
- Python规范:用用assert
- 相同数据源情况下,使用Kafka实时消费数据 vs 离线环境下全部落表后处理数据,结果存在差异...
- 蓝桥杯训练 2n皇后问题
- 前端开发面试题-JavaScript(一)
- XtraBackup备份mysql5.1.73
- DelphiX中的DXSprite单元中涉及到修改
- [En]Web Forms Syntax Reference
- Ubuntu source list
- 配置隐藏计算机磁盘,这2种隐藏硬盘的方法 你绝对想不到!
- oracle导入多sheet的excel,excel表格数据导入oracle数据库-一个excel表格中有多个sheet,如何将其导入oracle数......