landl_ww
landl_ww

css 双飞翼布局（flex 、float）和 圣杯布局

双飞翼布局

双飞翼布局，是一种页面布局的形象的表达。具体表现形式为 两边顶宽，中间自适应宽度的三栏布局，中间栏要放在HTML文档流的最前，优先渲染

实现方式

float 浮动流

页面基本布局很简单，总共有三栏，中间栏位于文档流的最前面，优先渲染

```
  
    

      
 // 中间栏，位于文档流的最前面
        
 // 中间栏内容
        

      

      
 // sub 左边栏
      
 // extra 右边栏
    

  

```

  1. 为方便显示，清除margin和padding, 指定高度给container,指定背景颜色给三栏

      /* 清除margin和padding */

  * { 
    margin: 0;
    padding: 0;
  }
  /* 方便显示效果，指定高度，这里应该内容自动撑高 */

  .container {
    height: 600px;
  }
  .main {
    background: red;
  }
  .sub {
    background: blue;
  }
  .extra {
    background: yellow;
  }

  2. 三栏全部左浮动，指定高度

      /* 三栏都左浮动，指定高度 */
  .main, .sub, .extra {
    float: left;
    height: 100%;
  }

  3. 中间栏宽度100%，占满所有宽度， 排在第一行 

      .main {
    width: 100%;
  }

  4. sub 左边栏 指定宽度 150px, 这个时候，因为 main 中间栏已经占满所有宽度，所以 sub 左边栏被挤出屏幕， 又因为之前统一左浮动，所以，
    所以 sub 从 main 下面，第二行排列， 为了 sub 左边栏能够排到第一行的最左边， sub 左边栏 指定 margin-left: -100%; -100% 即为整个屏幕的宽度

    .sub {
    width: 150px;
    margin-left: -100%;
  }

  5. 同理， extra 右边栏 指定宽度 200px, main 中间栏还是已经占满所有宽度，所以 extra 右边栏被挤出屏幕， 又因为之前统一左浮动，所以，
    所以 extra 从 main 下面，第二行排列， 为了 `extra 右边栏能够排到第一行的最右边， extra 右边栏 指定 margin-left: -200px; 

      .extra {
    width: 200px;
    margin-left: -200px;
  }

  6. 为了中间 main 内容不被遮挡，直接在中间 main 内部创建子 main-inner 用于放置内容，在该子 main-inner 里用 margin-left 和 margin-right 为左右两栏留出位置。

      .main-inner {
    margin-left:150px;
    margin-right: 200px;
    height: 100%;
  }

    flex 流

    页面布局基本不变

      <body>
    <section class="container">
      <div class="main"> // 中间栏，位于文档流的最前面
      div>
      <div class="sub">div> // sub 左边栏
      <div class="extra">div> // extra 右边栏
    section>
  body>

  7. 为方便显示，清除margin和padding, 指定高度给container,指定背景颜色给三栏

      /* 清除margin和padding */

  * { 
    margin: 0;
    padding: 0;
  }
  /* 方便显示效果，指定高度，这里应该内容自动撑高 */

  .container {
    height: 600px;
  }
  .main {
    background: red;
  }
  .sub {
    background: blue;
  }
  .extra {
    background: yellow;
  }

  8. 父元素 display: flex; 让子元素排在一行

      .container {
    display: flex;
  }

  9. 中间栏 flex-grow: 1; 自动占满剩余所有宽度

      .main {
    flex-grow: 1;
  }

  10. sub 左边栏 指定 flex-grow: 0; 不占满剩余宽度, flex-shrink: 0; 如果空间不足，该栏不缩小, flex-basis: 150px; 指定固定宽度为150px;
    order: -1, flex 布局中，order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。此处为 -1 ， 排在最左边

      .sub {
    flex: 0 0 150px;
    order: -1;
  }

  11. extra 右边栏 order 为 1 ， 排在最右边

      .extra {
    flex: 0 0 200px;
    order: 1;
  }

圣杯布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡” 问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div

```
    
      

        
 // 中间栏，位于文档流的最前面
// sub 左边栏
// extra 右边栏 ```

  1. 为方便显示，清除margin和padding, 指定高度给container,指定背景颜色给三栏

    /* 清除margin和padding */

* { 
  margin: 0;
  padding: 0;
}
/* 方便显示效果，指定高度，这里应该内容自动撑高 */

.container {
  height: 600px;
}
.main {
  background: red;
}
.sub {
  background: blue;
}
.extra {
  background: yellow;
}

  2. 三栏全部左浮动，指定高度

    /* 三栏都左浮动，指定高度 */
.main, .sub, .extra {
  float: left;
  height: 100%;
}

  3. 中间栏宽度100%，占满所有宽度， 排在第一行 

      .main {
  width: 100%;
}

  4. sub 左边栏 指定宽度 150px, 这个时候，因为 main 中间栏已经占满所有宽度，所以 sub 左边栏被挤出屏幕， 又因为之前统一左浮动，所以，
    所以 sub 从 main 下面，第二行排列， 为了 sub 左边栏能够排到第一行的最左边， sub 左边栏 指定 margin-left: -100%; -100% 即为整个屏幕的宽度

    .sub {
  width: 150px;
  margin-left: -100%;
}

  5. 同理， extra 右边栏 指定宽度 200px, main 中间栏还是已经占满所有宽度，所以 extra 右边栏被挤出屏幕， 又因为之前统一左浮动，所以，
    所以 extra 从 main 下面，第二行排列， 为了 `extra 右边栏能够排到第一行的最右边， extra 右边栏 指定 margin-left: -200px; 

    .extra {
  width: 200px;
  margin-left: -200px;
}

  6. 为了中间 main 内容不被遮挡，需要给父容器container 添加 padding。

    .container{
  padding: 0 200px 0 150px; 
  height: 100%;
}

  7. 这个时候因为两边padding的原因，sub 栏 和 extra 栏的位置已经被挤到中间，为了回到预定的位置，使用 position 定位

    .sub{
  position: relative;
  left: -150px;
}

.extra {
  position: relative;
  right: 200px;
}

总结

总得来说，这三种方法，都是为了实现同一种布局，除了flex布局，其余的方式，所有的浏览器都支持，不会有兼容问题

代码地址 github

你可能感兴趣的:(CSS)

  • 前端面试100问！！ 一只松 javascriptes6
    面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。1、HTML(5)和CSS3方面1
  • 深入探索CSS：从基础到高级，解锁网页设计的无限可能 斯~内克 csscss前端
    CSS（层叠样式表）是现代网页设计中不可或缺的一部分，它不仅决定了网页的外观和风格，还极大地影响了用户体验和交互效果。从简单的文本样式到复杂的布局设计，CSS的灵活性和强大功能使其成为前端开发的核心技术之一。本文将从CSS的基础概念出发，逐步深入到高级应用，带你全面了解CSS的魅力和实用性。一、CSS简介：网页设计的基石CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。它的主要作用是
  • 终极指南：styled-components 深度解析与实战对比 ox0080 #北漂+滴滴出行WebVIP激励styled-comCSS
    一、CSS-in-JS革命：现代Web样式新范式1.1传统CSS的三大痛点全局污染：class命名冲突导致"样式战争"状态隔离：动态样式需要操作DOM类名架构割裂：样式文件与组件逻辑分离//传统CSS的典型问题实例//Button.css.btn{background:blue;}//全局作用域//App.css.btn{padding:10px;}//意外覆盖1.2CSS-in-JS的核心优势真
  • 前端必知必会-Vue动画Animations-Transition ‘name‘ 属性 编程岁月 前端vue.jsjavascript
    文章目录Transition'name'属性Transition‘name’属性如果您有多个组件，但您希望至少一个组件具有不同的动画，则需要为组件指定不同的名称以区分它们。我们可以使用name属性选择组件的名称，这也会更改过渡类的名称，以便我们可以为该组件设置不同的CSS动画规则。如果过渡名称属性值设置为‘swirl’，则自动可用的类现在将以‘swirl-’而不是‘v-’开头：swirl-ente
  • java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档 今晚的月亮真好看 java开发语言
    java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://p
  • HTML---css选择器 lh_freak htmlcss前端
    CSS指层叠样式表，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。使用CSS我们可以大大提升网页开发的工作效率！插入样式表的方法有三种:外部样式(Externalstylesheet)内部样式(Internalstylesheet)内联样式(Inlinestyle)内联样式（行内样式）hello样式直接写入到本元素标签中
  • Vue打包（webpack）缓存 歌歌的前端学习之路 vue.jswebpack前端
    解决方法：1、修改vue.config.js文件constTimestamp=newDate().getTime();module.exports=defineConfig({configureWebpack{output:{filename:`[name].${Timestamp}.js`,chunkFilename:`[name].${Timestamp}.js`},},css:{extrac
  • HTML+CSS学习笔记 潘越越 学习笔记
    目录一、emmet语法二、常用html标签使用方法：三、常用CSS样式css样式设计具体引入方式1.关于border边框的设计2.关于text文本内容的管理3.关于盒模型的分类以及position属性：4.background属性的使用5.实现样式转变持续更新……首先，整体了解有关HTML和CSS的使用，主要是为了搭建静态页面有关HTML5所需要掌握的框架：React+Reactnativeuni
  • Recat学习 freelb 学习webpackjavascriptreactjs
    Recatv17.x项目开发框架搭建1.创建React项目2.暴露配置文件方法一方法二3.支持less4.支持scss/sass5.安装element-ui6.路由导航（常规使用）编译出错错误一错误二错误三错误四8.Serve插件（查看打包运行效果）安装typescript支持1.创建React项目为了加速npm下载速度，先把npm设置为淘宝镜像地址。npmconfigsetregistryhtt
  • Python web基础知识，后端服务器开发，观点还停留在Java上吗！ 道-闇影 pythonjavaweb开发
    极简生活，极简编程，简到极致，就是完美！在写CSDN的Python技能树体验五(web应用开发:Djiago、Tornado、Flask)—终于可以写点能看的了！之前，wc，提前剧透了！先对web开发做一个简要的说明，话不多说，往下看！web应用开发的含义web应用开发分为：前端网页开发，后端服务器开发，还有前后端的一个通信技术！各个部分需要哪些基础前端开发基础：HTML,CSS，JavaScti
  • 微信小程序 底部导航栏实现凸出内凹效果 hujie9371 微信小程序
    话不多说，首先上效果展示:在微信小程序开发中，开发者往往需要根据自定义的需求实现底部导航栏，而这种凸出与内凹的效果往往使人头疼。主要难点是背景色、圆切角的过渡、透明、阴影遮挡等问题。一般的解决方案是使用图片或者svg显示凹凸，或者利用css阴影效果遮挡切角。但在【SkylineUI组件库】小程序中的底部导航栏，我则是直接使用canvas绘制，并且使用skyline渲染框架，不仅解决了以上问题，并且
  • “伪元素”是啥 向贤 前端开发css
    “伪元素”是啥CSS伪元素（Pseudo-elements）是一种特殊的CSS选择器，允许开发者在不修改HTML结构的前提下，通过样式表操作元素的特定部分或插入虚拟内容。以下是其核心特性解析：一、本质特性‌虚拟元素‌伪元素并非真实存在于HTML文档树中，而是通过CSS生成的抽象元素‌。例如::before会在元素内容前生成一个虚拟容器，::after则在内容后生成。‌无法通过JS直接操作‌由于伪元
  • 什么是轮播图？如何实现轮播图？有几种方法？ 妮在想什么 前端html5csscss3vue.js前端框架
    轮播图（Carousel或Slider）是一种图像展示组件，用于在网页或应用中以动画效果展示多张图片或其他内容。用户可以手动控制轮播图的播放，也可以设置自动切换功能。常见的轮播图应用包括图片展示、广告、产品展示等。实现轮播图的几种方法：使用纯HTML和CSS这种方法适用于简单的轮播图，主要依靠CSS动画和过渡效果实现图像的切换。适合静态或少量内容的展示。css实现轮播图.box{/*可视区域宽须设
  • 基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript) html网页制作 网页设计前端javascripthtmldreamweaver网页设计web网页设计期末课程大作业
    ‍静态网站的编写主要是用HTMLDIV+CSSJS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。精彩专栏推荐❤
  • CSS隐藏元素的方式 林的快手 HTML+CSScsshtml前端javascript开发语言chrome
    方式一：visibility属性visibility属性默认值是show，如果设置为hidden，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。方式二：display属性设置display:none，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。.隐藏元素的方式.box{width:400px;height:400px;}.box1{backgrou
  • css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框 weixin_39953102 css3实现缺角四边形
    前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角CSS3实现缺角矩形，折角矩形以及缺角边框-1.png(10.03KB,下载次数:0)2020-7-2219:03上传1.伪元素实现.bg{width:120px;height:80p
  • css3实现缺角四边形_CSS3绘制六边形的简单实现 陈宇直 css3实现缺角四边形
    因为很简单，所以先总结一下：使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素，并利用css3的边框样式，将这两个元素变成三角形放置在源元素的两端即可。(因为之前在生物公司工作过，觉得六边形更贴近生物分子、基因等概念，包括我们在网上搜索关于生物分子、基因等图片，好多也有六边形的样式，所以那时候在页面做一些功能性的导航或Tag，都会觉得六边形更贴近一些)。
  • 面试之《前端开发者如何优化页面的加载时间？》 只会写Bug的程序员 面试面试前端
    前端开发者可以从多个方面入手优化页面的加载时间，以下是一些常见且有效的方法：优化资源加载压缩资源文件：对HTML、CSS、JavaScript文件进行压缩，去除不必要的空格、注释等，减小文件体积，加快下载速度。例如使用uglify-js压缩JavaScript文件，cssnano压缩CSS文件。优化图片：对图片进行压缩处理，降低图片的分辨率、色彩深度或采用更高效的图片格式（如WebP）。同时，根据
  • CSS实现图片缺角效果 凉风听雪 CSS炫酷使用css前端css3html
    效果：源码：123body{margin:0;padding:0;background:#f9f9f9;display:flex;align-items:center;justify-content:center;height:100vh;}.row{display:flex;padding:30px;gap:30px;flex-wrap:wrap;background:inherit;}.box
  • 计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档 双双科技 java数据库开发语言
    计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：htt
  • 前端杂学录（七） 真的不想学习啦 前端前端html5javascriptcss
    1.响应式布局方案1.媒体查询特点媒体查询是CSS的一部分，可以根据设备的特性（如宽度、高度、分辨率等）应用不同的样式。示例body{font-size:16px;}@media(max-width:768px){body{font-size:14px;}}@media(max-width:480px){body{font-size:12px;}}2.弹性布局（Flexbox）特点Flexbox是
  • vue3导入字体 hdufu123 css
    1.如何导入字体新建一个fonts.scss文件夹@font-face{font-family:'优设标题黑';//字体别名src:url('../font/优设标题黑.ttf')format('truetype');//资源路径}@font-face{font-family:'LCD-BOLD';src:url('../font//LCD-BOLD.TTF')format('truetype')
  • Webpack、Vite区别知多少？ m0_74824044 面试学习路线阿里巴巴webpack前端node.js
    前端的项目打包，我们常用的构建工具有Webpack和Vite，那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢？我们在做项目时要如何选择呢？一、工具定义1、Webpack：是一个强大的静态模块打包工具，它可以将各种类型的文件，如JavaScript、CSS、图片等，作为模块进行打包，并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理
  • java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw 练练科技 数据库javamybatis
    java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw 你眼里的星星 javamysql宠物
    java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lwjava毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • 太强了！测试 Claude 3.7 Sonnet 模型前端代码能力提示词及Claude Code 系统提示词 技术程序猿华锋 AIGC资讯前端人工智能
    Claude3.7Sonnet测试模型的前端代码能力提示词；CreateasingleHTMLfilecontainingCSSandJavaScripttogenerateananimatedweathercard.Thecardshouldvisuallyrepresentthefollowingweatherconditionswithdistinctanimations:Wind:(e.g
  • CSS自定义字体与动画：为网页增添独特魅力 wertuiop_ css前端
    CSS高级语法之自定义字体与动画文章目录CSS高级语法之自定义字体与动画前言一、CSS自定义字体为什么要自定义字体如何实现自定义字体使用@font-face规则应用自定义字体二、CSS动画CSS动画的基础概念创建简单的CSS动画过渡动画transition:复合属性定义动画关键帧将动画应用到元素上播放动画属性更复杂的CSS动画多个关键帧动画属性组合总结前言在现代网页设计中，CSS（层叠样式表）为我
  • 完美隐藏滚动条方案 (2024 最新验证) AF01 javascript
    完美隐藏滚动条方案(2024最新验证)css/*全局隐藏竖直滚动条但保留滚动功能*/html{overflow:-moz-scrollbars-none;/*Firefox旧版*/scrollbar-width:none;/*Firefox64+*/-ms-overflow-style:none;/*IE/Edge*/overflow-y:overlay;/*防止布局偏移*/width:100vw
  • 【商城系统部署到上线】 启山智软 商城 源码 小程序微信小程序java
    商城系统开发是一个复杂的过程，涉及多种技能。以下是一些关键技能：一、前端开发技能HTML/CSS页面结构搭建：HTML用于构建网页的基本结构，如头部、导航栏、商品展示区、购物车等各个功能区域的框架。开发者要熟练掌握各种HTML标签，以创建语义化和结构化良好的页面。样式设计与美化：CSS能够控制网页的布局、字体、颜色、背景等外观效果。通过CSS，可以使页面更加美观、易用，并且适应不同的屏幕尺寸（响应
  • 跨平台开发--Weex 前端_学习之路 跨平台开发前端框架
    Weex是一款由阿里巴巴开源的跨平台移动开发框架，本篇从其定义、特点、应用场景等方面进行介绍：定义与背景Weex允许开发者使用JavaScript、HTML和CSS等前端技术来构建跨平台的原生移动应用，它将前端开发的便利性与原生应用的性能优势相结合。Weex最初由阿里巴巴团队开发，旨在解决移动应用开发中多平台适配的问题，提高开发效率，降低开发成本。特点跨平台性：Weex最大的特点就是能够实现一次编
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他