一个基于html,css,js,JQuery的登录界面

github地址:https://github.com/BgirlStar/myTest_final

任务需求:

可进行部分改变,但颜色和风格要保持不变。

完成点:1.login按钮的隐藏与弹出

2.弹出框样式(三角,阴影,圆角)

3.输入框图片和默认字符

4.背景按钮渐变

5.js内置用户名密码,点击登录后弹出对话框

完成后图片:

加入jquery插件 实现了弹出框的隐藏与弹出,代码见js/index.js js/jquery.js

内置email和密码 代码见js/need.js

素材包见js/showBo.js

详细代码见github    其中问题后面再改。

时间: 2024-10-29 10:46:13

一个基于html,css,js,JQuery的登录界面的相关文章

基于Animate.css的jQuery动画特效插件

janimate是一款非常实用的基于Animate.css的jQuery动画特效插件.该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果.通过该插件可以简化Animate.css的使用,非常方便. 使用这个插件可以通过jQuery选择器来选择你想要进行动画的元素,然后调用jAnimate()或jAnimateOnce()方法,并传入你想要执行动画效果的名称即可. 效果演示:http://www.htmleaf.com/Demo/201504121666.html

基于animate.css的jQuery文字动画插件

Morphext是一款简单.高性能和跨浏览器的jQuery文字动画插件.该文字动画jQuery插件基于Animate.css.你可以设置使用多个不同的句子,Morphext会以你指定的CSS3动画方式轮流显示它们. Morphext所做的事情是隐藏前一个文本短句,然后使用下一个来替换它.插件中已经为跨浏览器处理好了所有浏览器厂商的前缀问题,它可以为我们提供非常酷的文字动画效果. Animate.css依赖于CSS3 animations和transformations.如果浏览器不支持css3,

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

了解HTML/CSS/JS/JQuery/ajax等前端知识

什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body body标签 h1-h6 p br hr strong p b div img a table tr td 列表标签 ul ol li 表单标签 input redio checkbox text submit button resit password fiel hidden select 什么是

分别用html+css,js,jquery实现二级下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML CSS JS JQuery 特性属性详解

HTML 文字滚动标签 <marquee><font size=+3 color=red>Hello, World</font></marquee> CSS 溢出的内容用(...)代替 text-overflow: ellipsis; 强制不允许换行 white-space: nowrap;

【7】使用css/js/html模板来实现一个注册、登录和管理的功能

分支:auth static添加文件 css文件夹: app.css    自定义css样式[*] bootstrap.min.cs    bootstrap样式 compomemts文件夹: 插件用到的样式 animate.min.css    弹出提示框要到的样式 bootstrap-datepicker3.min.css    日期选择控件用到的样式 select2.min.css    下拉选择框用到的样式 fonts文件夹 bootstrap用到的字体 images文件夹 用到的一些图

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件.该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效. 在线预览   源码下载 使用方法 使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件. <link rel='stylesheet' href='css/animate.min.css'> <

一个基于jQuery的弹出层插件XYTips

效果预览:http://www.juheweb.com/js/tc/80.html 标签: jQuery [1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58