News777
News777

HTML 实现好看的登录注册界面（一)

1. 效果图展示

2. 代码

2.1 HTML部分

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <link rel="stylesheet" href="index.css" />
  head>
  <body>
    <div class="container">
      <div class="box">
        <div class="transtion-box">
          <div class="login-box">
            <h1>欢迎回来h1>
            <section>
              <label for="email">邮箱label>
              <input type="text" id="email" />
            section>
            <section>
              <label for="password">密码label>
              <input type="password" id="password" />
              <span>忘记密码?span>
            section>
            <button type="button">登录button>
            <button type="button" class="other">
              使用<span style="font-weight: 900; color: #455a81">二维码span
              >扫码登录
            button>
          div>
          <div class="reg-box" style="display: none">
            <h1>立即注册h1>
            <section>
              <label for="username">用户名label>
              <input type="text" id="username" />
            section>
            <section>
              <label for="email">邮箱label>
              <input type="text" id="email" />
            section>
            <section>
              <label for="password">密码label>
              <input type="password" id="password" />
            section>
            <button type="button">注册button>
            <button type="button" class="other">
              使用<span style="font-weight: 900; color: #455a81">二维码span
              >扫码注册
            button>
          div>
        div>
        <div class="transferToReg">
          <h1 class="title">还未注册？h1>
          <span class="subTitle">立即注册，发现大量机会！span>
          <button type="button" id="transfetBtn">注册button>
        div>
      div>
    div>
  body>
  <script>
    let transfer = document.getElementById('transfetBtn');
    transfer.addEventListener('click', function () {
      let login = document.querySelector('.login-box');
      let reg = document.querySelector('.reg-box');
      let total = document.querySelector('.transtion-box');
      let target = document.querySelector('.transferToReg');
      let title = document.querySelector('.title');
      let subTitle = document.querySelector('.subTitle');
      transfer.innerText === '注册'
        ? (() => {
            target.style.left = 0;
            total.style.left = 260 + 'px';
            transfer.innerText = '登录';
            title.innerText = '已有帐号？';
            subTitle.innerText = '有帐号就登录吧，好久不见了！';
            setTimeout(() => {
              login.style.display = 'none';
              reg.style.display = 'flex';
            }, 300);
          })()
        : (() => {
            target.style.left = 640 + 'px';
            total.style.left = 0;
            transfer.innerText = '注册';
            title.innerText = '还未注册？';
            subTitle.innerText = '立即注册，发现大量机会！';
            setTimeout(() => {
              login.style.display = 'flex';
              reg.style.display = 'none';
            }, 300);
          })();
    });
  script>
html>

2.2 CSS部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box {
  width: 900px;
  height: 550px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}
.container .box .transtion-box {
  position: absolute;
  left: 0;
  transition: 0.5s all ease-in-out;
}
.container .box .transtion-box .login-box,
.reg-box {
  width: 640px;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 50px 30px;
}

.container .box .transtion-box h1 {
  margin-bottom: 35px;
}
.container .box .transtion-box section {
  display: flex;
  flex-flow: inherit;
  align-items: inherit;
  width: 100%;
  margin-bottom: 30px;
}
.container .box .transtion-box section label {
  font-size: 14px;
  color: #909399;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.container .box .transtion-box section input {
  width: 50%;
  outline: 0;
  border: none;
  font-size: 18px;
  color: tomato;
  text-align: center;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.container .box .transtion-box section span {
  color: rgb(80, 80, 77);
  font-size: 15px;
  cursor: pointer;
  margin-top: 18px;
}
.container .box .transtion-box button {
  width: 50%;
  padding: 6px 0;
  text-align: center;
  border: 3px solid #d4af7a;
  border-radius: 20px;
  background: #d4af7a;
  color: #fff;
  font-size: 17px;
  letter-spacing: 6px;
  text-indent: 6px;
  margin-bottom: 15px;
  cursor: pointer;
}
.container .box .transtion-box .other {
  border: 3px solid #d3dae9;
  background: #fff;
  color: rgb(124, 145, 184);
  font-weight: 600;
}
.container .box .transferToReg {
  width: 260px;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    #0e92eb 0%,
    #5f90ec 50%,
    #b08fe5 100%
  );
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  left: 640px;
  top: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 50px 0;
  color: white;
  transition: all 1s ease-in-out;
}
.container .box .transferToReg .title {
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.container .box .transferToReg button {
  margin-top: 260px;
  width: 50%;
  padding: 8px 0;
  border-radius: 14px;
  letter-spacing: 10px;
  text-indent: 10px;
  font-size: 18px;
  color: #fff;
  border: 3px solid #fff;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.container .box .transferToReg button:hover {
  border: 3px solid #206dfc;
}

你可能感兴趣的:(HTML,HTML登录注册界面系列,html,javascript,前端)

  • Flowable 6.6.0应用指南 - Flowable UI应用安装 月满闲庭 #应用指南中英文对照版
    培训视频推荐CSDN上提供了Flowable6.6.0的系列培训视频课程，欢迎有兴趣的朋友前往学习。《Flowable流程入门课程》《Flowable流程高级课程》《Flowable从入门到精通》Flowable6.6.0用户指南相关文档下载BPMN用户指南第一部分-中文PDF精编版BPMN用户指南第二部分-中文PDF精编版BPMN用户指南第三部分-中文PDF精编版应用程序指南-中文PDF精编版应
  • vscode设置console.log的快捷输出方式 活宝小娜 vscodevscodeide编辑器
    vscode设置console.log的快捷输出方式编辑器中输入clg回车，可以直接输出console.log，并且同步输出变量的字符串和值1、打开vscode点击左上角的文件2、找到首选项3、点击用户代码配置4、在顶部输入框种输入javas，选择JavaScript选项5、打开里面注释的代码，写入如下内容{//Placeyoursnippetsforjavascripthere."Printto
  • github上传文件方法格式 镜宇秋霖丶 githubgithub
    echo"#myHtmlFirst1.0">>README.mdgitinitgitaddREADME.md(这条指令改成下面的)gitadd.gitcommit-m"firstcommit"[email protected]:xxxxxxxxx/myHtmlFirst1.0.gitgitpush-uoriginmain以上是第一次上传以
  • 【零基础入门】一篇弄懂nn.Sequential以及ModuleList的使用（呕心沥血版） 十二月的猫 PyTorch深度学习pytorch零基础入门
    个人主页：十二月的猫-CSDN博客系列专栏：《PyTorch科研加速指南：即插即用式模块开发》CSDN博客十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录1.前言2.Sequential类的使用2.1序列容器简单注入2.2序列容器字典注入2.3序列容器函数注入2.4序列容器修改2.5序列容器删除3.nn.ModuleList()的使用3.1定义模型3.2使用模型4.总结1.前言《
  • HTML语言的贪心算法 宇瞳月 包罗万象golang开发语言后端
    HTML语言的贪心算法：理论与实践引言在编程和算法研究中，贪心算法是一种广泛应用的解决问题的方法。它通过对每一阶段选择最优解的方式来构建整个问题的解决方案。贪心算法不一定能在所有情况下得到最优解，但在许多实际问题中，它能够提供一个足够好的近似解。本文将探讨贪心算法的基本概念、典型应用、优缺点，并结合HTML语言的特点，提出一些具体的实现示例和思考。一、贪心算法的基本概念贪心算法是一种求解最优化问题
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定 web18285482512 面试学习路线阿里巴巴springboot后端java
    啥是防抖？所谓防抖，一是防用户手抖，二是防网络抖动。在Web系统中，表单提交是一个非常常见的功能，如果不加控制，容易因为用户的误操作或网络延迟导致同一请求被发送多次，进而生成重复的数据记录。要针对用户的误操作，前端通常会实现按钮的loading状态，阻止用户进行多次点击。而对于网络波动造成的请求重发问题，仅靠前端是不行的。为此，后端也应实施相应的防抖逻辑，确保在网络波动的情况下不会接收并处理同一请
  • 【MySQL】实战篇—数据库设计与实现：根据需求设计数据库架构 AI人H哥会Java MySQLsqlmysql数据库
    在设计数据库架构时，开发者需要遵循一系列步骤，以确保数据库能够高效、可靠地满足系统需求。以下是设计数据库架构的理论知识和步骤说明。1.需求分析需求分析是数据库设计的第一步，旨在理解系统的功能需求和数据需求。通过与利益相关者（如用户、开发人员和业务分析师）进行沟通，明确系统需要存储和管理的数据类型。步骤说明识别业务需求：确定系统的主要功能，例如用户管理、订单处理、库存管理等。收集数据需求：明确每个功
  • 五个冷门的Adobe系列软件小技巧 reddingtons adobe
    在当今的数字时代，Adobe系列软件在设计、视频编辑和创意制作领域占据着重要地位。许多学校和教育机构为学生提供教育邮箱，允许他们免费使用Adobe全系列软件的教育订阅。这意味着无论是Photoshop、Illustrator还是PremierePro等热门软件，学生都能轻松获取。然而，本文将分享一些冷门的Adobe软件小技巧，这些技巧主要适用于付费用户，可能不适用于某些免费用户。小技巧一：使用Ad
  • echarts map3D区域颜色单独设置 浪漫不敌风月 echartsecharts前端3d
    效果图：实现：用的是map3D，之前试了下geo3d因为版本问题不好控制（地图上字体颜色都没法设置）只需要在series的data中加上你要标色的区域名称和颜色即可。此效果实现的是无图例着色。series:[{type:"map3D",//系列类型name:"map3D",//系列名称map:"yuhang",//地图类型。data:[{name:"鸬鸟镇",itemStyle:{color:"#
  • 端到端的NLP框架（Haystack） deepdata_cn NLP自然语言处理人工智能
    Haystack是一个端到端的NLP框架，专门用于构建基于文档的问答系统，是实现RAG的理想选择。它提供了数据预处理、文档存储、检索和生成等一系列组件，支持多种语言模型和检索器。提供可视化界面，方便用户进行配置和调试；支持多模态数据，可处理文本、图像等多种类型的数据；具有可扩展性，可根据需求添加自定义组件。2020年在自然语言处理技术快速发展，对高效、易用且灵活的端到端NLP框架需求日益增长的背景
  • C++学习：六个月从基础到就业——C++基础语法回顾：数据类型、变量与常量 superior tigre C++学习：六个月从基础到就业c++学习
    C++学习：六个月从基础到就业——C++基础语法回顾：数据类型、变量与常量本文是"C++学习：六个月从基础到就业"系列的第一篇技术文章，主要回顾C++的基本数据类型、变量定义和常量使用，为后续深入学习打下基础。查看完整系列目录了解更多内容。引言编程的本质是对数据的处理，而数据类型、变量与常量是任何编程语言的基础构建块。在C++中，对这些基础概念的深入理解不仅能让我们编写出正确的代码，还能帮助我们编
  • 手写promise ,实现 then ,catch,finally,resolve,reject,all,allSettled 会飞的鱼先生 前端javascript开发语言
    完整代码原生Promise的用法1.Promise是JavaScript中用于处理异步操作的重要工具。它代表了一个异步操作的最终完成或失败，并且使异步方法可以像同步方法那样返回值。resolve：当异步操作成功时调用的函数，用于将Promise的状态改为fulfilled，并将结果值传递给后续的.then()方法。reject：当异步操作失败时调用的函数，用于将Promise的状态改为reject
  • 【江协STM32】11-2/3 W25Q64简介、软件SPI读写W25Q64 冰糖雪莲IO stm32嵌入式硬件单片机
    1.W25Q64简介W25Qxx系列是一种低成本、小型化、使用简单的非易失性存储器，常应用于数据存储、字库存储、固件程序存储等场景存储介质：NorFlash（闪存）时钟频率：80MHz/160MHz(DualSPI)/320MHz(QuadSPI)存储容量（24位地址）：W25Q40：4Mbit/512KByteW25Q80：8Mbit/1MByteW25Q16：16Mbit/2MByteW25Q
  • 春招，作为普通IT实习生的我有哪些想法和准备？ 十八朵郁金香 学习
    想法&随记对即将毕业的大学生来说，秋招和春招是求职的好机会，也是一次尝试向社会进行"自我推销"的机会，体现自己的综合能力，是“意满签Offer”？还是“露出马脚，社死场面”？“准备-天时地利人和-行动”后，我们会有答案。话题回到自己，春招，我有哪些想法？去年，在学校举办校园秋招招聘之前，我已经通过线上投递+线下面试找到实习，在一家人数规模100~200的公司当前端实习生，到现在已有四个多月，没有经
  • [前端面试场景题]虚拟列表 GISer_Jinger 前端面试
    嗯，用户问的是“前端虚拟列表详解”，我需要详细回答这个问题。首先，我得先理解虚拟列表的概念和用途。根据搜索结果，虚拟列表主要用于优化长列表的渲染性能，特别是在处理大量数据时。用户可能想知道它的核心原理、实现方法以及实际应用场景。看网页1提到虚拟列表的定义和关键点，只渲染视口内的数据项，减少DOM节点。网页2和网页4都给出了具体的Vue和原生JS实现案例，比如动态计算起始和结束索引，使用transf
  • 25. 策略模式 智想天开 设计模式详解策略模式bash开发语言
    原文地址:策略模式更多内容请关注：智想天开1.策略模式简介策略模式（StrategyPattern）是一种行为型设计模式，它定义了一系列算法，将每一个算法封装起来，并使它们可以相互替换。策略模式让算法的变化独立于使用算法的客户。通过引入策略模式，可以在不修改客户端代码的情况下，动态地更改对象的行为。关键点：算法封装：将不同的算法封装到独立的策略类中。互换性：策略类可以相互替换，客户端可以根据需要选
  • 微信小程序的旅游服务助手 景点 酒店 旅游规划的设计与实现 QQ1304979694 微信小程序旅游小程序
    文章目录具体实现截图本项目支持的技术语言研究思路、方法和步骤本系统开发思路主要软件与实现手段系统可行性分析源码获取详细视频演示：文章底部获取博主联系方式！！！！java类核心代码部分展示微信小程序技术现状源码获取/详细视频演示具体实现截图本项目支持的技术语言前端开发框架:vue.js+uniapp数据库mysql版本不限微信开发者工具/hbuiderx数据库工具：Navicat/SQLyog等都可
  • 侯捷 C++ 课程学习笔记：深入掌握 C++ 高阶特性 —— 实践与心得分享 清水白石008 C++学习笔记课程教程c++学习笔记
    侯捷C++课程学习笔记：深入掌握C++高阶特性——实践与心得分享自从开始接触侯捷C++系列精品课程以来，我对C++语言有了全新的认识与深入理解。这套课程不仅系统地梳理了C++的基础知识，更从实际案例中展示了许多高阶特性和工程实战技巧。作为一名长期从事C++开发的专业人士，我深深感受到侯捷老师讲解中那种由浅入深、逻辑严密的魅力，也正是这种教学风格让我在短时间内掌握了不少难以琢磨的知识点。今天，我将结
  • YOLOV11|YOLO12改进系列指南 魔鬼面具 YOLO
    基于Ultralytics的YOLO11|YOLO12改进目前自带的一些改进方案(持续更新)为了感谢各位对本项目的支持,本项目的赠品是yolov5-PAGCP通道剪枝算法.具体使用教程专栏改进汇总YOLO11系列二次创新系列ultralytics/cfg/models/11/yolo11-RevCol.yaml使用(ICLR2023)ReversibleColumnNetworks对yolo11主
  • 使用ssh-keygen命令生成密钥对无密码远程登陆linux主机 哎哟喂我去 rhel6
    我们在工作或试验中经常会需要登录多台linux主机进行操作，开启过多的ssh登陆界面，在不同的主机间切换时是非常让人的抓狂一件事情，只登陆一台linux主机然后通过此主机ssh登陆到其他主机这样是比较好的一种方式，但是在ssh登陆到其他主机时频繁的输入密码会让我们一直做重复的输入密码的工作，那有没有可以自动记住密码，或者不需要输入密码的工具呢？linux自带的ssh-kengen命令可以让我们轻松
  • HTML5实现左右滑动数据变化 ice_junjun HTML左右滑动
    在HTML中怎么样实现左右滑动？代码附上Bootstrap实例-下拉菜单（Dropdowns）-->-->欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。学习更多-->响应式表格布局产品付款日期状态产品123/11/2013待发货产品210/11/2013发货中产品320/10/2013待确认产品420/10/2013已退货产品123/11/2013待发货产品210/11/2013发货
  • 鸿蒙系统--搭建Ubuntu环境 ice_junjun ubuntulinuxbash
    搭建Ubuntu环境在嵌入式开发中，很多开发者习惯于使用Windows进行代码的编辑，比如使用Windows的VisualStudioCode进行OpenHarmony代码的开发。但当前阶段，大部分的开发板源码还不支持在Windows环境下进行编译，如Hi3861、Hi3516系列开发板。因此，建议使用Ubuntu的编译环境对源码进行编译。在以上的设备开发场景中，可以搭建一套Windows+Ubu
  • SQLAdmin 开源项目教程 羿辰果Gemstone
    SQLAdmin开源项目教程项目地址:https://gitcode.com/gh_mirrors/sq/sqladmin项目介绍SQLAdmin是一个灵活的Admin接口，专为SQLAlchemy模型设计。它支持SQLAlchemy的同步/异步引擎，并与Starlette和FastAPI框架集成。SQLAdmin使用WTForms进行表单构建，并支持SQLModel。其用户界面基于Tabler。
  • 探索数据库管理的新纪元：SQLAdmin - 易用的 SQLAlchemy 管理界面 孔祯拓Belinda
    探索数据库管理的新纪元：SQLAdmin-易用的SQLAlchemy管理界面sqladminSQLAlchemyAdminforFastAPIandStarlette项目地址:https://gitcode.com/gh_mirrors/sq/sqladmin项目简介在数据管理和Web开发的世界里，SQLAdmin是一个创新性的开源项目，它为SQLAlchemy模型提供了一个灵活且直观的后台管理界
  • 深入理解 JSON.stringify：优雅输出 JSON 数据 天天进步2015 前端开发json
    在JavaScript开发中，JSON数据的处理是一项基础且关键的技能。JSON.stringify()方法作为将JavaScript对象转换为JSON字符串的标准工具，其功能远不止于简单的数据转换。本文将深入探讨JSON.stringify()的使用技巧、参数配置以及常见陷阱，帮助开发者更优雅地处理JSON数据输出。基础用法JSON.stringify()的基本语法如下：JSON.stringi
  • JavaScript的函数拦截技术详解 天天进步2015 前端开发javascript开发语言ecmascript
    引言在JavaScript的世界里，函数是一等公民。它们可以被赋值给变量，作为参数传递，甚至可以被动态修改。函数拦截（FunctionInterception）是一种强大的技术，允许开发者在不修改原始函数代码的情况下，拦截、监控和修改函数的行为。本文将深入探讨JavaScript函数拦截的各种技术、应用场景以及最佳实践。什么是函数拦截？函数拦截是指在函数执行前、执行中或执行后插入自定义逻辑的过程。
  • 【004安卓开发方案调研】之Ionic+Vue+Capacitor开发安卓 ThinkPet 移动app开发androidionicCapacitorVue
    基于Ionic+Vue+CapacitorPlugins的国内安卓开发生态和技术现状，结合跨平台框架特性与国内实际环境，以下是综合分析：一、技术成熟度评估1.核心优势跨平台开发效率Ionic提供预制的UI组件库（如卡片、列表、表单），结合Vue的响应式数据绑定，可快速构建80%以上的基础功能界面，开发效率比原生开发提升约40%。典型场景：企业内部工具App、电商商品详情页、新闻资讯类应用。Capa
  • 知识图谱系列文章——文物知识图谱 weixin_43407382 知识图谱
    文章介绍背景1、文物可以提供创意，如哥窑面饰的照相机2、目前文物数字化工作非常少，没有纳入设计元素3、文物知识图谱建成后具有很多好处&#￥方法一、本体构建1、明确领域和目的——文物知识图谱&设计创意2、领域信息采集与分析——文物信息，３４０件文物实例，3、定义文物本体概念和结构层次4、定义概念属性和属性约束5、本体编码（建模语言和工具）6、本体评估——Jena的内嵌推理机，基于描述的逻辑7、本体实
  • JavaScript常用函数测试demo sunny05296 JavaScriptjavascript开发语言ecmascript
    JavaScript常用函数测试demovimJavaScriptTestDemo.html内容如下：JavaScriptfunctionstestdemoEnterF12toviewtheconsoleoutputmessageofconsole.log()EnterF5torefresh//JavaScriptint2string/string2inttestfunctiontest01(){
  • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
           最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
  • F5与集群的区别 bijian1013 weblogic集群F5
            http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
  • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
    原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
  • BufferedOutputStream 周凡杨
         首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
  • linux下模拟按键输入和鼠标 被触发 linux
    查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
  • ContentProvider初体验 肆无忌惮_ ContentProvider
    ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
  • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
    Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
  • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
     原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
  • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
  • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
    1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
  • 车辆保险理赔案例 bijian1013 车险
    理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
  • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
            文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
  • 【Struts2一】Struts2 Hello World bit1129 Hello world
    Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
  • 【Avro二】Avro RPC框架 bit1129 rpc
    1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
  • lua　set get cookie ronin47 lua cookie
    lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
  • java-打印不大于N的质数 bylijinnan java
    public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
  • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
    今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
  • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
       如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
  • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
    以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
  • 新浪微博技术架构分析 dalan_123 新浪微博架构
    新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
  • 玩转ARP攻击 dcj3sjt126com r
    我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
  • PHP编码规范 dcj3sjt126com 编码规范
    一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
  • linux 脱机管理（nohup） eksliang linux nohupnohup
    脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
  • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
    最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
  • 系统负载剧变下的管控策略 iamzhongyong 高并发
    假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
  • BitTorrent DHT 协议中文翻译 justjavac bit
    前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
  • Ubuntu下Java环境的搭建 macroli java工作ubuntu
    配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
  • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
    /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
  • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
    关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
  • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                   Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。  
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他