前端爱好者。
前端爱好者。

CSS实现footer固定在页面底部

作为一个页面仔你一定遇到过：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？先来看下下面的代码吧 
这是第一种方案，后面还有几种 
HTML代码 

  1. "container">   
  2. "header">这是头部
   
  • "page clearfix">   
  • "left">left sidebar
    •    
  • "content">main content
    •    
  • "right">rightright sudebar
    •    
    •    
  • "footer">footer section
    •    
    •  

    CSS代码 

    1. html,body{margin:0;padding:0;height:100%}   
    2. .container{min-height:100%;height:auto !important;height:100%;/*ie6不识别min-height,如上述处理*/position:relative;}   
    3. .header{background:#ff0;padding:10px;}   
    4. .page{width:960px;margin:0 auto;padding-bottom:60px;/*padding等于footer的高度*/}   
    5. .footer{position:absolute;bottombottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;}   
    6. .left{width:220px;height:800px;float:left;margin-right:20px;background:lime;}   
    7. .content{background:orange;width:480px;float:left;margin-right:20px;}   
    8. .rightright{width:220px;float:rightright;background:green;}   
    9. .clearfix:after,   
    10. .clearfix:before{content:"";display:table}   
    11. .clearfix:after{clear:both;overflow:hidden}   
    12. .clearfix{zoom:1;}   

    实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分） 

    下面我们一起来看看这种方法的实现原理： 

    和标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0； 

    div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，另外我们还需要在div#container容器中设置一个”position:relative”以便于里面的元素进行绝对定位后不会跑了div#container容器； 
    div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果； 

    div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个”width:100%”，让他在整个页面上得到延伸； 

    其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。 
    优点： 
    结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。 

    缺点： 
    不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。 

    方法二： 
    这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。 
    HTML代码 

     
     
    left sidebar
     
    main content
     
     
     
     
     

    CSS代码 

    1. html,body{height:100%;margin:0;padding:0;}   
    2. #container{min-height:100%;height:auto !important;height:100%;}   
    3. #page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;边框宽度也可以*/}   
    4. #header{padding:10px;background:lime;}   
    5. #footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;}   
    6. #left{width:18%;float:left;margin-right:2%;background:orange;}   
    7. #content{width:60%;float:left;margin-right:2%;background:yellow;}   
    8. #right{width:18%;float:rightright;background:green;}   
    9. .clearfix:after{visibility:hidden;height:0;font-size:0;display:block;content:" ";clear:both;}   
    10. * html .clearfix{zoom:1;}/* ie6 */   
    11. *:first-child html .clearfix{zoom:1;} /* ie7 */   

    上面的代码是最基本的HTML Code，同时你也发现了div#footer和div#container是同辈关系，不像方法一，div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中，如：一个三列布局，而且还带有header部分。 

    方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么两种方法不同之处是： 

    div#footer放在div#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与div#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏div#container容器的min-height值； 

    div#footer进行margin-top的负值设置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。 
    优点： 
    结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。 

    缺点： 
    要给footer设置固定值，因此无法让footer部分自适应高度。 

    你可能感兴趣的:(前端,CSS)

    • 【前端开发】能不能用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代理（
    • 前端开发中的最佳实践与技巧 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);
    • 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.模
    • 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分钟的休息时间循环。你将学习如何：使
    • 前端下载文件的几种方式使用Blob下载文件 m0_74824517 前端状态模式
      前端下载文件的几种方式使用Blob下载文件在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果excel等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好我们先一下第一种的使用场景：-a链接下载文件我们可以通过download
    • 鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
      往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
    • Webpack Module Federation实战：微前端架构 糖糖老师436 前端webpack架构
      WebpackModuleFederation是Webpack5引入的一个特性，它支持微前端架构，允许不同的Web应用之间共享模块，而不需要运行时的容器或服务器端的构建步骤。项目结构假设有两个独立的React应用：app1和app2，其中app2将通过ModuleFederation作为远程模块被app1消费。app1：主应用app2：作为远程微应用app2配置首先，在app2中配置Webpack
    • 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框架，创建一个图片显示器程序。要实现的功能是，如何从本地路径加载、显示
    • CSS对DOM解析的阻塞作用 MggnHaskell css前端DOM
      CSS（层叠样式表）是用于定义网页元素外观和样式的语言。它与HTML（超文本标记语言）一起构成了Web页面的核心构建块。在浏览器渲染页面时，DOM（文档对象模型）树的构建和渲染是一个重要的过程。在这个过程中，CSS可能会对DOM解析产生一定的阻塞作用。当浏览器解析HTML文档时，它会构建DOM树，这是一个表示文档结构的树形结构。这个过程是逐步进行的，浏览器从上到下逐行读取HTML文档，并将每个元素
    • JavaScript系列（86）--现代构建工具详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascriptrust开发语言
      JavaScript现代构建工具详解现代前端开发离不开构建工具，它们帮助我们处理模块打包、代码转换、资源优化等任务。让我们深入了解主流的构建工具及其应用。构建工具概述小知识：构建工具主要解决代码转换、文件优化、模块打包、自动刷新、代码分割等问题。主流的构建工具包括webpack、Vite、Rollup等，它们各有特点和适用场景。webpack详解//1.webpack配置classWebpackC
    • 射频学习之HFSS入门（一） OKay_J 学习经验分享笔记
      HFSS下载与介绍下载介绍基本概念特点工作流程优势下载我下载的版本是ANSYSElectromagneticsSuite2023R1通过这篇文章下载，教程非常详细介绍基本概念HFSS(High-FrequencyStructureSimulator)是由ANSYS开发的一个专业的电磁场仿真软件，广泛用于高频电子工程中的电磁场分析。它主要用于设计和优化电磁设备，如天线、微波元件、射频(RF)设备等，
    • CSS实现一张简易的贺卡 StarPlatinum2 简单的CSS程序css前端
      效果当你把鼠标移至贺卡上时，贺卡会缓慢打开。代码如下Document*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:#2e3c50;}.card{width:300px
    • Rust在前端领域有哪些应用? 极客前端探索者 rust前端开发语言
      随着技术的飞速发展，编程语言的选择对项目的影响日益重要。Rust作为一种新兴的编程语言，以其独特的性能和安全性优势，开始在前端领域崭露头角。1.高性能的WebAssembly：Rust可以编译成WebAssembly，这是一种可以在现代Web浏览器中运行的二进制代码格式。这种能力使得Rust编写的程序能够在浏览器中以原生代码的形式运行，极大地提高了执行效率和性能。2.跨平台应用开发：Rust支持多
    • 小程序高度问题&背景scss 澄江静如练_ 小程序java前端
      不同的机型，他的比例啥的都会不一样，同样的rpx也会有不同的效果。所以这里选择了取消高度。还有提供一种背景显示区域的css.background_img{/*background-image:url("https://test-1309061343.cos.ap-nanjing.myqcloud.com/temp/2025/01/06/ed2d3320c3e14f8abb061faaec5081c
    • Svelte 最新中文文档教程（19）—— 测试
      前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目，也是我做个人项目的首选技术栈。目前Svelte基于Svelte5发布了最新的官方文档，但却缺少对应的中文
    • 安装数据库首次应用 Array_06 javaoraclesql
      可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面 这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 注意第一次，使用SQL D
    • Weblogic Server Console密码修改和遗忘解决方法 bijian1013 Welogic
              在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 一.修改Console密码         打开weblogic控制台，安全领域 --> myrealm -->&n
    • IllegalStateException: Cannot forward a response that is already committed Cwind javaServlets
      对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi
    • 基于流的装饰设计模式 木zi_鸣 设计模式
      当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 自定义的类成为装饰类 模仿BufferedReader，对Reader进行包装，体现装饰设计模式 装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 装饰类因为增强已有对象，具备的功能该
    • Linux中的uniq命令 被触发 linux
      Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件 说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
    • 正则表达式Pattern 肆无忌惮_ Pattern
      正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。   例如，我们需要对QQ号码格式进行检验 规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs
    • Oracle高级查询之OVER (PARTITION BY ..) 知了ing oraclesql
      一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se
    • Python调试 矮蛋蛋 pythonpdb
      原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d
    • webservice传递自定义对象时函数为空，以及boolean不对应的问题 alleni123 webservice
      今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。 进行debug之后，发现服务器端返回的确实是有值的对象。 后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
    • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针 百合不是茶
      C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：   定义一个指针p来指向a的地址（&是地址符号）：        
    • Eclipse打不开，提示“An error has occurred.See the log file ***/.log” bijian1013 eclipse
      打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
    • spring aop实例annotation方法实现 bijian1013 javaspringAOPannotation
              在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav
    • [Velocity一]Velocity语法基础入门 bit1129 velocity
      用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html   注释 1.行级注释## 2.多行注释#*  *#   变量定义 使用$开头的字符串是变量定义，例如$var1, $var2,   赋值 使用#set为变量赋值，例
    • 【Kafka十一】关于Kafka的副本管理 bit1129 kafka
      1. 关于request.required.acks   request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在   Th
    • lua统计nginx内部变量数据 ronin47 lua nginx　 统计
      server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(
    • java-11.二叉树中节点的最大距离 bylijinnan java
      import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root"
    • Netty源码学习-ReadTimeoutHandler bylijinnan javanetty
      ReadTimeoutHandler的实现思路： 开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim
    • jquery验证上传文件样式及大小(好用) cngolon 文件上传jquery验证
      <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.
    • 浏览器兼容【转】 cuishikuan css浏览器IE
      浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
    • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数 daizj shell$#$?特殊变量
      前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949   特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
    • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID! dcj3sjt126com unix
      翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
    • android Activity间List传值 dcj3sjt126com Activity
      第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
    • tomcat 设置java虚拟机内存 eksliang tomcat 内存设置
      转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space   ------------
    • Android 数据库事务处理 gqdy365 android
      使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
    • Java 打开浏览器 hw1287789687 打开网址open浏览器open browser打开url打开浏览器
      使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址 使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789
    • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件 justjavac chromeGooglegoogle apichrome插件
      Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
    • 进程VS.线程 m635674608 线程
      资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 多进程模式最大
    • Linux下安装MemCached 字符串 memcached
      前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
    • java设计模式之--jdk动态代理（实现aop编程） Supanccy2013 javaDAO设计模式AOP
          与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &
    • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持 wiselyman spring 4
      2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService {
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他