Michael _დ
Michael _დ

前端特效-HTML+CSS+JS - 登录注册界面

实现的效果


项目需要的图片资源

html部分 + js部分


<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Documenttitle>

   <link rel="stylesheet" href="css\style.css" />
 head>
 <body>
   <div class="container">
     <img src="img/bc.jpg" alt="" />
     <div class="panel">
       <div class="content login">
         <div class="switch">
           <span id="login" class="active">Loginspan>
           <span>/span>
           <span id="signup">Sign Upspan>
         div>
         <form action="">
           <div id="email" class="input" placeholder="Email"><input type="text" />div>
           <div class="input" placeholder="Username"><input type="text" />div>
           <div class="input" placeholder="Password"><input type="password" />div>
           <div id="repeat" class="input" placeholder="Repeat"><input type="password" />div>
           <span>Forget?span>
           <button>LOGINbutton>
         form>
       div>
     div>
   div>
 body>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
 <script>
   $('#login').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('signup')
     $(this)
       .parents('.content')
       .addClass('login')

     $('form button').text('LOGIN')
   })

   $('#signup').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('login')
     $(this)
       .parents('.content')
       .addClass('signup')

     $('form button').text('SIGNUP')
   })

   $('.input input').on('focus', function() {
     $(this)
       .parent()
       .addClass('focus')
   })

   $('.input input').on('blur', function() {
     if ($(this).val() === '')
       $(this)
         .parent()
         .removeClass('focus')
   })
 script>
html>

css部分

/* 配色方案:
    背景: rgb(224, 207, 254), rgb(255, 239, 255)
    按钮: rgb(181, 154, 254),rgb(245, 189, 253) 
*/

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,rgb(181, 154, 254),rgb(245, 189, 253) ) fixed;
}

.container{
    position: relative;
    width: 70rem;
}

.container img{
    width: 70rem;
}

.switch span{
    color:#ccc;
    font-size: 1.4rem;
    cursor: pointer;
}

.switch span.active{
    color:rgb(181, 154, 254);
}

.panel{
    width: 30%;
    margin: 10rem 0 0;
    position: absolute;
    right:0;
    top:0;  

    display: flex;
    justify-content: center;
}

form{
    width: 12rem;
    margin: 3rem 0 0;
}

form .input{
    position: relative;
    opacity: 1;
    height: 2rem;
    width: 100%;
    margin: 2rem 0;
    transition: .4s;
}

.input input{
    outline: none;
    width: 100%;
    border: none;
    border-bottom: .1rem solid rgb(181, 154, 254);
}

.input::after{
    content:attr(placeholder);
    position: absolute;
    left: 0;
    top: -10%;
    font-size: 1.2rem;
    color: rgb(129, 101, 207);
    transition: .3s;
}

.input.focus::after{
    top:-50%;
    font-size: .9rem;
}

.login .input#email,
.login .input#repeat{
    margin: 0;
    height: 0;
    opacity: 0;
}

form span{
    display: block;
    color:rgb(110, 89, 167);
    font-size: .8rem;
    cursor: pointer;
}

form button{
    border:none;
    outline: none;
    margin: 2.5rem 0 0;
    width: 100%;
    height: 3rem;
    border-radius: 3rem;
    background: linear-gradient(90deg,rgb(181, 154, 254),rgb(245, 189, 253) );
    box-shadow: 0 0 8px rgb(181, 154, 254);
    cursor: pointer;
    color:white;
}

你可能感兴趣的:(前端特效)

  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用 HTML CSS 和 JavaScript 实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发 网页制作 基础入门教程 南北极之间 web前端特效源码javascripthtmlcss网页设计编程入门代码编程入门
    b站视频演示效果：【web前端特效源码】使用HTMLCSS和JavaScript实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发网页制作基础入门教程效果图：完整代码：【前端实例代码】使用HTMLCSS和JavaScript实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发网页制作基础入门教程
  • 精选10款前端动画特效源码分享（附在线预览） 迂 幵 分享前端动画前端动画canva可画交互CSS动画SVG动画经验分享
    分享10款非常不错炫酷的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源Canvas超空间粒子文本动画Canvas超空间粒子文本动画不仅仅只是运行出现下图动态的效果鼠标移入还有范围特效最终具体特效可点击在线预览进行查看在线预览CSS玻璃变形按钮悬停特效CSS玻璃变形按钮悬停特效按钮呈玻璃色同时
  • 前端炫酷特效合集 迂 幵 前端动画前端动画
    我们经常在抖音上看到一些前端很酷的特效，诸如：快叫你学编程的朋友给你写一个圣诞树，看着是不是很酷炫呢？其实只要有源码，你也可以拥有哦！跟大家分享多款前端特效源码，需要的朋友可以去在这里资源站—“源码”专栏进行预览下载，还可以在线演示哦！以后还会继续更新哦！圣诞相关：1.自带bgm圣诞气氛灯网页背景2.圣诞节日快乐星星元素动画特效MerryChristmas❤Aranja3.圣诞节贺卡网页动画特效4
  • 甄选前端源码分享（附效果图及在线演示） 迂 幵 动画分享前端前端源码资源分享资源共享动画特效代码干货每日学习
    甄选7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS绘制任天堂Switch纯CSS绘制的Switch手柄后期可加工用于网页版的游戏手柄以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览CSS繁星营地动画一款夜晚背景动画帐篷外透露着灯光星星闪
  • 前端炫酷动画特效分享（附在线预览） 迂 幵 前端动画分享前端动画特效源码分享前端代码资源共享前端学习每次分享
    分享7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源canvas鼠标粒子跟随动画canvas鼠标粒子跟随动画当鼠标移入背景区域时粒子动画会跟随鼠标移动当鼠标移出时粒子动画会随机方向运动以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览CS
  • 2024最新前端源码分享（附效果图及在线演示） 迂 幵 前端html5css3javascriptsvgcanvas动画干货分享
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源粒子文字动画特效基于canvas实现的粒子文字动画特效会来回切换设定的文字特效图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览纯CSS绘制招财猫纯CSS绘制招财猫动画招招手招来好运和钱财图片只能提供参考
  • 有趣的前端源码分享（附效果图及在线演示） 迂 幵 动画分享前端前端资源分享实用资源源码资源特效代码动画特效干货知识
    分享7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS圣诞节动画圣诞节动画由圣诞礼物和圣诞树及圣诞老人等组合而成圣诞树会出现一闪一闪的光亮圣诞老人也会在窗口探望以及渐入渐出的文字祝福以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览
  • 2024前端炫酷源码分享（附效果图及在线演示） 迂 幵 前端动画分享前端html5源码分享干货分享canvas动画css3动画特效
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源GSAP-火箭动画特效GSAP火箭动画当氮气充足的情况下火箭会冲出并继续飞行图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览CSS骑小毛驴加载动画特效CSS骑车加载动画特效下方还有进度识别加载进程图片只
  • 圣诞节酷炫特效合集【含十几个HTML+CSS前端特效+34个桌面酷炫圣诞程序】 白大锅 花里胡哨htmlcsscanvas圣诞树特效圣诞节
    写在前面❤️源码获取：订阅后见文末❤️内容介绍：包含HTML+CSS等十几个圣诞特效；以及三十四个桌面酷炫圣诞树合集❤️订阅后所得如下：❤️HTML圣诞+桌面圣诞程序效果如下：下方展示代码仅举例其中几个所有效果源码及文件订阅后找博主获取即可css3圣诞雪人动画<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  • 10款有趣的前端特效代码分享（附图文效果及在线预览） 迂 幵 分享前端动画前端html5css3javascriptsvg动画特效游戏
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS绘制相机拍照动画纯CSS绘制相机拍照动画会有左右调整角度以及打开快门声的效果图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览CSS移动光源特效纯CSS绘制的聚光灯移动特效图片只能提供参考价值最终
  • 7款优雅的前端源码特效资源分享（附在线预览效果） 迂 幵 动画分享前端前端源码特效资源分享干货知识源码资源前端代码动画特效
    分享7款非常不错炫酷的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源3D玻璃天气动画CSS实现的一款非常简洁大气的玻璃天气动画其中每一种天气都带有各自独有的气候特征效果也是非常不错的最终具体特效可点击在线预览进行查看在线预览SVG按钮悬停放电动画SVG按钮悬停放电动画当鼠标移入按钮区域会出现
  • 14款炫酷好玩的前端特效代码分享（附源码及演示效果） 迂 幵 前端分享动画前端特效代码前端特效canvas动画特效
    分享14款还不错的前端特效源码其中包含jQuery特效也包含svg特效以及可以用来摸鱼的几款小游戏等下面我会列出相对核心的代码同时你也可以点击预览获取查看该源码资源的最终展示效果以及下载该源码资源可变主题切换效果一款可变主题的切换特效你既可以点击右上角图标进行主题的切换同时也可以点击按钮及某个主题区域进行主题的切换预览获取核心代码可变主题切换效果VariableThemesCyclethrough
  • 10款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码） 迂 幵 前端动画分享前端游戏源码源码分享特效源码前端源码H5源码分享动画特效
    分享10款还不错的前端特效源码其中包含jQuery特效也包含svg特效以及可以用来摸鱼的几款小游戏等下面我会列出相对核心的代码同时你也可以点击预览获取查看该源码资源的最终展示效果以及下载该源码资源JQuery鼠标悬停切换视频背景这是一款jQuery鼠标悬浮渐变切换视频背景特效当你鼠标移动到123其中某个区域时就会播放某个区域内的视频背景还是很不错的毕竟难免开发中就会存在此需求预览获取核心代码鼠标悬
  • 8款前端特效动画及源码分享 迂 幵 分享动画前端前端前端特效canvas特效css特效3D特效源码特效
    3D立体数字时钟滚动特效基于Splitting制作的一款3D立体数字时钟滚动特效，创意感满满，可以下载使用。预览获取核心代码01234567890123456789:01234567890123456789:01234567890123456789米字格手写文字练习代码基于Canvas实现的一款米字手写贴，你可以自由的书写你喜欢的文字，同时还支持清除等功能，让你在娱乐中提升自己。预览获取核心代码清
  • 【web前端特效源码】使用 HTML&& CSS 实现鼠标悬停时放大图片动画效~适合初学者~超简单~ |前端开发|IT软件 南北极之间 web前端特效源码htmljavascriptcss网页设计编程入门代码前端实例代码
    b站视频演示效果：【web前端特效源码】使用HTML&&CSS实现鼠标悬停时放大图片动画效~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【web前端源码特效】CSS3鼠标悬浮过渡缩放效果*{box-sizing:border-box;}body{background-color:#2D5CFE;}h1{margin-left:5%;color:whi
  • 【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 南北极之间 web前端特效源码html5css3javascriptit开发入门跳动的音乐效果
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现跳动的音乐符号加载动画2*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;min-height:1
  • web - 前端特效和博客 置二 零散要点纪要web-前端特效整理集前端特效
    参考文献RainMan-随笔前端一、CSS3动画名称用途链接阴影波纹特效1.元素hover效果2.突出表现效果http://www.jq22.com/code80横板导航菜单动画导航菜单http://www.jq22.com/code181横板导航菜单动画2导航菜单http://www.jq22.com/code195竖板导航菜单动画导航菜单http://www.jq22.com/code480圆
  • 【2023七夕】星河漫舞，七夕的璀璨之夜。分享：七夕表白的前端特效（附完整原代码+详细注释），情不知何起，却一往情深。愿天下有情人终成眷属 追光者♂ 前端七夕特效七夕节前端特效HTML特效CSS3HTML5
    满山遍野你的脸庞，唯有遗忘是最漫长。又一年的七夕了，今年，你还是孤单一人吗？……若是的话，咱们可是一个阵营的！！！作者主页：追光者♂个人简介：[1]计算机专业硕士研究生[2]2023年城市之星领跑者TOP1(哈尔滨)[3]2022年度博客之星人工智能领域TOP4
  • 前端特效（仿博客） 白鹭凡 css3jsh5html5
    效果蜘蛛网+点击向上飘不同颜色的爱心.heart{width:10px;height:10px;transform:rotate(45deg);margin-top:4px;margin-left:4px;}.heart::before{position:absolute;content:'';display:block;width:10px;height:10px;border-radius:5
  • 【前端特效篇】过渡与动画 MagnumHou CSS3前端开发网站搭建前端css3动画
    变形和动画都是前端开发过程中，用来提高用户体验的一种方式。增加一些动效，可以使页面看起来不那么枯燥无味。一、变形transformtransform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。变形都是相对于自己本身原来的位置进行转换，原来的位置还占位，只是视觉上的变化。这点来看和相对定位有点类似。1.12D变形2d中的坐标系：x表示正方向向右y表示正方向向下tra
  • html,js代码移植到vue项目上 江河地笑 干货满满vue.jsjavascripthtml
    对于我们这些学了一年左右的前端萌新来说，用好vue已经是很难得了，但是慢慢的我需要提高自己的技术，比如看了一些前端特效什么的，但是这些前端特效都是js,html的文件，我们无法直接利用这些文件，我们如何把这些移植到vue上，这是这篇文章所探讨的问题目录简单案例中级案例简单案例直接先上一个html,js的简单特效案例，一个小球自由落体并弹跳的特效代码如下Documentvarball={x:555,
  • 前端特效之毛玻璃-倾斜-日历 两个月亮 前端前端css特效vanilla-tiltdyCalendarJS
    前端特效之毛玻璃-倾斜-日历描述项目效果index.htmlindex.css描述项目描述开发语言HTML、JavaScript、CSS库dyCalendarJS、vanilla-tilt该项目中需要使用到的库有：dyCalendarJSvanilla-tilt.js是JavaScript中的一个平滑的3D倾斜库。vanilla-tiltdyCalendarJS是一个用于创建日历的JavaScri
  • 20款前端特效动画及源码 迂 幵 动画前端前端动画css3
    最近优化项目时看到一些实用的特效感觉还不错下面就分享给大家代码量过长的我就不展示了可以去在这里资源站源码部分预览下载1.Loading加载动画在canvas画布上，我们动态绘制许多多边形，这些多边形伴随着颜色的随机变化和旋转，形成了奇幻色彩的视觉效果，是一款非常炫酷的HTML5Loading动画特效。预览获取2.鼠标悬停背景变化动画基于CSS3的社交平台分享按钮，鼠标悬停在按钮上时可以产生变化的背
  • 【web前端特效源码】使用HTML5+CSS3制作一个会动的文字闪动动画效果~~适合初学者~超简单~ |前端开发|IT软件 南北极之间 html5css3javascript实例代码demo闪动文字效果
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3制作一个会动的文字闪动动画效果~~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：挥舞文本加载动画*{margin:0;padding:0;border:0;box-sizing:border-box;}*before,*after{box-sizing:border-box;}html{width:100vw;height
  • 【程序人生】卡塔尔世界杯吉祥物python海龟绘图（附源代码），世界杯主题前端特效5个（附源码） 逆境清醒 pythonturtle绘图集锦python前端特效前端python源代码经验分享开发语言
    卡塔尔世界杯吉祥物python海龟绘图（附源代码）世界杯主题前端特效5个（附源码）程序人生本文目录：一、pythonturtle海龟绘图卡塔尔世界杯吉祥物（1）、世界杯吉祥物“Laeeb”绘制效果图（2）、代码演示方法和代码命令解释（3）、本机运行、将绘图动画打包发给别人（4）、我的“2022年卡塔尔世界杯吉祥物Laeeb”绘图完整源代码二、世界杯主题网页特效（1）、为透明png图片添加阴影特效（
  • 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发 南北极之间 javascript网页设计编程入门代码html5css3js拼图小游戏
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【web前端源码特效】拼图游戏body{margin:0;padding:0;border:none;}#forPuzzle{border:none;left:0px;top:0px;
  • 【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！ 前端--末晨曦吖
    【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！点击打开视频讲解更加详细<div
  • 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） 逆境清醒 pythonpython开发语言经验分享
    活动地址：CSDN21天学习挑战赛用代码写出浪漫合集（爱心、玫瑰花）目录:一、前言二、用python、matplotlib、Matlab、java绘制爱心（1）爱心图形1（弧线型）（显示的文字写在代码里）（2）爱心图形2（直线型）（显示的文字写在代码里）（3）爱心图形3（弧线型）（通过输入方式显示文字）（4）用python绘制爱心树（5）用matplotlib绘制一颗2D的红心（6）三维爱心（7）
  • 前端，值得收藏的那些网站 小曲同学呀 前端前端javascriptcss
    当还在为页面普普通通而一筹莫展时，这些前端特效网站，值得拥有。（非常适合前端动画场景偏多的人士或者项目组。）今天给大家推荐一个网站51前端，js特效，html模板，应有尽有。1、51前端整体样子：JS特效：Html模板：各种代码示例：插件库：以后再也不用担心，到处找插件了。2、Tween.jsTweenJS是一个简单的JavaScript补间动画库。能够很好的和EaselJS库集成，但也不依赖或特
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他