cometwo
cometwo

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

 1. 基于传统的position和margin等属性进行布局

   这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

  1).绝对定位法

    绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
   代码如下：
文档代码：
[html]  view plain  copy
  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>layout_boxtitle>  
  6.         <link rel="stylesheet" type="text/css" href="../css/layout_box.css">  
  7.     head>  
  8.     <body>  
  9.         <h3>实现三列宽度自适应布局h3>  
  10.         <div id = "left">我是左边div>  
  11.         <div id = "right">我是右边div>  
  12.         <div id = "center">我是中间div>  
  13.     body>  
  14. html>  
css代码：
[css]  view plain  copy
  1. html,body{ margin: 0px;width: 100%; }  
  2. h3{height: 100px;margin:20px 0 0;}  
  3. #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
  4. #left{left:0px;}  
  5. #right{right: 0px;}  
  6. #center{margin:2px 210px ;background-color: #eee;height: 200px; }  
   该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生压缩。
结果如图，可以看到中间栏宽度随着屏幕大小伸缩。

 2).使用自身浮动法

    自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
   HTML代码：
[html]  view plain  copy
  1. <h3>使用自身浮动法定位h3>  
  2. <div id = "left_self">我是左边div>  
  3. <div id = "right_self">我是右边div>  
  4. <div id = "center_self">我是中间div>  
css代码：
[css]  view plain  copy
  1. #left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }  
  2. #left_self {float: left;}  
  3. #right_self{float: right;}  
  4. #center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}  
   该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

 3). 圣杯布局

   圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。
实现代码：HTML文档：
   
[html]  view plain  copy
  1. <h3>使用margin负值法进行布局h3>  
  2.         <div id = "wrap">  
  3.             <div id = "center">div>  
  4.         div>  
  5.         <div id = "left_margin">div>  
  6.         <div id = "right_margin">div>  
CSS代码：
[css]  view plain  copy
  1. #wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
  2. #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
  3. #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
  4. #left_margin {margin-left: -100%; background-color: lightpink}  
  5. #right_margin{margin-left: -200px;}  
   该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。
三种方法实现三栏网页宽度自适应布局方法见下图。

2 ， css3新特性

   在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

代码：

[html]  view plain  copy
  1. <div id = "box">  
  2.          <div id = "left_box">div>  
  3.          <div id = "center_box">div>  
  4.          <div id = "right_box">div>  
  5.         div>  
css样式：
[css]  view plain  copy
  1. #box{width:100%;display: flex; height: 100px;margin: 10px;}  
  2. #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
  3. #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}  
注意： center一定要放到中间。

效果图如下：


  css布局还有很多其他特性，下一步准备研究清楚浮动，再研究position、和display属性。

你可能感兴趣的:(使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）)

  • Spring Boot 项目启动时初始化 springboot
    简介有时我们需要在启动项目时做一些操作，比如将Mysq数据库的数据导入到Redis中。这里介绍两种简单的方法。方法1；给方法添加注解@PostContruct@ComponentpublicclassInitServlet{@PostContructpublicvoidinit(){//初始化操作处理}}方法2：实现InitializingBean接口@ComponentpublicclassIn
  • 2025年远程办公必备：挑选高性能控制软件的7个关键指标 2501_90729959 RayLink远程办公远程控制软件电脑人工智能
    随着远程办公传模式的普及，企业对高效、安全的远程控制软件需求持续攀升。数据显示，2025年全球远程办公市场规模预计突破3000亿美元，而选择一款适配的远程控制工具，已成为提升团队协作效率的核心环节。指标1：连接速度与稳定性远程办公传的核心诉求是“即时响应”，而延迟卡顿会直接影响会议沟通、设计协作等场景的效率。以游戏加速技术起家的RayLink，凭借自研的Sakura网络协议，实现了10ms级超低延
  • 新人崛起，好用的远程控制软件它来啦！ 2501_90729959 远程控制软件RayLink远程控制服务器人工智能运维
    在如今数字化转型不断提速的大环境下，远程控制软件那可是企业办公、个人协作还有娱乐等方面都离不开的必备工具啦。不管是要实现跨地域的团队一起干活，还是提供远程技术支持，亦或是管理家里那些智能设备，“高效、稳定、安全”始终是大家最为关注的要点。而近来呢，一款名叫RayLink远程控制软件的新产品，凭借着它那真高清的画质、超低的延迟还有跨平台适配等厉害的地方，一下子就在市场里冒了出来，成了远程控制领域的一
  • Node.js 格式化时间的两种方法：原生 Date 与 npm 包 moment 详解 还是鼠鼠 node.jsnode.jsnpm前端javascriptvscode
    目录Node.js格式化时间的两种做法：内置方法与npm包1.使用JavaScript内置方法格式化时间示例：使用Date对象格式化时间运行程序示例输出原理解析2.使用npm包moment进行时间格式化安装moment示例：使用moment格式化时间运行程序示例输出原理解析3.两种方法的对比4.结论在Node.js开发中，格式化时间是一个常见的需求。例如，将时间格式化为YYYY-MM-DDHH:m
  • 深入分析串口使用rs485功能的内部机制之使用gpio控制传输方向读取rs485温湿度传感器数据（第一期） @曙光， linux网络嵌入式
    前言首先这是一篇涉及内核分析的，学习这篇文章最好是打开内核源码跟着我的分析去看，我参考的内核源码是linux5.4内核，也可以辅助ai去分析。ModbusRTU读取rs485温湿度传感器使用ModbusRTU读取rs485温湿度传感器有俩种方法，第一种采用gpio控制数据的传输方向：高电平表示主发从收，低电平表示主收从发。第二种采用硬件流控的方法使用串口的rts引脚和cts引脚自动控制收发方向，接
  • UnityShader实现水渲染 源 unityshader
    今天分享一下如何使用Shader实现水体渲染和波浪扰动效果我们一般可以使用Plane去模拟水平面，创建好Plane后,结合自己项目的风格去搞一个水体贴图，可以在网上下载，我这里直接用这张1准备工作完毕，直接上代码​Shader"Custom/WaterShader"{Properties{_BaseColor("BaseColor",Color)=(0,0.5,1,1)//水的基色_NormalM
  • day11 学习笔记 豆豆 学习笔记python
    文章目录前言一、类方法二、静态方法三、构造方法四、魔术方法前言通过今天的学习，我掌握了更多Python中有关面向对象编程思想中方法的概念与操作，包括类方法，静态方法，构造方法，魔术方法一、类方法类方法是属于类的行为，一般使用类而非对象进行调用类方法需要使用@classmethod装饰器定义类方法至少有一个形参用于绑定类，约定为cls类和该类的实例都可以调用类方法，但一般不用实例进行调用类方法不能访
  • k8s服务中userspace，iptables，和ipvs的比较 小刘爱喇石( ˝ᗢ̈˝ ) kubernetes云原生
    在Kubernetes中，kube-proxy是负责实现服务负载均衡的组件。它支持三种代理模式：userspace、iptables和ipvs。这三种模式在性能、功能和复杂性上有所不同。以下是它们的详细比较：1.Userspace模式Userspace是Kubernetes最早支持的代理模式，kube-proxy在用户空间监听服务的IP和端口，并将流量转发到后端Pod。工作原理kube-proxy
  • java NIO中的FileSystems工具类可以读取本地文件系统，ZIP/JAR等，无需解压处理，还可以复制文件 爱的叹息 Java基础整理javaniojar
    在JavaNIO（java.nio.file包）中，FileSystems是一个工具类，用于操作和管理文件系统。它提供了静态方法来获取或创建文件系统实例，并支持自定义文件系统实现。以下是其核心功能和用法：1.核心功能(1)获取默认文件系统获取当前运行环境的默认文件系统（如本地文件系统）：FileSystemfileSystem=FileSystems.getDefault();(2)创建新的文件系
  • RabbitMQ 与 Kafka：消息中间件的终极对比与选型指南 海上彼尚 node.jsrabbitmqkafka分布式node.js
    引言在分布式系统架构中，消息中间件是异步通信的核心组件。RabbitMQ和Kafka作为两大主流技术，常被开发者拿来比较。本文深入解析两者的设计哲学、性能差异和典型场景，助你做出精准技术选型。目录引言一、核心设计差异1.定位与数据模型二、性能与架构对比1.吞吐量与延迟2.集群与扩展三、功能特性对决1.消息可靠性2.消息路由四、典型场景与选型决策1.优先选择Kafka的场景2.优先选择RabbitM
  • 电子签借贷真实吗？315报道引发的行业地震！电子签到底冤不冤？ 电子签
    看了315的相关报道后，曝光套路贷本来是正向的，却将电子签和高利贷混为一谈。这种无意识的混淆不仅会误导大众，也不利于新兴技术的健康发展。电子签作为一种替代纸质合同签署的新兴技术，有着独特的优势和重要的意义。在过去，不同主体之间签订合同往往需要面对面进行签署，这不仅耗费时间和精力，还会受到地域等因素的限制。而电子签的出现，彻底改变了这一局面。它可以实现线上签署，背后是可靠的实名认证技术，想要在电子签
  • 手机电脑如何通过跨平台远程控制工具来实现无缝互联 2501_90729959 RayLink远程控制工具远程控制软件智能手机电脑
    在如今数字化办公和生活的场景里，远程控制工具已经成了连接各种设备的关键桥梁。不管是跨系统协作、远程技术支持，还是让移动端和电脑端高效联动，用户对这些工具的要求早就从“能用就行”变成了“得用得顺手”。接下来，我就从跨平台兼容性、画质性能、安全性和操作体验这四个主要方面，来聊聊现在主流的远程控制工具都有啥特点。重点说说RayLink远程控制软件，看看它是怎么通过技术创新，让手机和电脑实现无缝互联的。一
  • 『解决ping问题』windows ubuntu 开发板三者互连如何设置 指向NULL 环境&调试嵌入式
    嵌入式开发中，我们经常会遇到ping问题，也就是windows主机，虚拟机和开发板之间互相ping不通的问题，看了韦东山老师关于此部分的讲解做了以下总结。1.确定虚拟机使用的网卡先来看几种应用场景：情景一：PC机使用有线网卡A直接连接开发板。这种情况下我们使用了有线网卡A最终连接了开发板，所以虚拟机要设置有线网卡A作为桥接网卡。情景二：PC机使用无线网卡A连接路由器，开发板连接到同一路由器的有线网
  • “四预”驱动数字孪生水利：让智慧治水守护山河安澜 GeoSaaS 实景三维智慧城市人工智能gis大数据安全
    近年来，从黄河秋汛到海河特大洪水，从珠江流域性洪灾到长江罕见骤旱，极端天气频发让水安全问题备受关注。如何实现“治水于未发”？数字孪生水利以“预报、预警、预演、预案”（四预）为核心，正在掀起一场水利治理的智慧革命。一、数字孪生水利：从物理世界到虚拟镜像的跃迁数字孪生水利并非简单的“数字建模”，而是通过高精度传感器、大数据、人工智能等技术，在虚拟空间构建与物理流域完全映射的“数字分身”，实现水情、工情
  • 低空航路：低空经济的基础设施 GeoSaaS 低空经济自动驾驶汽车信息可视化人工智能大数据
    低空经济作为新兴产业，正逐渐成为推动城市高质量发展的新引擎。低空航路的构建是实现低空经济发展的关键，它涉及到无人机、电动垂直起降飞行器(eVTOL)等航空器的运行，对城市物流、旅游、农业、应急救援等领域产生深远影响。低空航路的内涵低空航路指的是在城市低空空域中为无人机和eVTOL等航空器规划的飞行路径。这些航路需要满足安全、高效、有序的飞行需求，同时还需考虑与城市建筑、人口密集区等的协调。构建低空
  • 没有好的学历，Java开发未来的路应该怎么走？ 全干程序员demo 技术热文java开发语言
    没有好的学历，Java开发未来的路应该怎么走？在当今数字化时代，技术发展日新月异，大模型应用、鸿蒙系统等新兴技术领域正在蓬勃发展，为Java开发者带来了新的机遇和挑战。即使没有高学历，Java开发者依然可以通过以下路径在这些新兴领域找到自己的发展方向，实现职业突破。一、拥抱新兴技术，拓宽技术边界（一）大模型应用：从开发到优化大模型技术正在重塑软件开发的各个环节。对于Java开发者来说，可以从以下几
  • MySQL进阶——提高查询效率之添加索引的全部方式 1加1等于 MySQLsqlmysql
    索引提高查询效率，本文介绍优化查询时添加索引的多种方式。本文目录一、创建表时添加索引二、使用ALTERTABLE语句添加索引三、使用CREATEINDEX语句添加索引一、创建表时添加索引在使用CREATETABLE语句创建表的同时，可以为表中的列添加索引。适用于在设计表结构时就确定需要添加索引的情况。语法如下：CREATETABLEtable_name(column1datatype,column
  • Win NAS 的数据传输原理分析，超级详细！ DeepSeek+NAS 家用NASWinNAS飞牛NAS人工智能安卓NAS
    WinNAS是一款运行在Windows系统上的NAS服务，允许用户通过手机客户端远程访问和管理电脑上的文件。为了实现这一功能，WinNAS与手机之间的数据传输过程涉及多个步骤，具体取决于手机和WinNAS电脑所处的网络环境。以下是整个数据传输过程的详细说明：1.权限认证与连接建立无论手机和WinNAS电脑是否在同一个局域网内，手机客户端在访问WinNAS之前，都需要先通过耘想公司的云服务器进行权限
  • 如何区别原生页面和H5页面 大汉堡玩测试 功能测试
    文章目录前言原生开发特点H5开发特点混合开发怎么区别是原生还是H5总结前言软件采用混合开发的模式时，测试发现了bug找开发沟通有时会找错人，明明是H5模块的错误却找了负责原生模块的开发，显得很不专业~那在测试时该如何区分是原生的报错还是H5报错呢？原生开发原生开发（NativeApp开发），是为特定操作系统（如iOS使用Objective-C/Swift、安卓使用Java/Kotlin）专门开发的
  • 在Windows系统上测试safari浏览器的兼容性 大汉堡玩测试 safari前端功能测试
    文章目录前言手机端的safari浏览器能替代PC端吗在Windows上测试safari浏览器的兼容性的方法利用云服务使用虚拟机在Windows上下载虚拟机遇到的问题以及解决思路总结前言在测试网站的兼容性时需要用到safari浏览器，在没有Mac的情况下，又不想麻烦同事，那该怎样在Windows系统上使用safari浏览器呢？手机端的safari浏览器能替代PC端吗答案是不能，主要是因为以下几点：屏
  • 前端解决跨域的几种方案 爱分享的程序员 前端前端
    以下是前端解决跨域问题的7种主流方案，根据应用场景和实现难度排序，附详细实现示例：一、开发环境解决方案1.WebpackDevServer代理（推荐）//vue.config.js/webpack.config.jsmodule.exports={devServer:{proxy:{'/api':{target:'http://backend-domain.com',//后端地址changeOri
  • python离线语音转文本_使用Python将语音转换为文本的方法 weixin_39760619 python离线语音转文本
    使用Python将语音转换为文本的方法,语音,转换为,文本,您的,麦克风使用Python将语音转换为文本的方法易采站长站，站长之家为您整理了使用Python将语音转换为文本的方法的相关内容。语音识别是计算机软件识别口语中的单词和短语，并将其转换为可读文本的能力。那么如何在Python中将语音转换为文本？如何使用SpeechRecognition库在Python中将语音转换为文本？我们不需要从头开始
  • 常见FUZZ姿势与工具实战：从未知目录到备份文件漏洞挖掘 w2361734601 web安全安全
    本文仅供学习交流使用，严禁用于非法用途。未经授权，禁止对任何网站或系统进行未授权的测试或攻击。因使用本文所述技术造成的任何后果，由使用者自行承担。请严格遵守《网络安全法》及相关法律法规！目录本文仅供学习交流使用，严禁用于非法用途。未经授权，禁止对任何网站或系统进行未授权的测试或攻击。因使用本文所述技术造成的任何后果，由使用者自行承担。请严格遵守《网络安全法》及相关法律法规！一、FUZZ技术概述二、
  • 如何使用webpack预加载 CSS 中定义的资源和预加载 CSS 文件 混血哲谈 webpackcss前端
    在Webpack中预加载CSS文件及其内部定义的资源（如图片、字体等），可以通过资源预加载（Preloading）技术优化关键资源的加载优先级。以下是具体的实现方法和步骤：一、预加载CSS文件1.使用@vue/preload-webpack-plugin或手动注入Webpack默认不直接支持CSS文件的预加载，但可以通过插件或手动添加实现。方法一：通过@vue/preload-webpack-pl
  • webpack的SplitChunksPlugin和在路由或组件级别进行拆分 混血哲谈 webpack前端node.js
    请问下面内容中提到的SplitChunksPlugin和“在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分”在前端项目中如何应用？“”“在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。您可以详细了解SplitChunksPlugin如何帮助您实现这一点。使用客户端框架时，在路由或组件级别
  • AT89C52交通灯设计 跟着我跳 mongodb数据库
    1.设计目的、作用1、掌握C52单片机最小系统的设计；2、掌握按键电路设计，数码管的使用；3、掌握C52的编程方式；4、掌握C52各引脚的作用；5、进一步加强对焊接技术的练习。2.设计要求基于AT89C52单片机的交通灯主要具有如下功能：基本要求如下：1、按键1为交通灯“深夜模式”开/关，按下后进入深夜模式，4个方向LED（黄）闪烁；再次按下后则退出深夜模式，交通灯正常运行。2、按键2为“时间调整
  • 【DeepSeek】 全方位使用指南————简版 諰. 人工智能aiAI写作
    一、平台概述DeepSeek（深度求索）是专注实现AGI的中国的人工智能公司，提供多款AI产品：智能对话（Chat）文生图（Art）代码助手（Coder）API开发接口企业定制解决方案二、注册与登录2.1账号创建访问官网https://www.deepseek.com点击右上角「注册」支持三种方式：手机号+短信验证邮箱注册（需验证邮件）第三方登录（微信/Google账号）2.2订阅计划套餐类型免费
  • CAPL变量输出的格式说明符 正当少年 CAPLCAPL
    在CAPL（CANAccessProgrammingLanguage）中，变量输出的格式说明符用于控制变量在输出时的显示格式。以下是常用的CAPL变量输出格式说明符分类整理：以下是CAPL变量格式说明符的具体实例，展示了如何使用这些说明符来输出不同类型的变量：1.整数类型%d输出有符号十进制整数。intx=123;write("Value:%d",x);//输出:Value:123%u输出无符号十
  • 【typescript进阶篇】(第四章) webpack编译ts及第三方库声明文件 蒜香拿铁 typescript系列typescriptwebpackjavascript
    使用webpack打包TS文件安装依赖安装webpack环境npmiwebpackwebpack-cliwebpack-dev-server-D安装TypeScriptnpminstalltypescript-D编译TSnpminstallts-loader-D热更新服务npminstallwebpack-dev-server-DHTML模板npminstallhtml-webpack-plugi
  • WinPcap编程——APR欺骗 4ct10n VC++winpcap编程arp
    一实验要求利用WinPcap编程，实现基于ARP欺骗的中间人攻击。1）利用WinPcap，分别向被欺骗主机和网关发送APR请求包，达到同时欺骗目标主机和网关的目的；2）所有目标主机和网关之间的数据都会被我们劫持，过滤两者之间的所有http交互数据包，并保存为文件。（http包的过滤可用80端口来标识）二实验原理1选择网卡及过滤规则在这里特别注以下几点：1.charpacket_filter[]="
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他