佚名
佚名

网页中时光轴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实现)

  • 数据机构 C语言实现队列（含代码详解 易懂） 码上好玩
    /*数学模型参照《大话数据结构》队列部分!!!取余运算实现队列循环!!!*/#include#include#include#include#defineOK1#defineERROR0#defineTURE1#defineFALSE0#defineMAXSIZE20/*队列最大的成员个数即数组的长度*/typedefintStatus;typedefintQElemType;/*循环队列的顺序存
  • 【系统架构设计师】以数据为中心的体系结构风格 王佑辉 系统架构设计师系统架构
    目录1.说明2.仓库体系结构风格3.黑板体系结构风格1.说明1.以数据为中心的体系结构风格主要包括仓库体系结构风格和黑板体系结构风格。2.仓库体系结构风格1.仓库（Repository）是存储和维护数据的中心场所。2.在仓库风格中，有两种不同的构件：中央数据结构说明当前数据的状态以及一组对中央数据进行操作的独立构件，仓库与独立构件间的相互作用在系统中会有大的变化。3.这种风格的连接件即为仓库与独立
  • Python实现扫雷游戏 叫兽-郭老师 【Python】游戏开发游戏python
    提供学习或者毕业设计使用，功能基本都有，不能和市场上正式游戏相提比论，请理性对待！通过购买专栏或者CSDN问答提问，采纳后，私信博主。提供源码！说明：需要的话联系博主！谢谢。如果需要一步一步解析步骤，可以联系博主，博主可以提供详细实现步骤。博客下方有我vx。代码：#扫雷游戏im
  • 基于python的“扫雷”游戏实现 m0_74802518 游戏pythonwindows
    一、引言：最近在学习python语言，想着尝试通过python来实现儿时玩过的小游戏，于是从"扫雷"游戏开始，依据自己的理解，编写游戏代码。若有不周到之处，还望大家批评指正。环境配置：python3.12,pygame2.6.1,numpy1.26.4二、效果展示灰色为未揭开的单元，红色表示地雷，绿色表示“插旗”（即认定此单元格为地雷）三、程序思路1.程序框架图如图所示，我们需要创建“扫雷”用的棋
  • Go语言select的高级玩法 我不吃牛肉！ Go进阶golang开发语言后端
    Go语言select的高级玩法介绍select是Go语言中用于处理多路通道操作的关键字，它可以同时监听多个通道的读写操作，并根据就绪的通道执行相应的逻辑。select的高级用法可以帮助开发者编写更高效、更灵活的并发代码。以下是select的一些高级玩法：1.超时控制select可以与time.After结合，实现操作的超时控制。这在需要限制某个操作的执行时间时非常有用。select{caseres
  • 元组的奥妙 鲨鱼学python python开发语言
    一、元组的定义元组是Python中的一种数据结构，它类似于列表，但是元组是不可变的，即一旦创建就不能修改。元组使用圆括号()来表示，其中的元素可以是任意类型，包括数字、字符串、列表等。元组可以通过索引访问其中的元素，也可以使用切片操作获取部分元素。元组一般用于存储一组相关的值，且这些值不会发生变化的情况下使用。1、元组定义的第一种方法#当元组中只有一个元素时，逗号不能省略t2=(10,)print
  • 探索DeFi世界：用Python开发去中心化金融应用 Echo_Wish Python！实战！python去中心化金融
    探索DeFi世界：用Python开发去中心化金融应用在区块链技术快速发展的今天，去中心化金融（DeFi）正在改变传统金融行业的格局。作为一名自媒体创作者和技术爱好者，我希望通过本文分享如何用Python开发去中心化金融应用，帮助读者深入了解DeFi的潜力和技术实现方式。什么是去中心化金融（DeFi）？去中心化金融，即DeFi，是指利用区块链技术和智能合约构建的金融服务系统。与传统金融体系不同，De
  • TOGAF之架构标准规范-信息系统架构 | 应用架构 计算机科技研究员 人工智能技术与架构应用软件系统技术与架构系统架构
    TOGAF是工业级的企业架构标准规范，信息系统架构阶段是由数据架构阶段以及应用架构阶段构成，本文主要描述信息系统架构阶段中的应用架构阶段。如上所示，信息系统架构（InformationSystemsArchitectures）在TOGAF标准规范中处于C阶段。阶段目标开发目标信息系统架构，描述企业的信息系统架构如何赋能业务结构以及架构愿景，解决架构工作组以及利益相关者关注的问题识别确认基线信息系统
  • arco design vue 表格Table自定义筛选 全栈小董 vue.jsarcodesign前端
    arcodesignvue表格Table筛选,默认是这样的{title:'审核状态',dataIndex:'applicationStatus',slotName:'applicationStatus',filterable:{//定义筛选选项filters:[{text:'全部',value:''},{text:'审核中',value:'1'},{text:'已通过',value:'2'},{t
  • Golang的代码注释规范指南 caihuayuan5 面试题汇总与解析springbootjava后端大数据课程设计
    Golang的代码注释规范指南一、注释的重要性为什么需要注释在编写代码的过程中，我们经常会遇到需要解释代码意图、功能、特殊处理方式等情况。这时，注释就发挥了非常重要的作用，它能够帮助代码的阅读和理解，提高代码的可维护性和可读性。注释的作用良好的注释不仅能帮助他人理解代码，还能够帮助自己在时间过去后回顾代码。另外，通过注释可以更好地协同开发，帮助团队成员相互理解和配合。二、Golang注释规范单行注
  • vue3封装一个快速查询表格数据的hook，高亮搜索关键字，减少重复代码，提高产出速度 旅行中的伊蕾娜 javascript前端vue.jstypescript
    因为项目中需要很多查询页面，重复写查询逻辑费时费力，每个查询页面的基本逻辑都是：定义查询参数=>调用接口发送参数=>拿到参数赋值给表格或其他组件回显=>配置分页组件实现分页这么一个过程，所以就封装了一个hook只需要传进来查询参数（无需传分页参数），接口就可以完成上方所有逻辑，还能高亮搜索匹配关键字，如果hook的处理数据逻辑不适用接口返回参数，还可以传递一个自定义处理参数的函数我使用的antdV
  • 高频算法题精讲（Java解法）——算法+实际场景化拆解 大熊计算机毕设 技术博文算法java开发语言
    结合高频算法题，逐步带你走向深度理解。无论你是准备面试，还是在开发中需要优化，掌握这些基础的算法思维将会让你事半功倍。第一部分：算法的基础理论与实际意义在进入具体的算法问题之前，我们首先要理解一个问题：为什么要学习算法？在日常编程中，我们往往会遇到各种问题，而每一个问题背后都有不同的解法。而高效的算法不仅仅是为了拿到面试的offer，它们能帮助我们在工作中提升性能，减少复杂度，使得产品运行更加顺畅
  • 【工作·学习记录】html页面转为pdf 沉默不多话 前端页面转为pdf
    html页面转为pdf实现步骤将页面转为图片形式并传输在后台将图片写入pdf实现步骤将页面转为图片形式并传输首先引入html2canvas.jshtml2canvas(document.body,{//截图对象//此处可配置详细参数onrendered:function(canvas){//渲染完成回调canvascanvas.id="mycanvas";//生成base64图片数据vardata
  • 使用 Python 快速扫描局域网中活动的 IP 技术探索 pythontcp/ip开发语言
    部分数据来源：ChatGPT本文仅用于信息安全的学习，请遵守相关法律法规，严禁用于非法途径。若观众因此作出任何危害网络安全的行为，后果自负，与本人无关。简介如果你需要在局域网中查找活动的IP地址，那么这个Python脚本可以帮助你快速地扫描整个局域网，并输出所有活动的IP地址，最后将它们存储到一个文件中，方便你查看。这个脚本基于Python语言，使用了os和threading模块，它能够快速扫描所
  • 获取网页内图片，并生成PDF文档 软科 pdfpython开发语言
    2024年小升初教材变更了，但是书店买不到新教材，看到网上有电子版教材，就写了个方法将教材图片来取下来并生成PDF文档，这样方便打印学习了。在此处记录一下方法。第一步：使用jsoup工具类抓取网页中的图片并保存本地：登录后复制publicstaticvoidmain(String[]args)throwsIOException{//网上电子版教材地址URLurl=newURL("教材网络地址");
  • 小白学BFS：迷宫最短路径 馍得脑呆 小白学算法算法
    问题描述给定N*N的迷宫（32、2->3、3->4、4->5的访问情况。访问数组初始值都为-1，当第一次访问的时候，记录当前访问层数，如果后续访问层数>已经记录的层数，说明当前一定不是最短路径，直接结束本次循环。当访问到终点，最短路径标志flag+1。其他思路见代码。。以后有时间再加。。代码实现（思路+测试疯狂注释版）#includeusingnamespacestd;inttestcase;in
  • 【C#】委托是什么 ￡އއ昔年 c#java开发语言
    在C#中，委托（Delegate）是一种类型安全的函数指针，可以将方法作为参数传递或者保存方法的引用。下面详细介绍一下委托的相关概念和用法：1.基本概念类型安全：委托在声明时会指定方法的返回类型和参数列表，只有符合签名的方法才能赋值给该委托，保证了类型安全。多播能力：委托不仅可以引用一个方法，还能同时引用多个方法。当调用委托时，会依次调用所有被引用的方法（适用于返回类型为void的委托）。面向对象
  • Kotlin 实现图片裁剪 zimoyin kotlin开发语言android
    /***图片裁剪*@paramoriginalImage原始图像*@paramstartX裁剪区域的起始x坐标*@paramstartY裁剪区域的起始y坐标*@paramendX裁剪区域的结束x坐标*@paramendY裁剪区域的结束y坐标**/funcropImage(originalImage:BufferedImage,startX:Int,startY:Int,endX:Int,endY:
  • Android中的AtomicLong：原理、使用与实战指南 jiet_h Android夯实基础android
    本文结合生产环境实战案例，带你彻底搞懂AtomicLong在Android多线程开发中的应用。全文包含大量Kotlin代码示例，建议收藏备用。一、为什么需要AtomicLong？在Android开发中，当多个线程同时操作同一个Long型变量时，你可能会遇到这样的诡异场景：varcounter=0Lfunincrement(){//这个操作在并发场景下会出错！counter++}这个简单的自增操作，
  • 单片机入门（一） 晓风伴月 单片机开发单片机嵌入式硬件
    一、单片机的内部资源Flash：程序存储空间RAM：数据存储空间SFR:特殊功能寄存器的简称。它存在于单片机的内部存储空间中，用于存储控制单片机各种硬件模块工作的数据。这些寄存器具有特定的功能，控制着单片机的各种操作，如输入输出、定时器、中断等。通过对这些寄存器的配置和操作，可以实现单片机在不同应用场景下的功能需求。SFR的特点特定地址：每个SFR都有其特定的地址，通过这些地址可以访问和操作它们。
  • TikTok矩阵系统介绍 m0_74891046 矩阵
    在TikTok的多账号管理中，矩阵系统是一种高效的管理方式，能够帮助运营者合理分配资源、优化内容策略，提高整体账号的协同效应。矩阵系统主要涉及多个账号的内容规划、互动管理、数据分析等方面，适用于个人创作者、团队以及机构化运营。1.TikTok矩阵系统的核心概念矩阵系统指的是通过系统化的方式运营多个TikTok账号，使其在内容、用户互动和数据分析等方面形成协同效应。与单账号运营相比，矩阵系统具备更高
  • 浏览器里设置代理的作用 术业有专攻，闻道有先后 #Webphp服务器linux
    一、代理服务器常识1、代理服务器的定义：代理服务器是介于浏览器和Web服务器之间的一台服务器，当你通过代理服务器上网浏览时，浏览器不是直接到Web服务器去取回网页而是向代理服务器发出请求，由代理服务器来取回浏览器所需要的信息并传送给你的浏览器。2、代理服务器的工作机制：代理服务器的工作机制很象我们生活中常常提及的代理商，假设你自己的机器为A机，你想获得的数据由服务器B提供，代理服务器为C，那么具体
  • C#+Halcon 垂直拼接/裁切避免频繁开辟内存 单单单单点 C#Halcon图像处理c#图像处理
    背景在做一些线扫相机且进行连续拍摄的项目时，由于图像扫描的随机性，部分场景下需要对图像进行拼接和裁切，获取完整的一个图像。由于halcon中crop相关的算子都是开辟新的内存方式，为了避免内存重复开辟，此处提供一个逻辑方式如下：优点：1）不需要每次都去新建内存，每次只需要做mem_copy的动作，减少耗时2）在完整图像中查找特征，避免特征由于随机性拍照不完整而丢失缺点：1）如果直接复用指针，可能会
  • c++多态 gyc2727 c++开发语言
    1.多态性的概念多态性指的是同一种操作作用于不同的对象，可以有不同的解释，产生不同的执行结果。在C++中，多态性通常通过虚函数来实现，它允许我们在基类中声明一个函数为虚函数，然后在派生类中对该函数进行重写（Override）。当我们使用基类指针或引用指向派生类对象并调用虚函数时，会根据实际对象的类型来调用相应的函数版本，从而实现多态性。2.多态的构成条件2.1多态的构成条件必须通过基类的指针或者引
  • 隐藏任务栏最大化程序窗口中碰到的一些问题及应对方法 eulb VisualC++任务googleshell扩展null
    在最大化程序窗口时可能会碰到这样的问题:有时最大化窗口后会遮挡任务栏,而有时当你想全屏显示隐藏任务栏,那任务栏区域却死活无法被占用,哪怕任务栏已被隐藏经过一轮google,终于找到了解决方法,该方法源自某位网页的答复,转载如下://------------------------------------------frompomelowu（羽战士）回复于2005-05-0815:29:33----
  • [力扣c++实现] 543. 二叉树的直径 夜半读核 力扣算法题练手leetcodec++算法
    543.二叉树的直径难度简单714收藏分享切换为英文接收动态反馈给定一棵二叉树，你需要计算它的直径长度。一棵二叉树的直径长度是任意两个结点路径长度中的最大值。这条路径可能穿过也可能不穿过根结点。示例:给定二叉树1/\23/\45返回3,它的长度是路径[4,2,1,3]或者[5,2,1,3]。注意：两结点之间的路径长度是以它们之间边的数目表示。来源：力扣（LeetCode）链接：https://le
  • Python爬虫实战：四个常见案例详解！ Python_trys python爬虫开发语言Python基础编程语言Python爬虫Python入门
    包含编程籽料、学习路线图、爬虫代码、安装包等！【点击这里领取！】网络爬虫是数据采集的重要工具，Python凭借其丰富的库和简洁的语法，成为了爬虫开发的首选语言。本文将详细介绍四个常见的Python爬虫实战案例，帮助你从入门到精通。目录案例一：静态网页数据抓取案例二：动态网页数据抓取案例三：模拟登录与表单提交案例四：数据存储与导出1.环境准备在开始之前，确保你已经安装了以下Python库：pipin
  • 视觉定位 完整软件：C# + Halcon，流程可配置、多品牌相机支持、模板匹配与实时播放，【教程】使用C# + Halcon实现可配置的视觉定位软件，支持多品牌相机采图和模板匹配，实时播放输出结果， QhVRjZTKJ 数码相机c#开发语言
    视觉定位完整软件。开发语言：C#+Halcon。1.流程可配置；2.海康威视相机采图，可定制成其它品牌相机（Basler，映美精等）；3.模板匹配；4.定位指针，拟合圆，拟合矩形；跟随模板匹配跑；5.实时播放；输出结果对列；6.代码结构使用共同接口，方便工具扩展。ID:8499727635025643L_买卖不成仁义在【标题】视觉定位软件源码解析与定制化服务【摘要】本文基于C#+Halcon开发语
  • Python图片识别脚本：从零开始实现图像识别！ Python_trys python开发语言编程Python入门Python基础Python识别Python学习
    包含编程籽料、学习路线图、爬虫代码、安装包等！【点击领取！】图像识别是计算机视觉领域的一个重要应用，Python凭借其丰富的库和工具，成为了实现图像识别的首选语言之一。本文将带你从零开始，使用Python编写一个简单的图片识别脚本。我们将使用OpenCV和TensorFlow来实现这个功能。1.环境准备在开始之前，我们需要安装一些必要的Python库。你可以使用pip来安装这些库：pipinsta
  • LeetCode 热门100题-矩阵置零 Rverdoser 算法
    在LeetCode的热门100题中，有一道题目是“矩阵置零”（MatrixZeroes），题目编号为135。该题要求给定一个mxn的矩阵，如果一个元素为0，则将其所在行和列中所有元素都设为0。你需要实现一个高效的算法来完成这个任务。解题思路为了解决这个问题，我们可以采用以下策略：标记法：遍历矩阵，对于每个为0的元素，我们标记其所在行和列的第一个元素（通常是左上角元素）。再次遍历矩阵，如果某个元素所
  • 多线程编程之理财 周凡杨 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其他