Web前端之登录表单

仿照书上的例子写的

一、HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆表单</title><link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<form><div class="border-radius"></div><input type="text" name="name" placeholder="用户名"><br><input type="password" name="password" placeholder="密码"><br><input type="submit"  name="submit" value="登陆" class="btn">
</form>
</body>
</html>

二、CSS

body{/*设置背景图片 不平铺 水平居中 垂直居中 固定不动*/background: url("../images/1.png") no-repeat center center fixed;/*保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。*/background-size: cover;padding-top: 20px;
}form{width: 343px;height: 500px;margin: 0 auto;padding: 30px;/*边框宽度为1 直线 黑色透明度为20%*/border: 1px solid rgba(0,0,0,.2);/*盒阴影：水平和垂直偏移量都为0 阴影模糊半径13px 阴影扩展半径3px 黑色透明度50%*/box-shadow: 0 0 13px 3px rgba(0,0,0,.5);/*添加圆角边框*/border-radius: 5px;overflow: hidden;
}
.border-radius{width: 200px;height: 200px;margin: 40px auto;border: 5px solid rgba(255,255,255,.4);border-radius: 200px;background: url("../images/2.jpg") no-repeat  center center scroll;/*如果将scroll改为fixed，图片不可见*/
}
input{font-family: 'Source Sans Pro',sans-serif;font-size: 18px;width: 276px;height: 48px;/*box-sizing: border-box;*/border: 1px solid rgba(255,255,255,.4);border-radius: 4px;display: block;/*使得输入框之间有间隙*/color: #FFF;padding-left: 45px;padding-right: 20px;margin-bottom: 20px;background: rgba(255,255,255,0.4) no-repeat 16px 16px;
}
/*设置 当光标放到type=submit上时 为一只小手*/
input[type=submit]{cursor: pointer;
}
::-webkit-input-placeholder{color: #FFFFFF;
}
/*当该input元素获得焦点时，设置背景颜色及盒阴影*/
input:focus{background-color: rgba(0,0,0,.2);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;
}
.btn{width: 138px;height: 44px;background: #00B0DC;margin: 0 auto;padding: 10.5px 21px;border-radius: 6px;color: #e1e1e1;/*text-align: center;*/
}
*当鼠标悬浮在该元素时，设置边框、文字阴影*/
.btn:hover{border: 1px solid #253737;/*水平大小(必) 垂直大小(必) 模糊的距离 颜色，只有这四种属性值 */text-shadow: 0 1px 0 #333333;
}
/*当该元素激活(在鼠标点击与释放之间发生的事件)时，设置外边距、文字阴影、边框、背景颜色
及文字颜色*/
.btn:active{margin-top: 1px;text-shadow: 0 -1px 0 #333333;border: 1px solid #253737;background: #00B0DC;color: #FFFFFF;
}

结果图

Web前端之登录表单相关推荐

【Web前端HTML+CSS——表单知识点及相关案例】
文章目录表单元素 input元素 select元素 textarea元素按钮元素表单状态(可替换元素不能完全控制) 配合表单元素的其他元素 label datalist(存在兼容性问题,了解即可 ...
Web前端(15)_input表单
1.label标签点击用户名,直接跳到输入框里 <!DOCTYPE html> <html lang="en"> <head><meta ...
Web前端 | HTML | 表格 | 表单
目录--今日任务表格关卡2 表单关卡3 表格表格由 <table> 标签来定义: 每个表格均有若干行,由 <tr> 标签定义: 每行被分割为若干单元格,由 <td ...
web前端培训 - HTML 表单基础知识
1. 创建表单每个表单都以 form 开始标签开始,以 form 结束标签结束.两个标签之间是组成表单的说明标签.控件和按钮.每个控件都有一个 name 属性,用于在提交表单时对数据进行识别.for ...
前端学习之表格、简历制作及登录表单
简单表格制作 1.使用table标签 2.表格里的行用 tr 标签 3.单元格用 td 标签 <body><h3>前端技术阶段划分标准</h3> <tabl ...
带小鱼游动动画的动态登录表单html页面前端源码
大家好,今天给大家介绍一款,带小鱼游动动画的动态登录表单html页面前端源码(图1),送给大家哦,获取方式在本文末尾. 图1 有一条活灵活现的小鱼围着表单游动,给页面添加了许多生机(图2), 图2 源 ...
50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
案例效果本案例基于 vue.js 和 Element UI 实现.随机验证码采用 DOM 操作和 canvas 绘制,可随机生成和刷新:后续程序逻辑直接填入方法即可. Element UI 下载安 ...
javafx 表单_JavaFX 2：创建登录表单
javafx 表单在本教程中,我将使用JavaFX 2和CSS设计一个外观漂亮的Login Form . 它是经典的登录表单,带有用户名和密码以及登录按钮. 为了遵循本教程,我强烈建议您查看以下这些 ...

Web前端之登录表单

Web前端之登录表单相关推荐

最新文章

热门文章