一个爬坑的Coder
一个爬坑的Coder

使用CSS的position: sticky属性实现吸顶效果

效果图:

所有代码:

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>

    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .container {
        border: 1px solid salmon;
        height: 400px;
        overflow-y: auto;
      }

      .article {
        line-height: 2;
      }

      .article h2 {
        background: orangered;
        position: sticky;
        top: 0;
        color: white;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="article">
        <h2>文章标题111h2>
        <p>
          文章内容111
        p>
      div>
      <div class="article">
        <h2>文章标题222h2>
        <p>
          文章内容222
        p>
      div>
      <div class="article">
        <h2>文章标题333h2>
        <p>
          文章内容333
        p>
      div>
    div>
  body>
html>

实现吸顶后改变高度

效果图:

整体思路:

标题的地方做了两层, 外层容器, 内层放内容, 两层都做了吸顶效果
两层容器有高度差, 我们把这个差值通过top属性挪上去, 然而内层也做了吸顶效果, 就会卡在 top: 0的位置, 相当于只展示了内层, 看起来就高度缩小了

使用CSS的position: sticky属性实现吸顶效果_第1张图片

所有代码

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>

    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .container {
        border: 1px solid salmon;
        height: 400px;
        overflow-y: auto;
      }

      .article {
        line-height: 2;
      }

      .article header {
        height: 100px;
        background: orangered;
        color: white;
        font-size: 28px;
        display: flex;
        align-items: center;

        position: sticky;
        /* 内层的高度 - 外层的高度, 也就是负值, 把正式的内容展示出来就行了, 多出来的内容滑到上面 */
        top: calc(60px - 100px);
      }

      .article .header-inner {
        position: sticky;
        top: 0;
        height: 60px;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="article">
        <header><p class="header-inner">文章标题111p>header>
        <p>文章内容111p>
      div>
      <div class="article">
        <header><p class="header-inner">文章标题222p>header>
        <p>文章内容222p>
      div>
      <div class="article">
        <header><p class="header-inner">文章标题333p>header>
        <p>文章内容333p>
      div>
    div>
  body>
html>

你可能感兴趣的:(#,CSS学习,css,前端,javascript)

  • 【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方 爱上大树的小猪 vue.jsbootstrap前端
    简介：Vue.jsVue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。它允许开发者创建高效的、交互式的单页面应用（SPA）。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的应用提供强大的功能支持。Vue通过组件化的方式让代码更加模块化、可重用和维护。BootstrapBootstrap是一个开源的CSS框架，旨在简化网页和Web应用的前
  • 短剧源码搭建部署短剧小程序测试报告 南阳迈特网络科技 短剧源码短剧小程序短剧系统系统架构小程序php
    短剧小程序测试报告1.概述今天对一款短剧小程序进行了全面测试，整体体验非常优秀。该小程序在功能设计、用户体验、后台管理以及商业模式等方面都表现出色。以下是详细的测试反馈：感兴趣的可以点我参考一起讨论一下2.前端体验2.1格式布局优点：界面设计简洁美观，色彩搭配舒适，符合短剧类应用的用户群体审美。布局合理，导航清晰，用户可以轻松找到所需功能。响应式设计良好，在不同尺寸的设备上都能保持良好的显示效果。
  • 前端解决跨域问题的三种方法 web13638179351 前端html面试前端nginx服务器
    一、cors后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。二、服务器代理proxy2.1步骤（1）修改Nginx或者Apache服务器文件，目前博主使用的是Nginx代理（
  • JSON的序列化和反序列化 -黑大帅 jsonlinux数据库
    一、什么是JSONJSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，因其简单、易读、易写而被广泛采用。它通过键值对和数组的方式表示数据，能够高效地在前后端之间传输数据，并且大多数编程语言都支持JSON格式。JSON主要用于前后端数据交换、配置文件存储和API设计等场景，使得数据处理变得直观和一致。二、序列化序列化就是将对象转换为JSON格式的字符串。在pyth
  • 前端开发中的最佳实践与技巧 lina_mua javascriptvue.jshtml前端es6node.js
    1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代
  • 前端开发岗模拟面试题套卷A答案及解析（一）技术面部分 向贤 前端开发前端数据库javascript面试
    前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);
  • 如何优化你的 Node.js API 程序员小英 node.js
    原文来源于：freeCodeCamp，作者：PapayaHUANG如有侵权，联系删除在这篇文章中，我将讲解如何优化使用Node.js编写的API。前提条件想要充分了解本文内容，你必须了解以下概念：Node.js的设置与安装如何使用Node创建API如何使用PostmanJavaScript的async/await工作原理Redis的基础操作API优化到底指的是什么优化包含了改善API的响应时间。响
  • Node.js定义以及性能优化 Sunshinedada node.js
    Node.jsNode.js是一个基于ChromeV8引擎的JavaScript运行时，广泛用于构建高性能的网络应用。以下是一些常见的Node.js面试题及其解答，帮助你准备面试：1.什么是Node.js？Node.js是一个基于ChromeV8引擎的JavaScript运行时，允许开发者使用JavaScript编写服务器端代码。它采用事件驱动、非阻塞I/O模型，适合构建高性能、可扩展的网络应用。
  • React 开发全面指南：核心 API、方法函数及属性详解 北辰alk 前端reactreact.js前端前端框架
    React作为当前最流行的前端框架之一，凭借其组件化、声明式编程和高效的虚拟DOM机制，成为构建复杂用户界面的首选工具。本文将深入解析React的核心API、方法函数及属性，覆盖从基础到高级的各个方面，助你全面掌握React开发技巧。文章目录1.React核心概念1.1组件化开发1.2JSX语法1.3虚拟DOM2.组件生命周期方法（类组件）2.1挂载阶段（Mounting）2.2更新阶段（Upda
  • Vue 与 React 深度对比：从代码到原理的全方位解析 北辰alk react前端vuevue.jsreact.js前端
    Vue和React作为当前最主流的前端框架，各自凭借独特的理念和设计哲学赢得了大量开发者的青睐。Vue以“渐进式框架”和易上手著称，React则以“声明式UI”和灵活性见长。本文将从代码风格、底层原理、API设计、性能优化、生态系统等多个维度，对两者进行深度对比，助你在技术选型时做出明智决策。文章目录1.核心设计理念对比1.1Vue：渐进式框架1.2React：声明式UI库1.3哲学差异总结2.模
  • JavaScript 简单类型与复杂类型-堆和栈 難釋懷 javascript开发语言
    深入理解JavaScript中的简单类型（基本数据类型）与复杂类型（引用数据类型）如何在内存中存储对于编写高效、无误的代码至关重要。本文将探讨这两种类型的差异，以及它们在内存中的存储机制——栈（Stack）和堆（Heap），并通过实例说明这些概念的实际应用。内存基础：栈与堆栈（Stack）栈是一种后进先出（LIFO,LastInFirstOut）的数据结构，通常用于存储函数调用信息和局部变量。由于
  • 2024年前端框架选择指南：React、Vue、Angular与新兴框架对比 海豹工匠 前端框架
    在当今快速发展的前端技术领域，选择合适的框架对于项目成功至关重要。本文将深入探讨主流前端框架的特点、优缺点及适用场景，为开发者提供全面的选择指南。主流框架概览React特点：基于组件的开发方式，虚拟DOM差分算法优点：灵活性强，生态系统丰富缺点：需要学习JSX和状态管理库适用场景：中大型项目，需要高度灵活性和复杂状态管理的应用Vue特点：简单易学，模板直观，内置状态管理优点：学习曲线平缓，适合快速
  • [原创]手把手教学之前端0基础到就业---day15堆和栈 + 作业part3(Javascript) *星之卡比* javascript开发语言ecmascript
    7.数据存储—栈(stack)和堆(heap)前面我讲过,数据类型分为基本数据类型（简单数据类型）和复杂数据类型（引用数据类型）基本数据类型和复杂数据类型最大的区别就是存储上的区别下图里的灰色区域可以看做我们的内存空间,黄色是栈空间,橘黄色是堆空间简单数据类型存储在栈空间里,比如变量名函数名,复杂数据类型存储在堆空间里栈内存:按序排列,先来的在栈底,后来的在栈顶,就像是堆叠盘子一样的在堆内存中,数
  • 【前端】react+ts 轮播图的实现 Loong_DQX 前端react.jstypescript
    一、场景描述在很多网站的页面中都有轮播图，所以我想利用react.js和ts实现一个轮播图。自动轮播图已经在前面实现过了，如：https://blog.csdn.net/weixin_43872912/article/details/145622444?sharetype=blogdetail&sharerId=145622444&sharerefer=PC&sharesource=weixin_
  • 前端面试题---vue和react的区别 *星之卡比* 前端vue.jsreact.js
    文章目录框架vs库：学习曲线：模板vsJSX：数据绑定：状态管理：性能：社区支持：框架vs库：Vue是一个完整的框架，提供了从模板到状态管理的全套解决方案；React是一个UI库，主要聚焦于构建用户界面，其他功能依赖第三方库。学习曲线：Vue的语法更简洁，易于上手，适合初学者；React使用JSX，结合了JavaScript和HTML，学习曲线较陡。模板vsJSX：Vue使用类似HTML的模板语法
  • AI前端革新金融风控：ScriptEcho助力高效开发 wangtaohappy 人工智能前端
    1.引言：金融风控的挑战与前端效率需求在当今快速变化的金融环境中，风险评估和反欺诈已成为金融机构运营的核心。金融风控不仅关乎企业的盈利能力，更直接影响着整个金融体系的稳定。一个强大的风控系统需要能够实时监控、分析并预测潜在的风险，从而保护企业和用户的资产安全。然而，构建和维护这样一套复杂的系统并非易事，尤其是在前端开发方面，面临着诸多挑战。传统的前端开发模式，依赖于人工编写大量的代码，这在快速迭代
  • 星河飞雪网络安全学习笔记-安全见闻1-3 芝士布偶 网络安全
    安全见闻-了解安全知识编程语言日常编程语言C语言：一种通用的、面向过程的编程语言，广泛运用于系统软件呵呵嵌入式开发C++：面向对象的编程语言，常用于游戏开发、高性能计算等领域Java：一种广泛使用的面向对象编程语言、具有跨平台性、应用于企业级应用开发等Python（萌新推荐）：简洁易学，拥有丰富的库，适用于数据分析、人工智能、web开发等Javascript：主要用于网页前端开发，也可用于服务器端
  • HarmonyOS NEXT - 管理网页文件上传与下载 兔子不吃饭 HarmonyOSNEXTharmonyos华为
    上传文件Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求，如果应用开发者不做任何处理，Web会提供默认行为来处理前端页面文件上传的请求。下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。应用侧代码
  • JavaScript 番茄工作法倒计时器：轻松实现时间管理，新手友好教程前端倒计时设计案例：用 JavaScript 实现番茄工作法，代码全解析从零开始构建番茄工作法倒计时器：JavaScript 南北极之间 前端进阶练手实战javascript前端开发语言1024程序员节番茄工作法倒计时
    效果图：博客教程：用JavaScript构建番茄工作法倒计时器目录项目介绍工具与环境准备项目结构HTML构建页面结构CSS美化倒计时页面JavaScript实现倒计时与番茄工作法功能总结1.项目介绍在本教程中，我们将使用HTML、CSS和JavaScript创建一个带有番茄工作法的倒计时器。番茄工作法是一种有效的时间管理方法，将工作时间分为25分钟的工作时间和5分钟的休息时间循环。你将学习如何：使
  • Vue01 memorycx vue.jsjavascriptecmascript
    vuevue基础vue-clivue-routervuexelement-uivue3vue基础vue是什么一套用于构建用户界面的渐进式JavaScript框架采用组件化模式，提高diamagnetic复用率，让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率去vue官网下载开发版本，然后在html文件中引入//这是在头部引入细节：root容器里的代码依然符合html规范，只不过
  • 前端下载文件的几种方式使用Blob下载文件 m0_74824517 前端状态模式
    前端下载文件的几种方式使用Blob下载文件在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果excel等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好我们先一下第一种的使用场景：-a链接下载文件我们可以通过download
  • 鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • Node.js 完全教程：从入门到精通 web15117360223 面试学习路线阿里巴巴node.js
    Node.js完全教程：从入门到精通Node.js是一个基于ChromeV8引擎的JavaScript运行环境，允许开发者在服务器端使用JavaScript。它的非阻塞I/O和事件驱动架构使得Node.js非常适合于构建高性能的网络应用。本文将详细介绍Node.js的安装、基本语法、模块系统、异步编程、Express框架、数据库操作等内容，帮助你从入门到精通Node.js。1.Node.js简介N
  • Webpack Module Federation实战：微前端架构 糖糖老师436 前端webpack架构
    WebpackModuleFederation是Webpack5引入的一个特性，它支持微前端架构，允许不同的Web应用之间共享模块，而不需要运行时的容器或服务器端的构建步骤。项目结构假设有两个独立的React应用：app1和app2，其中app2将通过ModuleFederation作为远程模块被app1消费。app1：主应用app2：作为远程微应用app2配置首先，在app2中配置Webpack
  • Haxe：OpenFL框架与Haxe游戏开发_2024-07-15_07-13-55.Tex chenjj4003 游戏开发2网络游戏引擎c++开发语言深度学习
    Haxe：OpenFL框架与Haxe游戏开发Haxe简介Haxe语言概述Haxe是一种开源的、多范式编程语言，它被设计为一种高级语言，用于编写跨平台的应用程序。Haxe的独特之处在于它的编译器，能够将Haxe代码编译成多种目标语言，包括JavaScript、C++、Java、PHP、Python、C#和ActionScript。这种能力使得开发者能够使用相同的代码库为不同的平台生成代码，极大地提高
  • INX246 HTML CSS PHP 后端
    GroupProject2/2024INX246ADVANCEDCOMPUTERPROGRAMMINGFORMODERNMANAGEMENTProjectOverviewGroupproject:3-4memberspergroupDevelopawebsitewithdatabaseandagroupreportProjectsubmissionandpresentation(on-sit
  • 一文读懂 NPM 版本 npm前端工程化
    这是前端工程化的系列文章版本号组成nodepackage版本号由四部分组成：major.minor.patch[-prerelease]，比如：1.0.2-beta.1，其中prerelease可选。major：代表主版本号，通常在需要提交不能向下兼容的情况下对该版本号进行升级minor：代表次版本号，通常在新增功能时才对该版本号进行升级patch：代表修复版本号，升级该版本号通常代表修复一些bu
  • CSS 真的会阻塞文档解析吗？从浏览器渲染原理深入探究一下 银之夏雪 css前端浏览器浏览器渲染
    在网页开发领域，一个常见的疑问是CSS是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题，需要从浏览器渲染网页的原理说起。浏览器渲染网页的基本流程浏览器在接收到HTML文档后，会依次进行以下几个主要步骤：解析HTML：浏览器从网络或本地获取HTML文件，然后开始解析，将HTML代码转换为DOM（DocumentObjectModel，文档对象模型）树。DOM
  • React 中的受控组件与非受控组件：深度剖析与实战应用 银之夏雪丶 react.jsjavascript前端
    一、引言在如今的前端开发里，React可是响当当的角色，是咱搭建用户界面的得力帮手。一碰到表单处理和用户输入交互这些事儿，受控组件和非受控组件就派上大用场了，它们就像是两种不一样的工具，各有各的厉害之处。要是咱能把它们摸透了，知道啥时候用啥，那开发出来的React应用肯定既好用又靠谱，用户体验也差不了。二、受控组件（一）定义咋来的受控组件，简单讲，就是让表单元素的值跟React组件的state绑得
  • ＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存） 机构师 rust开发语言后端taurijavascript
    前言本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。环境配置系统：windows10平台：visualstudiocode语言：rust、javascript库：tauri2.0概述本文基于tauri框架，创建一个图片显示器程序。要实现的功能是，如何从本地路径加载、显示
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他