铁柱ef
铁柱ef

css圣杯布局和双飞翼布局（超详细）

参考文章

圣杯布局

大抵就是一个左右两边固定宽度，中间宽度自适应的三栏式布局。
如下图所示：
css圣杯布局和双飞翼布局（超详细）_第1张图片
大致要求是：

  • header和footer固定高度；
  • 左右两边固定宽度；
  • 中间宽度自适应；
  • 中间部分的高度是三栏中最高的区域的高度。

实现过程（顺序无所谓）：
1、先定义好header 和footer，container 和其中的left , right ,middle.其中middle在最前面


<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>圣杯布局练习title>
		<link href="css/shengb.css" rel="stylesheet">
	head>
	<body>

		
		<header>
			header
		header>
		<div class="container">
			<div class="middle">middle<p>hellop>div>
			<div class="left">leftdiv>
			<div class="right">rightdiv>
		div>
		<footer>
			footer
		footer>
	body>
html>

为提高代码优化，css样式建议加入以下。

* {
     
	box-sizing: border-box;
}
body {
     
	margin: 0;
	color: #fff; /*为了适应背景 把字体颜色调成白色*/
}

2、设置footer和header的样式

header {
     
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
footer {
     
	width: 100%;
	height: 30px;
	background: #52797a;
	clear: both;
	line-height:30px;
	text-align: center;
}

3、分别设置left , middle ,right 的样式， 左边宽度为200px， 右边宽度为150px， 中间宽度为100%
并且设置为相对定位，左浮动。

.left , .right, .middle {
     
	position: relative;
	float: left;
}
.left {
     
	width: 200px;
	background: #1b4887;
}
.right {
     
	width: 150px;
	background: #578353;
}
.middle {
     
	width: 100%;
	background: #138686;
}

这时候的布局是这样的：
css圣杯布局和双飞翼布局（超详细）_第2张图片
4、这时候把左边left的margin-left设置为-100%,把它推到middle的左边
css圣杯布局和双飞翼布局（超详细）_第3张图片
5、这时我们发现left把middle遮住了，看上面的middle不见了。只需要在container上加上 padding-left: 200px;padding-right: 150px;，在左右两边为left 和 right 留出空间（ left 和 right 的宽度）。
css圣杯布局和双飞翼布局（超详细）_第4张图片
6、 接下来把left左移，用到相对定位。在left盒子上设置left属性为-200px（刚好是left的宽度），这样left的位置就对了，也没有遮住middle。
css圣杯布局和双飞翼布局（超详细）_第5张图片
7、接下来把right移动到正确的位置。只需要设置margin-right: -150px。把它推到middle的右边。
css圣杯布局和双飞翼布局（超详细）_第6张图片
总结：只要是float的盒子，它就是脱离普通流的。
css代码地址

双飞翼布局

相比圣杯布局，双飞翼布局在container多了一个子节点，为其左右两边设置margin-left 和 margin-right ，为left 和 right留出空间。双飞翼布局不是像圣杯布局那样使用相对定位，而是在middle内部新增一个子节点，并设置它的margin-left 和 margin-right ，这样left设置margin-left为100%之后就不会被遮挡了，而right只需要margin-left: 150px就可以。相比来说，双飞翼布局比圣杯布局更简单，没有用到定位。以下是双飞翼布局的css样式代码。

* {
     
	box-sizing: border-box;
}
body {
     
	margin: 0;
	color: #fff;
}
header {
     
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
header {
     
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
footer {
     
	width: 100%;
	height: 30px;
	background: #52797a;
	clear: both;
	line-height:30px;
	text-align: center;
}
.container {
     
	
}
.left , .right, .middle {
     
	float: left;
}
.left {
     
	width: 200px;
	background: #18b0b0;
	margin-left: -100%; 
}
.right {
     
	width: 150px;
	background: #2a6f82c7;
	margin-left:-150px;

}
.middle {
     
	width: 100%;
}
.middle .sub {
     
	margin-left: 200px;
    margin-right: 150px;
    min-height: 150px;
	background: #184a7cad;
}

如有任何错误，烦请指正。
本作者从未收到过来自广大csdner的点赞，乞求看到这里的各位大大帮忙点个赞好吗？太卑微了我。

你可能感兴趣的:(笔记,html,css,css3)

  • HPC综合-心得与笔记【19】 sakura_sea HPCand3DGraphicsEngine线性规划
    Dijkstra算法【2】基础距离数组dist，设置起点距离为0，其他节点距离为无穷大（∞）用最小堆创建优先队列，将起点放入队列。从队列中取出当前距离最小的节点u。遍历u的每个邻接节点v，计算从起点到v的路径长度：alt=dist[u]+weight(u,v)。如果altdist[u]:continue#遍历邻接节点forv,weightingraph[u].items():alt=dist[u]
  • 爬虫基础--request库详解 amo的代码园_毕设 Java基础爬虫javaspringbootvue.jspython开发语言
    爬虫基础–request库详解1.requests模块介绍request库中文文档：https://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests是一个非常流行的PythonHTTP第三方库，它允许你发送各种HTTP请求，处理cookies、会话、连接池、重定向、多种认证方式等，使得处理HTTP请求变得非常便捷，
  • 《算法笔记》9.4小节——数据结构专题(2)-＞二叉查找树（BST） 问题 A: 二叉排序树 圣保罗的大教堂 《算法笔记》算法
    题目描述输入一系列整数，建立二叉排序数，并进行前序，中序，后序遍历。输入输入第一行包括一个整数n(1#include#include#include#include#include#include#include#include#include#include#include#include#include#defineINF0x3f3f3f3f#definedb1(x)coutleft);Fre
  • Selenium实战-模拟登录淘宝并爬取商品信息_使用selenium模拟真实登录行为,并爬取商品评论数据。 2401_84009899 程序员seleniumpython测试工具
    模拟淘宝登录deflogin_taobao():print(‘开始登录…’)try:login_url=‘https://login.taobao.com/member/login.jhtml’driver.get(login_url)input_login_id=wait.until(EC.presence_of_element_located((By.ID,‘fm-login-id’)))in
  • 小红书app复制链接转换为直接可访问链接，网页版链接，小红书短链转长链（最新版） 才华是浅浅的耐心 python爬虫开发语言
    简介：小红书手机app分享的链接需要点击才能获取完成链接，本文教大家如何通过代码的方式将xhs的短连接转化为长链接。1.正常我们分享的链接是这样的：44小猪吃宵夜发布了一篇小红书笔记，快来看吧！KeA1GIGiSMXGWy7http://xhslink.com/a/sT7omKb6ijX6，复制本条信息，打开【小红书】App查看精彩内容！转换后是这样的：https://www.xiaohongsh
  • 使用CRACO自定义 Webpack 配置 黄毛火烧雪下 Reactwebpack前端node.js
    1、为什么要用CRACO？默认情况下，CRA的Webpack配置是隐藏的，如果你需要修改Webpack，比如：✅CDN配置✅配置alias（路径别名）✅修改Less/Sass变量✅添加Babel插件✅优化Webpack构建（如SplitChunks、CDN加载）✅支持TailwindCSS✅移动端适配启用PostCSS+px转rem如果不用CRACO，你必须运行yarneject/npmrunej
  • uniapp中使用webview并与原页面通信 数学分析分析什么？ uni-app
    uniapp中使用webview并与原页面通信1.接收数据主要使用@message与@onPostMessage接收原页面数据，且两个方法只能在APP中使用，其他平台均不支持。/***接收页面返回参数*@param{Object}item*/htmlMessage(item){console.log('收到的消息',item)letdata=item.detail...},2.发送数据（调用原页面
  • uniapp工程中解析markdown文件 pvfhv uni-app
    在uniapp中如何导入markdown文件，同时在页面中解析成html，请参考以下配置：1.安装以下3个依赖包npminstallmarkedhighlight.jsvite-plugin-markdown2.创建vite.config.js配置文件//vite.config.jsimport{defineConfig}from'vite';importunifrom'@dcloudio/vit
  • C# 技术使用笔记：如何高效处理字符串 caifox菜狐狸 C#技术使用笔记c#笔记stringStringBuilderSubstringReplaceSplit
    1.C#字符串基础概念1.1字符串不可变性在C#中，字符串具有不可变性，这意味着一旦创建了一个字符串对象，其内容就不能被修改。例如，当我们执行以下代码时：stringstr="Hello";str=str+"World";实际上，str+"World"并是修改了原来的"Hello"字符串，而是创建了一个全新的字符串对象"HelloWorld"，并将str的引用指向了这个新对象，原来的"Hello"
  • TCP/IP学习笔记(5) --IP选路 ox0080 Linux网络linux网络
    静态IP选路一个简单的路由表选路是IP层最重要的一个功能之一。前面的部分已经简单的讲过路由器是通过何种规则来根据IP数据包的IP地址来选择路由。这里就不重复了。首先来看看一个简单的系统路由表。命令:routeprint|more对于一个给定的路由器，可以打印出五种不同的flag。U表明该路由可用。G表明该路由是到一个网关。如果没有这个标志，说明和Destination是直连的，而相应的Gatewa
  • 大众文艺杂志社大众文艺杂志大众文艺编辑部2025年第3期目录 QQ296078736 人工智能
    公共文化服务研究提高基层群众音乐鉴赏水平的策略研究罗婉琳;1-3文艺评论《增广贤文》：深入剖析其中的人学智慧姚志清;4-6当代战争视阈下近20年军旅戏剧军事文化观的嬗变研究（2000～2023年）邱远望;7-9从奥威尔的《射象》看分裂的自我与身份认同何玉蔚;10-12南宋都市笔记中的临安园林及其美学意义张凯歌;13-15文博与数字化研究数字时代与媒介史视域下的多模态图书馆系统及新质书香社会建设鹿钦
  • 施磊老师c++笔记(三) Zhuai-行淮 施磊老师cppc++笔记
    c++模板编程-学习cpp类库的编程基础文章目录c++模板编程-学习cpp类库的编程基础1.函数模板2.理解模板函数3.实现cpp的vector向量容器4.理解容器空间配置器allocator的重要性1.函数模板内容:模板的实例化,模板函数,模板类型参数,模板非类型参数,模板的实参推演,模板的特例化,模板函数模板的特例化非模板函数的重载关系区分函数模板和模板函数的概念!!!模板的意义?对类型也可以
  • S32K144外设实验（二）：ADC单通道单次采样（软件触发） 上层精灵的赞美诗 #S32K144的外设基础实验单片机嵌入式硬件eclipsemcu笔记
    文章目录1.概述1.1理论回顾1.1.1时钟系统1.1.2采样通道1.2实验目的2.配置与代码编写1.概述1.1理论回顾S32K144的ADC应该说是特别灵活，笔者采用循序渐进的方式来学习使用这个很重要的外设。在《入门笔记系列》专栏中对用户手册进行了翻译和解读，这里在回顾一下ADC的基本功能，第一次实验我们不使用过于复杂的触发方式。只使用一个通道来理解S32K144的ADC。1.1.1时钟系统首先
  • 设备树学习（二十三、番外篇-中断子系统之softirq） 奔跑的小刺猬 设备树设备树原理和实现
    既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
  • 【Apache Storm】 茉菇 apachestorm大数据
    一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布
  • vue3+springboot电影院售票选座管理系统 qq_3166678367 springboot后端java
    目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
  • 嵌入式C语言学习笔记（2） 愿抬头有阳光 c语言学习笔记
    1.数组指针数组指针本质上就是一个指针，它里面存放的是数组的首地址。#includevoidshow(int(*p)[4],intn){for(inti=0;i4*4=16;3.命令行传递参数，main函数的标准格式intmain(intargc,constchar*argv[]){return0;}//argc：参数的个数包括./a.out//argv：参数的值列表argv[0]="./a.ou
  • C++学习笔记：引用 etp_ c++学习笔记
    引用是已知变量的别名，通过将引用变量用作参数，函数将使用原始数据而不是其副本。下面将r作为a的别名：inta;int&r=a;就像char*是指向char的指针一样，int&是指向int的引用。（a和r指向相同的值和内存单元)注意：&r表示r引用变量的地址。引用和指针的区别1.必须在声明引用时将其初始化，而不能像指针那样先声明再赋值。2.引用更接近const指针，一旦与某个变量关联起来便有一直效忠
  • 关于使用python进行处理雷达数据笔记 六毛驴 python数据分析
    好久不见，甚是想念本人深知这段时间鸽了一篇博（上一篇博），后续会补上的，今天想写一下关于使用python进行TI雷达接收回波数据处理的一些常见问题和解决方法。这也是前几天领导给我布置的任务，所以我将这段时间自己遇到的并且已经解决的问题进行了简单的汇总，也会推荐几本这几天阅读了python书籍。python书籍推荐：python学习手册MarkLutz著（对应python版本3.X，2.X都可）Py
  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • H3C Network命令详解 weixin_30471561
    转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
  • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
    CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
  • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
    什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
  • css知识点总结 吃橘子的Crow csshtml前端
    1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
  • 深入学习 DNS 域名解析 dns解析
    一、前言在平时工作中相信大家都离不开DNS解析，因为DNS解析是互联网访问的第一步，无论是使用笔记本浏览器访问网络还是打开手机APP的时候，访问网络资源的第一步必然要经过DNS解析流程。二、DNS是什么DNS（域名系统DomainNameSystem），它是一个记录域名和Ip地址相互映射的一个系统，是互联网的“电话簿”，负责将人类可读的域名（如example.com）转换为机器可识别的IP地址（如
  • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
  • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
  • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
    【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
  • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
    一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
  • Storm实战常见问题及解决方案 Lzy失控的 storm-分布式流式计算bigdata-大数据
    原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他