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,前端)

  • 网易云音乐会员优惠大揭秘，网友：太值了！ 氧惠佣金真的高
    在数字音乐时代，拥有一款高品质的音乐APP是音乐爱好者的必备之选。作为中国音乐市场的佼佼者，网易云音乐凭借其丰富的曲库、出色的推荐算法以及浓厚的社区氛围，吸引了大量用户。近日，网易云音乐推出了一系列会员优惠活动，让我们一起来了解一下吧！大家好，我是氧惠联合创始人七言导师，给大家推荐一款省钱更加赚钱的app——氧惠。氧惠是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主
  • 微算法科技研究量子视觉计算，利用量子力学原理提升传统计算机视觉任务的性能
    计算机视觉，作为人工智能领域的一个重要分支，致力于模拟人类视觉系统对图像或视频等视觉数据的理解与分析能力。它涵盖了图像识别、目标检测、图像分割等一系列复杂任务，广泛应用于自动驾驶、医疗影像分析、安防监控等多个领域。然而，随着数据规模的不断膨胀和任务复杂度的日益提升，传统计算机视觉算法在处理大规模、高维度数据时遇到了性能瓶颈。微算法科技(NASDAQ：MLGO)研究量子视觉计算，探索量子计算与经典卷
  • 浪漫与性感兼具｜Julie Vino 2019婚纱系列 服装设计禅言
    以色列设计师婚纱品牌JulieVino释出2019「Paris巴黎」婚纱系列，本季婚纱以巴黎城市为拍摄背景和主题诉求，打造浪漫与性感兼具的现代礼服。来源|CFW服装设计最懂得穿衣服的是哪个职业？——设计师有穿不完的衣服是哪个职业？——设计师走在时装最顶端的职业是？没错还是设计师，想学习服装设计成为设计师，可以私信小编，免费带粉丝入门！
  • Perl数组用法详细解析 架构 ExogFix perlscala开发语言架构
    Perl是一种功能强大的编程语言，广泛应用于各种领域。其中，数组是Perl中一种常用的数据结构，用于存储和操作一系列相关的数据。本文将详细解析Perl数组的用法，并提供相应的源代码示例。创建数组在Perl中，可以使用以下方式创建数组：#直接初始化数组my@array=(1,2,3,4,5)
  • 前端领域状态管理的事件驱动机制解析 前端视界 前端大数据与AI人工智能前端艺匠馆前端状态模式ai
    前端领域状态管理的事件驱动机制解析关键词：前端状态管理、事件驱动、订阅发布模式、状态变更、组件通信摘要：本文从前端开发的实际痛点出发，用“快递站管理”的生活案例类比，深入浅出解析事件驱动机制在状态管理中的核心作用。通过拆解状态管理、事件驱动、订阅发布模式等核心概念，结合代码示例和实战场景，帮助开发者理解如何用事件驱动实现更可控、可维护的状态管理系统。背景介绍目的和范围随着前端应用从“网页”进化为“
  • linux安装Node.js 环境，Docker 环境，Ruby 环境，MongoDB 环境，PostgreSQL 数据库，Go 开发环境，Python 虚拟环境 2401_87017622 数据库linuxnode.js
    在Linux上安装其他常见的开发环境可以根据具体需求而定，以下是一些常见的安装步骤：1.Node.js环境Node.js是一个基于ChromeV8引擎的JavaScript运行环境，适用于服务器端开发。安装Node.js：通过包管理器安装：sudoyuminstall-ygcc-c++makecurl-sLhttps://rpm.nodesource.com/setup_14.x|sudo-Eba
  • 常用的折叠展开过渡动画效果css
    如何实现优雅的折叠展开动画效果在现代Web设计中，折叠展开动画是一种常见且实用的交互方式，它可以帮助用户在保持界面简洁的同时，灵活控制内容的显示与隐藏。本文将分享如何使用HTML、CSS和JavaScript实现一个平滑流畅的折叠展开动画效果。基本原理折叠展开动画的核心原理是通过CSS过渡(transition)来控制元素的高度、内边距和其他样式属性的变化。当用户点击触发按钮时，JavaScrip
  • Redux架构解析：状态管理的核心原理 止观止 架构前端react.jsredux
    Redux作为JavaScript应用的状态管理库，其技术架构与核心原理围绕可预测的状态管理设计，通过严格的单向数据流和函数式编程理念实现复杂应用的状态控制。以下从设计理念、核心架构、工作流程、源码实现等角度进行系统性剖析：一、设计理念与原则单一数据源（SingleSourceofTruth）整个应用的状态存储在一个全局Store对象中，形成唯一的状态树（StateTree）。优势：简化状态共享和
  • ColQwen-Omni：RAG全模态检索来了，支持【文本|图像|视频|音频】四种模态！ 致Great 音视频
    还记得ColPali、ColQwen和DSE吗？这些模型开创了视觉文档检索的新范式：无需费力地从文档中提取文本进行处理，只需将文档页面视为一系列图像（屏幕截图），然后训练视觉语言模型（VLM）直接将其内容表示为向量。ColPali的实践表明，这种策略通常比其他替代方法更快、更简单，并且能带来更好的检索性能。自发布一年以来，ColPali和ColQwen系列模型已被下载数百万次，被誉为“2024年顶
  • 高通camera结构（第五天）
    一、摄像头的结构和工作原理镜头用来拍摄景物，拍摄的图片在传感器上将光信号转换成了电信号，电信号经过AD转换器（模数转换器）转换成了数字信号，数字信号经过DSP（数字信号处理器）进行加工处理，再被送到电脑中进行处理，最终转换成了手机屏幕上我们可以看到的图像。数字信号处理器芯片（DSP）功能：主要是通过一系列数学的算法运算，对数字图像信号进行优化处理，并把处理过的信号通过USB等接口传到PC等设备。D
  • scrapy 一定要自定义USER_AGENT 魔童转世
    原因是因为有的网站设置的是不允许爬虫请求，而srapy默认请求是带着一个标识告诉网站我就是爬虫，网站当然不允许爬去了偶然间在一个网站上看到的内容并且也跳过坑USER_AGENT='Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/65.0.3325.181Safari/537.36'
  • 水彩原创。花篮姑娘 嘉蓓水彩慢生活
    这是过年后完成的第二张作品花篮姑娘，也是少女系列我最喜欢的一幅。感觉中粗纹的纸比细纹的好画。就是拍照片的时候纹理感太强了。图片发自App很想找个跟画画有关的工作，不知道这个目标能不能实现。图片发自App图片发自App图片发自App喜欢我的画记得关注我一下。公众号嘉蓓水彩慢生活
  • Firefox浏览器Flash及音乐播放插件使用指南 酷毙的我啊
    本文还有配套的精品资源，点击获取简介：随着Firefox逐步淘汰原生FlashPlayer支持，依赖于Flash的内容和某些网页音乐的播放需求催生了特定插件的开发。尽管HTML5已取代Flash成为网页多媒体的核心，教育和娱乐领域的某些旧内容仍然需要使用Flash。用户可以通过安装类似Ruffle这样的Flash模拟器来播放Flash内容，同时，专为Firefox设计的音乐插件如Enhancerf
  • 【第三十二天】STM32 平台全景解析与型号选择实战指南 观熵 每日一练：嵌入式C++开发365天stm32嵌入式硬件单片机学习C++
    STM32平台全景解析与型号选择实战指南关键词：STM32、MCU选型、STM32F1、STM32G4、STM32H7、Flash/RAM、外设资源、封装选型、低功耗方案、嵌入式平台摘要：STM32系列是目前嵌入式开发中应用最广泛的ARMCortex-M微控制器平台之一，覆盖从入门级控制器到高性能边缘处理器的多种应用场景。本文从STM32的平台分类、架构演进、性能指标、外设组合、功耗管理等角度展开
  • UGUI 性能优化系列：第三篇——渲染与像素填充率优化 吉良吉影NeKoSuKi 性能优化unity游戏引擎c#开发语言
    在UnityUGUI性能优化之旅中，我们已经学习了基础的资源管理和Canvas与UI元素的管理。现在，我们将把目光转向更深层次的渲染层面，特别是如何优化像素填充率（PixelFillRate）。在这个环节中，Overdraw（过度绘制）是一个我们必须理解和解决的关键问题，因为它直接关系到GPU的工作效率。一、Overdraw（过度绘制）的危害与检测1.什么是Overdraw？为什么会影响性能？想象
  • Redmi 5Plus Liunx(PostmarketOS) Installation Tutorial
    Setup1unlockbootloaderReference:https://www.miui.com/unlock/index.htmlNotice:miflush_unlockrequiresawindowsosIftheunlocktooldoesnotrecognizethephone,youneedtoinstallthedrivermanuallyinthedevicemanager
  • 注意，这些药「伤肺」 lion米儿
    大多数药物经过肝脏代谢、肾脏排泄，因此伤肝、伤肾的药物我们大多熟知。但是，有一些药物可以被肺摄取，并聚集在肺中，从而引起一系列的肺损伤，你可尽知？引起肺炎的药物青霉素类、红霉素、磺胺类、氟嗪酸、呋喃妥因、氯丙嗪、安痛定、对氨基水杨酸钠、干扰素、甲氨蝶呤、三氮唑核苷、5-氟尿嘧啶、吲达帕胺、皮质激素、甲基苄肼、门冬酰胺酶、紫杉醇等药物可作为过敏原，一些过敏体质患者可发生过敏性肺炎，主要累及细支气管，
  • 摄像驱动会接触到的单词（想起来就更新）3 空与实的极致 嵌入式硬件经验分享计算机视觉视觉检测
    工作单词delivers交付；传递assignment分配；任务；指派firmware固件stack栈integrate整合superspeed超高速embedded嵌入式development研发、开发；发展kit装备；配套元件；成套工具platforms平台、站台device设备、物品、器械peripheral外围设备；外围的；次要的access通道；入口；机会interface接口；界面se
  • STM32 HAL库详解：跨系列兼容、CubeMX自动生成与回调机制全解析 景彡先生 STM32stm32嵌入式硬件单片机
    前言：为什么HAL库成为STM32开发的主流？如果你接触过STM32开发，一定听说过“库”的概念。早期开发者需要直接操作寄存器，一行行写配置代码（如RCC->CR|=RCC_CR_HSEON），不仅效率低，还容易出错。后来ST推出了标准外设库（SPL），封装了寄存器操作，但存在一个致命问题：不跨系列——STM32F1的代码无法直接在STM32F4上运行，换芯片意味着重写大量代码。2014年，ST推
  • 群魔乱舞 opcc
    跳舞这件事尤其像下面这几段舞蹈那是相当的好看啊我先来分析下心理。。啪~啪~俩耳光但是我还是要分析。。看他们跳舞会产生一系列的心理反应“他们跳得太酷了，太性感了”“跳得没那么好嘛”“不敢直视”羡慕、嫉妒、害羞这本身就是一项心潮澎湃的运动抛不开这些心理只要把握好°为什么会有舞蹈呢高兴得手舞足蹈提高自信心减肥锻炼身体心里就是cool居然只能发3段视频阅读原文又加了一段而且歌也是相当好听行了不多说了爱好者
  • ComfyUI 完全入门：图生视频
    随着科技的不断发展，用户界面（UI）设计变得越来越重要。一个优秀的UI不仅能提升用户体验，还能增加应用的吸引力和使用率。ComfyUI作为一个开源的用户界面框架，以其简便易用、高度自定义和丰富的组件，成为了许多开发者的首选。本文将以“图生视频”为例，详细介绍如何使用ComfyUI，从基础入门到高级应用，帮助你轻松创建出色的用户界面。一、什么是ComfyUI？ComfyUI是一个开源的用户界面框架，
  • 【免费下载】 IDE Eval Resetter 插件安装及使用指南 宗廷国Kenyon
    IDEEvalResetter插件安装及使用指南1.项目介绍IDEEvalResetter是一款适用于JetBrains系列集成开发环境（如IntelliJIDEA、PyCharm等）的开源插件，旨在帮助用户重置IDE的试用期限，从而获得更多的免费试用时间。这款插件支持自动或手动重置，让用户可以在不购买正式版的情况下，依然可以正常使用IDE进行开发工作。2.项目快速启动2.1安装插件方法一：通过I
  • AI应用服务 SUPER5266 人工智能
    AI大模型--AI应用，该如何和前端交互，呈现llm模型答复内容呢？向LLM大模型提问后，系统得先识别问题，再从数据网络找信息，接着推理出正确结果，还得防止模型“胡编乱造”（控制模型幻想）。有时多个智能体（agent）要一起处理，结果还得融合。这些步骤都是异步进行的，没法像传统应用接口那样实时出结果。为减少大模型结果延迟、提升用户体验，我们提供以下方案。方案1、轮询后端pedding结果到db或其
  • 手撕Spring底层系列之：后置处理器“PostProcessor” Xxtaoaooo Spring底层系列java开发语言后端Spring底层源码剖析
    人们眼中的天才之所以卓越非凡，并非天资超人一等而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成超凡的必要条件。————马尔科姆·格拉德威目录一、后置处理器的概念1.1核心定义1.2两大核心对比1.3设计价值二、Bean生命周期扩展时机2.1执行步骤与实例化体现三、内置后置处理器解析3.1五大核心处理器职责3.2AOP代理创建流程四、总结嗨，我是Xxtaoaooo！本系列将用源码解剖+拆分
  • 2.3 前端-ts的接口以及自定义类型 许昌第一深情 前端前端java开发语言
    接口接口定义：exportinterfacePerson{id:string,name:string,gender:number}接口引用：符号:意义是类型注解符号，声明变量类型，编译器可以进行类型检查。//导入的type前缀一定得加import{typePerson}from'...';letp:Person={id:'253465',name:'arfwf',gender:1};//或者复杂的
  • Java Stream流详解
    JavaStream流详解：从基础到原理引言：Java8的革命性变化2014年3月发布的Java8是Java语言发展史上的一个里程碑，它引入了一系列改变编程范式的新特性，其中Stream流（java.util.stream.Stream）与Lambda表达式、函数式接口共同构成了函数式编程在Java中的核心实现。这些特性不仅简化了代码编写，更推动Java从命令式编程向函数式编程转型，同时为多核处理
  • 自学java到什么程度才能就业？ Python编程社区
    多年Java开发从业者：首先，这个问题主要问：自学Java编程技术，如果才能找到一份Java编程的工作。按照现在的招聘标准来看，无论你去哪个公司面试，你只需要满足他们公司的需求就可以。找到一份Java编程工作需要掌握的内容如下：首先是Javase作为Java最基本的学习内容，不在多说。然后是掌握JavaScript的基本原理，因为做Java编程开发必须学会JavaScript，用到JavaScri
  • 第一章 【vue】基础（超详细） ᝰ落念英 vue.js前端javascriptweb开发语言前端框架vue
    Vue基础Vue在HTML中的引入使用Vue渲染数据Vue可直接渲染定义在data里的数据,渲染动态数据使用“{{}}"包裹示例代码{{message}}{{arr}}{{arr.name}}{{arr.age}}{{obj[2]}}在js中挂载Vue实例Vue实列的作用范围：vue会管理el选项命中的元素及其后代元素是否可以使用其他选择器但是建议使用id选择器是否可以设置其他的dom元素可以使用
  • Java 9 模块化系统（Project Jigsaw）深度解析 探索java java基础jvmjavaJava9模块化
    1.引言1.1什么是ProjectJigsaw？ProjectJigsaw是Java9引入的一项重要特性，其核心是将Java平台引入模块化系统。这项特性最早由Oracle于JSR376提出，旨在解决Java平台和大型应用程序架构中的一系列结构性问题。模块系统是对Java类加载器机制和访问控制模型的系统性扩展，它不仅影响开发者编写代码的方式，还改变了平台的打包、部署和运行方式。简而言之，Projec
  • 每天分享一个身边小故事系列 奔跑得小猪
    11月23日第一个故事：妈妈，我爱你周六下了一天的雨，淅淅沥沥很烦人，女儿去培训班需要送。我懒惰，天气好的时候一般都不送，让她一个人骑电动车去。冬天到了，北方的冷空气不是盖的，骑车更凉快啦，简直透心凉。孩子怕冷，只要我有空她就央求我去送。我不情愿接送，心里烦，不敢说出来，孩子叛逆期，听到我的啰嗦就怼人，只好来回接送。这几天还算不错，她爸爸因疫情在家隔离，接送孩子的工作基本都是他来干。今天下雨没事，
  • 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其他