佚名
佚名

网页中时光轴CSS实现

本文实例为大家分享了网页中时光轴的制作方法，供大家参考，具体内容如下

效果图：

网页中时光轴CSS实现_第1张图片

实现代码：

XML/HTML Code 复制内容到剪贴板
  1. >     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>时光轴title>     
  6.     <style>     
  7.         .container {     
  8.             width: 800px;     
  9.             margin: 50px auto;     
  10.         }     
  11.      
  12.         .vertical-timeline {     
  13.             color: #FFF;     
  14.             font-family: "微软雅黑", "Microsoft YaHei";     
  15.         }     
  16.      
  17.         .vertical-timeline-block {     
  18.             width: 100%;     
  19.             border-left: 2px solid #DDD;     
  20.             margin: 0 20px;     
  21.             position: relative;     
  22.             padding-bottom: 30px;     
  23.         }     
  24.      
  25.         /* 时间轴的左侧图标 */     
  26.         .vertical-timeline-icon {     
  27.             width: 40px;     
  28.             height: 40px;     
  29.             border-radius: 20px;     
  30.             position: absolute;     
  31.             left: -22px;     
  32.             top: 10px;     
  33.      
  34.             text-align: center;     
  35.             line-height: 40px;     
  36.             cursor: pointer;     
  37.             transition: all 0.2s ease-in;     
  38.             -webkit-transition: all 0.2s ease-in;     
  39.             -moz-transition: all 0.2s ease-in;     
  40.             -o-transition: all 0.2s ease-in;     
  41.         }     
  42.         .vertical-timeline-block {     
  43.             cursor: pointer;     
  44.         }     
  45.         .vertical-timeline-block:hover .vertical-timeline-icon {     
  46.             width: 50px;     
  47.             height: 50px;     
  48.             border-radius: 25px;     
  49.             line-height: 50px;     
  50.             left: -27px;     
  51.             box-shadow: 0 0 5px #CCC;     
  52.             font-size: 25px;     
  53.         }     
  54.      
  55.         /* 时间轴的左侧图标的各种样式 */     
  56.         .v-timeline-icon1 {     
  57.             background-color: #2aabd2;     
  58.         }     
  59.         .v-timeline-icon2 {     
  60.             background-color: #5cb85c;     
  61.         }     
  62.         .v-timeline-icon3 {     
  63.             background-color: #8c8c8c;     
  64.         }     
  65.         /* 时间轴的左侧图标上的序号*/     
  66.         .vertical-timeline-icon i {     
  67.             font-style: normal;     
  68.             color: #FFF;     
  69.         }     
  70.         /* 时间轴上的具体内容 */     
  71.         .vertical-timeline-content {     
  72.             background-color: #5bc0de;     
  73.             margin-left: 60px;     
  74.             padding: 20px 30px;     
  75.             border-radius: 5px;     
  76.             position: relative;     
  77.         }     
  78.         /* 时间轴上的具体内容左侧箭头 */     
  79.         .vertical-timeline-content:before {     
  80.             content: '';     
  81.             width: 0;     
  82.             height: 0;     
  83.      
  84.             border-top: 10px solid transparent;     
  85.             border-bottom: 10px solid transparent;     
  86.             border-right: 10px solid #5bc0de;     
  87.             border-left: 10px solid transparent;     
  88.      
  89.             position: absolute;     
  90.             right: 100%;     
  91.             top: 20px;     
  92.         }     
  93.         /* 时间轴的具体内容的格式 */     
  94.         .timeline-content {     
  95.             text-indent: 2em;     
  96.         }     
  97.         .time-more {     
  98.             overflow: hidden;     
  99.         }     
  100.         .time-more .time {     
  101.             float: left;     
  102.             line-height: 40px;     
  103.             display: inline-block;     
  104.         }     
  105.         .time-more .more {     
  106.             float: right;     
  107.         }     
  108.         .time-more .more a {     
  109.             display: inline-block;     
  110.             height: 20px;     
  111.             padding: 8px 15px;     
  112.             color: #FFF;     
  113.             text-decoration: none;     
  114.             font-size: 15px;     
  115.         }     
  116.         /* “更多信息”的风格 */     
  117.         .more-style1 {     
  118.             border-radius: 5px;     
  119.             background-color: #565656;     
  120.         }     
  121.         .more-style1:hover {     
  122.             background-color: #696969;     
  123.         }     
  124.         .more-style2 {     
  125.             border-radius: 5px;     
  126.             background-color: #1AB394;     
  127.         }     
  128.         .more-style2:hover {     
  129.             background-color: #18A689;     
  130.         }     
  131.      
  132.         .more-style3 {     
  133.             border-radius: 5px;     
  134.             background-color: #1C84C6;     
  135.         }     
  136.         .more-style3:hover {     
  137.             background-color: #1A7BB9;     
  138.         }     
  139.      
  140.     style>     
  141. head>     
  142. <body>     
  143.     <div class="container">     
  144.         <div class="vertical-timeline">     
  145.             <div class="vertical-timeline-block">     
  146.                 <div class="vertical-timeline-icon v-timeline-icon1">     
  147.                     <i class="icon">1i>     
  148.                 div>     
  149.      
  150.                 <div class="vertical-timeline-content">     
  151.                     <h2>时间点1h2>     
  152.                     <p class="timeline-content">我去吃了个午饭p>     
  153.                     <p class="time-more">     
  154.                         <span class="time">2016/4/30 13:48span>     
  155.                         <span class="more more-style1"><a href="#">更多信息a>span>     
  156.                     p>     
  157.                 div>     
  158.             div>     
  159.      
  160.             <div class="vertical-timeline-block">     
  161.                 <div class="vertical-timeline-icon v-timeline-icon2">     
  162.                     <i class="icon">2i>     
  163.                 div>     
  164.      
  165.                 <div class="vertical-timeline-content">     
  166.                     <h2>时间点2h2>     
  167.                     <p class="timeline-content">我去吃了个午饭p>     
  168.                     <p class="time-more">     
  169.                         <span class="time">2016/4/30 13:48span>     
  170.                         <span class="more more-style2"><a href="#">更多信息a>span>     
  171.                     p>     
  172.                 div>     
  173.             div>     
  174.      
  175.             <div class="vertical-timeline-block">     
  176.                 <div class="vertical-timeline-icon v-timeline-icon3">     
  177.                     <i class="icon">3i>     
  178.                 div>     
  179.      
  180.                 <div class="vertical-timeline-content">     
  181.                     <h2>时间点3h2>     
  182.                     <p class="timeline-content">我去吃了个午饭p>     
  183.                     <p class="time-more">     
  184.                         <span class="time">2016/4/30 13:48span>     
  185.                         <span class="more more-style3"><a href="#">更多信息a>span>     
  186.                     p>     
  187.                 div>     
  188.             div>     
  189.      
  190.             <div class="vertical-timeline-block">     
  191.                 <div class="vertical-timeline-icon v-timeline-icon1">     
  192.                     <i class="icon">4i>     
  193.                 div>     
  194.      
  195.                 <div class="vertical-timeline-content">     
  196.                     <h2>时间点1h2>     
  197.                     <h2>时间点1h2>     
  198.                     <h2>时间点1h2>     
  199.                     <h2>时间点1h2>     
  200.                 div>     
  201.             div>     
  202.      
  203.             <div class="vertical-timeline-block">     
  204.                 <div class="vertical-timeline-icon v-timeline-icon2">     
  205.                     <i class="icon">5i>     
  206.                 div>     
  207.      
  208.                 <div class="vertical-timeline-content">     
  209.                     <h2>时间点1h2>     
  210.                     <h2>时间点1h2>     
  211.                     <h2>时间点1h2>     
  212.                 div>     
  213.             div>     
  214.      
  215.             <div class="vertical-timeline-block">     
  216.                 <div class="vertical-timeline-icon v-timeline-icon3">     
  217.                     <i class="icon">6i>     
  218.                 div>     
  219.      
  220.                 <div class="vertical-timeline-content">     
  221.                     <h2>时间点1h2>     
  222.                     <h2>时间点1h2>     
  223.                     <h2>时间点1h2>     
  224.                 div>     
  225.             div>     
  226.         div>     
  227.     div>     
  228. body>     
  229. html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

你可能感兴趣的:(网页中时光轴CSS实现)

  • 时制转换 TXHNY C语言习题
    现在输入一个24小时制的时间，请编程将其转换为12小时制时间格式，输出转换后的时间，原来时间如果是上午，那么需要在转换时间之后输出空格和AM，原来时间如果是下午，在转换时间之后输出空格和PM，输出具体参考样例。注：在24小时制中，[00:00~12:00]认为是上午，[12:01~23:59]认为是下午。提示：输出时间:分钟的格式请使用printf("%02d:%02dAM或PM")，%02d表示
  • MATLAB中的APPdesigner绘制多图问题解析？与逻辑值转成十进制 Ndmzi Matlabmatlab开发语言
    在matlabAPPdesigner中绘图可以用UIAxes组件进行绘图，但是当想多张图时，只能提前绘制图像区域不方便。下面是几种办法：为了操作可以添加Panl组件，方便操作。1、当是要求的几个图像大小都是相同时刻采用函数：tiledlayout创建分块图布局tiledlayout(m,n)tiledlayout('flow')tiledlayout(___,Name,Value)tiledlay
  • Matlab修改缓存目录位置（Temp） Ndmzi matlab开发语言
    这是MATLAB从系统环境变量中找到的设置。也可以使用MATLAB中的SETENV和GETENV函数设置或查询环境变量。请参阅下面的系统级别设置。对于Linux/MAC：MATLAB将从系统中检查环境变量'TMPDIR'（getenv（'TMP'）），如果它为空，MATLAB将检查环境变量'TMP'如果它为空，MATLAB将使用'/tmp/'作为临时目录。您可以将'TMP'环境变量设置为其他目录，
  • 解锁豆瓣高清海报(三)从深度爬虫到URL构造，实现极速下载 dreadp 爬虫pythonbeautifulsouphtml后端
    脚本地址:项目地址:GazerPosterBandit_v2.py前瞻之前的PosterBandit.py是按照深度爬虫的思路一步步进入海报界面来爬取,是个值得学习的思路,但缺点是它爬取慢,仍然容易碰到豆瓣的418错误,本文也会指出彻底解决旧版418错误的方法并提高爬取速度.现在我将介绍优化版,这个版本通过直接构造URL来实现获取海报原图,准确识别、更快爬取.本文会重点讲解动态headers及其应
  • IsaacLab最新2025教程(3)-搭建训练场景 Calm_dw 机器人人工智能AI编程pythonvisualstudiocode深度学习
    前言本文将详细介绍如何使用IsaacLab进行场景搭建与物理仿真，为后续的训练打下基础。文章以IsaacLab官方tutorial为基础，从环境搭建开始，逐步实现一个包含多种物体的仿真场景，并分享开发过程中的经验。官方连接：Tutorials—IsaacLabDocumentation开发环境IsaacLab/IsaacSim4.5.0(Ubuntu22.04)代码解析这篇文章包含了前三个tuto
  • Ai时代初期，人类文明的多纬度演进方向分析 Ai度 人工智能
    在AI时代初期，文明的演进呈现出多维度、跨领域的突破性特征，结合最新研究进展与实践案例，其深层变革可进一步细化为以下六大维度：一、技术平权与生产要素重构AI技术通过算力跃迁与认知革命重构生产要素。例如，华为昇腾芯片使县域政务系统获得省级决策能力，特斯拉工厂的机械臂实现0.8秒完成车身焊接，而量子-经典混合算法将药物分子模拟效率提升1200倍。这种技术平权运动正推动全球劳动生产率提升30%，同时催生
  • pear-admin-boot开发框架使用记录（三） 后青春期的诗go 经验分享javaspringbootspringlog4jmybatis
    一、实现部门选择操作用于从组织架构里选择出部门的操作，如开发日志管理模块，创建人新增日志时可以通过选择框选择相应共享的部门。数据库表调整在数据表添加2个字段：sharedeptid共享部门idvarcharsharedeptname共享部门名称varchar前端html页面调整页面添加如下代码：共享部门前端JS调整添加如下代码：letdtree=layui.dtree;dtree.renderSe
  • 使用LLM自动化生成微电网Simulink模型 MC数据局 自动化运维
    使用LLM自动化生成微电网Simulink模型！⚡在构建微电网仿真模型时，我们通常需要手动拖拽模块、设置参数，耗费大量时间。现在，通过结合LLM（如GPT-4）与MATLAB脚本，我们可以自动生成完整的微电网Simulink模型！微电网模型核心功能：光伏功率生成：通过正弦波模拟白天和夜晚光伏输出的动态变化。电池管理系统（BMS）：基于净功率实现电池的充放电控制，动态更新SOC（电池状态）。⚡负载建
  • chatgpt赋能python：Python构造函数详解 www_xuhss_com ChatGptchatgpt计算机
    Python构造函数详解在Python中，构造函数是一种特殊的函数，用于创建类的实例并初始化其属性。Python构造函数的名称为__init__，它在创建类的实例时自动调用。本篇文章将全面介绍Python构造函数的重要性及其使用方法。为什么需要构造函数？当我们创建一个类的实例时，通常需要初始化它的一些属性。如果没有构造函数，我们必须手动初始化每一个属性变量，这显然会很麻烦，并且容易出现错误。所以，
  • Git常用指令 Bruce_Ling git
    目录前言1、gitcommit-m"writeyourdescription"2、gitcommit--amend3、gitpush-f4、gitpushoriginmaster前言在学校从来没使用过git版本管理，只会简单的把代码从github上拉下来，或者简单的把本地的代码push到自己github账号的仓库里面，但实际工作中需要十分熟练的掌握Git的一系列命令，常用的其实也不多。1、gitc
  • RabbitMQ z小天才b RabbitMQrabbitmq分布式
    一、MQ相关的概念1.1、MQ的基本概念什么是MQMQ（MessageQueue，消息队列）是一种应用程序对应用程序的通信方法。应用程序通过写入和检索出入队列的针对性消息来通信，这些消息可以存储在内存或磁盘中。消息队列允许应用程序独立地运行，并以可靠的方式相互通信。为啥要用MQ解耦:允许系统独立开发、部署和运行，减少系统间的直接依赖异步处理:非阻塞操作，请求处理与响应分离削峰填谷:缓冲突发请求，防
  • python中的构造函数 weixin_30770495 python
    python中构造函数可以这样写classclassname（）：def——init——（self）：#构造函数函数体转载于:https://www.cnblogs.com/begoogatprogram/p/4649076.html
  • python类重载构造函数_Python：重载构造方法 炒锅电解氯化钠 python类重载构造函数
    对于使用过C++的人来说，构造函数与析构函数不会陌生。构造函数在对象创建时被调用，析构函数在对象被销毁时被调用。而Python中也有类似的特殊函数：__new__，__init__，__del__。其中__new__与__init__共同构成了C++中的构造函数，__del__为析构函数。__new__在对象被创建时被调用，而__init__在对象被初始化时被调用。__new__的第一个参数是对象
  • ROS CDK魔法书：建立你的游戏王国（JavaScript篇） 阿里云CloudOps 资源编排ROS游戏javascript开发语言阿里云ROSCDK
    引言在虚拟游戏的世界里，数字化的乐趣如同流动的音符，谱写着无数玩家的共同回忆。而在这片充满创意与冒险的乐园中，您的使命就是将独特的游戏体验与丰富的技术知识相结合，打造出令人难以忘怀的作品。当面对如何实现这一宏伟蓝图时，您或许会想：如何将一款简单而富有趣味的游戏部署到云端，使更多玩家共享这份乐趣？别担心，现在您手中握有一把开启无限可能的大门钥匙——阿里云资源编排服务（ResourceOrchestr
  • 【Python进阶】Python字典添加元素的两种方法。{附带源码+案例} 「已注销」 python开发语言
    引言在Python中，字典（Dictionary）是一种可变的容器模型，且可存储任意类型对象。字典的每个元素都是一个键值对（key-valuepair），其中键（key）必须是唯一的，而值（value）则不必。向字典中添加元素可以通过几种方式实现，但最常用的是通过直接赋值或使用update()方法。直接赋值这是向字典中添加元素最简单直接的方法。如果键已存在，则更新其对应的值；如果键不存在，则添加新
  • ActiveMQ z小天才b ActiveMQjava-activemqactivemqspringboot
    一、ActiveMQ概述1.1什么是ActiveMQ？ActiveMQ是Apache软件基金会开发的一个开源消息中间件，它完全支持JMS（Java消息服务）规范，并提供了高可用性、高性能和可扩展性。ActiveMQ允许不同的应用程序通过消息传递进行异步通信，从而实现系统解耦。1.2ActiveMQ核心特性多协议支持：支持OpenWire、STOMP、AMQP、MQTT等多种协议持久化：支持多种持久
  • 八股文-C++ 运行时多态与函数调用机制详解 tt555555555555 面经C++学习c++开发语言
    C++运行时多态与函数调用机制详解1.重载与覆盖的对比重载示例覆盖示例2.运行时多态的本质3.虚函数表的实现机制代码示例运行结果虚函数表(vtable)和虚指针(vptr)的实现Base类的内存布局Derived类的内存布局动态绑定的过程4.关键问题解答为什么`Base`的析构函数需要是`virtual`？虚函数表是否会影响性能？5.C语言的函数调用过程栈帧(StackFrame)的结构栈帧的创建
  • 【数组模拟邻接表】 奋斗的阿庆 c++算法图论深度优先
    前言在做图论算法题的过程中，总会遇到用数组来模拟邻接表进而表示图。之前一直没弄明白在用数组模拟邻接表相关的细节。如今明白了，记录一下。帮助不理解的小伙伴。一、所用变量constintN=1010;//表示点的个数constintM=10100;//表示边的条数inth[N];//h[i]表示以当前点i为起点所相连的第一条边的序号inte[2*M];//e[i]表示第i条边所对应的终点intne[2
  • 基于springboot大学生入学审核系统的设计与实现 Olivia-gogogo springboot数据库后端
    一、引言在当今数字化时代，信息技术正以前所未有的速度渗透到社会的各个领域，深刻地改变着人们的生活和工作方式。教育领域也不例外，随着高等教育的普及和招生规模的不断扩大，大学生入学审核工作面临着越来越大的挑战。传统的人工入学审核方式已难以满足现代教育管理的需求，暴露出诸多弊端。传统人工入学审核方式效率低下。在每年的招生季，高校招生工作人员需要面对大量的入学申请材料，这些材料不仅数量庞大，而且种类繁多，
  • 微信小程序云开发实现登录功能 Bilkan-studio 微信小程序小程序前端
    使用云开发数据库实现登录功能，多的不说了直接看代码登录功能代码段WXML代码账号密码登录WXSS代码page{width:100%;height:100%;direction:ltr;}.waikuang{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:colu
  • python 读取内存_python内存读写 weixin_39981360 python读取内存
    广告关闭腾讯云11.11云上盛惠，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！也就是说，所有的解释器可以同时读写数据，在一个解释器中对数据做出的修改会自动反映到其他解释器上。虽然还需要一些额外的步骤来处理同步问题，但是有时候可以使用这种方法作为通过管道或者socket传输数据的替代方案。以上这篇python内存映射文件读写方式就是小编分享给大家的全部内容了，希望
  • 基于Python的智能决策支持系统：实现智能化决策的关键要素 AI天才研究院 DeepSeekR1&大数据AI人工智能大模型自然语言处理人工智能语言模型编程实践开发语言架构设计
    文章目录基于Python的智能决策支持系统：实现智能化决策的关键要素11.背景介绍2.核心概念与联系数据收集与预处理模型构建与训练决策规则生成与优化决策结果评估与反馈3.核心算法原理具体操作步骤数据挖掘算法机器学习算法优化算法4.数学模型和公式详细讲解举例说明线性回归模型最小二乘法5.项目实践：代码实例和详细解释说明6.实际应用场景金融领域医疗领域供应链管理智能制造7.工具和资源推荐编程语言和开发
  • 如何返回工具执行的工件 shuoac windowsmicrosoftpython
    工具是在AI模型中被调用并将输出反馈给模型的实用程序。有时，我们希望将工具执行的工件，例如自定义对象、数据帧或图像，传递给链或代理中的下游组件，但不希望向模型本身暴露这些工件。为了实现这一点，Tool和ToolMessage接口提供了一个机制，以区分提供给模型的信息(ToolMessage.content)和供外部使用的信息(ToolMessage.artifact)。技术背景介绍在AI开发中，工
  • hive 使用oracle数据库 sardtass hadoophive开源项目
    hive使用oracle作为数据源，导入数据使用sqoop或kettle或自己写代码（淘宝的开源项目中有一个xdata就是淘宝自己写的）。感觉sqoop比kettle快多了，淘宝的xdata没用过。hive默认使用derby作为存储表信息的数据库，默认在哪启动就在哪建一个metadata_db文件放数据，可以在conf下的hive-site.xml中配置为一个固定的位置，这样不论在哪启动都可以了。
  • 5个冷门的Adobe系列软件小技巧 reddingtons adobe
    在当今数字化时代，许多学生和教育工作者可以利用教育邮箱免费访问Adobe全系列软件。这意味着您不仅可以使用Photoshop、Illustrator等热门软件，还可以体验Adobe的其他强大工具。由于这些技巧涉及到一些收费软件，因此免费用户可能无法使用。接下来，我们将分享五个冷门的Adobe系列软件小技巧，希望能帮助您更好地利用这些工具。1.在AdobeAcrobat中添加水印在处理PDF文件时，
  • 补偿算法之相位补偿算法 傻童:CPU Qt自动控制理论算法android
    补偿算法之相位补偿算法相位补偿算法：在一些控制系统中，系统的相位裕度可能不足，导致系统稳定性变差。相位补偿算法通过增加或减少特定频率下的相角来调整系统的相位特性。例如，在电机调速系统中，为了提高系统在高速运行时的稳定性，可能会采用相位超前补偿算法，通过在控制回路中添加适当的滤波器或控制器结构，使系统在高频段的相位提前，从而增加相位裕度，防止系统出现振荡或失稳现象。相位补偿算法的核心目标是对信号或系
  • 人工智能之数学基础：矩阵的范数 每天五分钟玩转人工智能 机器学习深度学习之数学基础人工智能矩阵算法线性代数范数
    本文重点在前面课程中，我们学习了向量的范数，在矩阵中也有范数，本文来学习一下。矩阵的范数对于分析线性映射函数的特性有重要的作用。矩阵范数的本质矩阵范数是一种映射，它将一个矩阵映射到一个非负实数。矩阵的范数前面我们学习了向量的范数，只有当满足几个条件的时候，此时才可以，那么矩阵也是一样的，当满足下面的条件的时候，才可以定义||A||为矩阵A的范数矩阵范数的性质连续性矩阵范数是连续的函数。即如果矩阵序
  • 西门子PLC S7-1200实例详解：涉及安川机器人通信、伺服电机控制及传感器数据轮询 DMQAfdLc 机器人大数据
    西门子PLCS7-1200程序实例解析：电气编程者的技术之旅随着科技的飞速发展，工业自动化已成为现代制造业的核心。西门子PLC以其卓越的性能和广泛的应用，成为了工业控制领域的佼佼者。在本次技术博客中，我们将深入探讨西门子PLCS7-1200在博图版本V15下的应用实例，为电气编程者提供宝贵的学习借鉴。一、西门子PLC与安川机器人TCPIP通讯在工业自动化领域，PLC与机器人之间的通讯至关重要。西门
  • 每日一题——二叉树的深度 tt555555555555 面经C语言算法题算法数据结构
    二叉树的最大深度问题描述示例方法一：递归法代码实现代码解析方法二：层次遍历（广度优先搜索）代码实现代码解析总结问题描述给定一个二叉树的根节点root，返回其最大深度。二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。示例示例1输入：root=[3,9,20,null,null,15,7]输出：3解释：从根节点到最远叶子节点的最长路径为3->20->15或3->20->7，路径长度为3
  • python 数据可视化matplotib库安装与使用 范哥来了 信息可视化python开发语言
    要使用matplotlib库进行数据可视化，首先你需要确保已经安装了该库。如果你还没有安装，可以通过Python的包管理器pip来安装它。在你的命令行工具中运行以下命令来安装matplotlib：pipinstallmatplotlib安装完成后，你就可以开始使用matplotlib来创建图表了。下面是一个简单的例子，演示如何使用matplotlib绘制一个基本的折线图。这个例子可以被添加到你当前
  • 多线程编程之理财 周凡杨 java多线程生产者消费者理财
          现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
  • [Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
    首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
  • SecureCRT快捷键 daizj secureCRT快捷键
    ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首
  • Java 子类与父类这间的转换 周凡杨 java 父类与子类的转换
        最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。       代码：            
  • 可视化swing界面编辑 朱辉辉33 eclipseswing
          今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。       首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
  • web报表工具FineReport常用函数的用法总结（文本函数） 老A不折腾 finereportweb报表工具报表软件java报表
    文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。   CODE CODE(text):计算文本串中第一个字
  • mysql安装出错 林鹤霄 mysql安装
    [root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################
  • linux下编译libuv aigo libuv
    下载最新版本的libuv源码，解压后执行： ./autogen.sh   这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool     如果提示错误：make: *** No targe
  • 中国行政区数据及三级联动菜单 alxw4616
    近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用   文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0
  • 哈夫曼加密文件 百合不是茶 哈夫曼压缩哈夫曼加密二叉树
     在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;   加密步骤:  1,统计文件中字节出现的次数,作为权值   2,创建节点和哈夫曼树   3,得到每个子节点01串   4,使用哈夫曼编码表示每个字节  
  • JDK1.5 Cyclicbarrier实例 bijian1013 javathreadjava多线程Cyclicbarrier
    CyclicBarrier类 一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
  • 九项重要的职业规划 bijian1013 工作学习
    一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储
  • 【Java范型四】范型方法 bit1129 java
    范型参数不仅仅可以用于类型的声明上，例如   package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
  • 【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
      package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
  • ua实现split字符串分隔 ronin47 lua split
    LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
  • java-从先序遍历和中序遍历重建二叉树 bylijinnan java
    public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
  • openfire开发指南《连接和登陆》 开窍的石头 openfire开发指南smack
    第一步     官网下载smack.jar包     下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步     把smack里边的jar导入你新建的java项目中 开始编写smack连接openfire代码 p
  • [移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
        看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎      但是，对于手机的新设计，有几点我们也要注意      第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
  • 20款国外知名的php开源cms系统 cuiyadll cms
    内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
  • Java生成全局唯一标识符 darrenzhu javauuiduniqueidentifierid
    How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
  • php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
    SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
  • 5天学会一种 web 开发框架 dcj3sjt126com Web框架framework
    web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 建议把本文
  • Gson使用三(Map集合的处理,一对多处理) eksliang jsongsonGson mapGson 集合处理
    转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述        Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 package com.ickes.json; import java.lang.refl
  • cordova实现“再点击一次退出”效果 gundumw100 android
    基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
  • openldap configuration leaning note iwindyforest configuration
    hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
  • Nullability and Objective-C 啸笑天 Objective-C
    https://developer.apple.com/swift/blog/?id=25   http://www.cocoachina.com/ios/20150601/11989.html   http://blog.csdn.net/zhangao0086/article/details/44409913   http://blog.sunnyxx
  • jsp中实现参数隐藏的两种方法 macroli JavaScriptjsp
    在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
  • Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。   <a href="#/group-buy" class="btn bt
  • 二维数组在Java和C中的区别 流淚的芥末 javac二维数组数组
    Java代码：   public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } }  运行结果： Exception in thread "mai
  • systemctl命令用法 wmlJava linuxsystemctl
    对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他