weixin_33929309
weixin_33929309

圣杯布局和双飞翼布局的作用和区别

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“，而不是你题目中说的”去掉relative"就是双飞翼布局“。
 
最终界面是一样的：

圣杯布局和双飞翼布局的作用和区别_第1张图片

 

对比图：

圣杯布局和双飞翼布局的作用和区别_第2张图片

 

 

下面直接上代码：

圣杯布局：

<body>
<div id="hd">headerdiv>
<div id="bd">
  <div id="middle">middlediv>
  <div id="left">leftdiv>
  <div id="right">rightdiv>
div>
<div id="footer">footerdiv>
body>



<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
style>

 

双飞翼布局：

<body>
<div id="hd">headerdiv> 
  <div id="middle">
    <div id="inside">middlediv>
  div>
  <div id="left">leftdiv>
  <div id="right">rightdiv>
  <div id="footer">footerdiv>
body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
style>

 

 

<body>
<style type="text/css">
    body{margin:0; padding:0;}
    .boxA{width:180px;background: #CD0000 }
    .boxB{width:600px;background: #9ACD32}
    .boxC{width:180px;background: #87CEFF}
    .box{ height: 300px; float: left;}

    /*ABC*/
    /*.boxA{position: relative;left:-960px;}
    .boxB{margin-left:180px;}*/
    
    /*CBA*/
    .container{ padding: 0 180px;}
    .boxB{width: 100%; text-align: right;}
    .boxC{position: relative;margin-left: -180px;left:-100%;}
    .boxA{position: relative;margin-left: -180px;right:-180px;}

    /*BAC*/
    /*.boxC{float:right;}
    .container{width: 960px;}*/
style>
<p>现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.p>
<div class="container">
    <div class="box boxB">Bdiv>
    <div class="box boxC">Cdiv>
    <div class="box boxA">Adiv>
div>
body>

 

你可能感兴趣的:(圣杯布局和双飞翼布局的作用和区别)

  • 测试ospf多区域和分支对接 项目工程师余工 笔记网络工程华为网络
    总结：1、完全stub区域，直接导入直连或静态不生效，必须要在stub区域network发布直接的网段才可以，（以前只知道stub区域不能导入其它系统的自治系统，原来导入直连和静态也不生效）2、NSSA区域没问题，效果和骨干一样，所有都能生效。3、最终效果全网贯通，并且可以访问公网9.9.9.9dicu[V200R003C00]sysnamer1snmp-agentlocal-engineid80
  • Python 进程和线程-进程 vs. 线程 赔罪 Python系统学习python开发语言
    目录ThreadLocal小结进程vs.线程线程切换计算密集型vs.IO密集型异步IOThreadLocal在多线程环境下，每个线程都有自己的数据。一个线程使用自己的局部变量比使用全局变量好，因为局部变量只有线程自己能看见，不会影响其他线程，而全局变量的修改必须加锁。但是局部变量也有问题，就是在函数调用的时候，传递起来很麻烦：defprocess_student(name):std=Student
  • 一个数如果恰好等于它的因子之和，这个数就称为“完数“。例如6=1＋2＋3.编程找出1000以内的所有完数。-多语言 赔罪 Practicequestions算法javac语言javascriptpython
    目录C语言实现Python实现Java实现Js实现题目：一个数如果恰好等于它的因子之和，这个数就称为"完数"。例如6=1＋2＋3.编程找出1000以内的所有完数。完数（PerfectNumber）是一个正整数，它等于其所有正因子（不包括自身）的和。换句话说，如果一个数n的所有正因子（除了n本身）相加的结果等于n，那么n就是一个完数。完数的性质完数是稀有的，已知的完数都是偶数。根据欧几里得的定理，完
  • Python中的代码测试 小白的高手之路 python学习python开发语言
    编写函数或类时，可以为其编写测试。通过测试，可以确定代码面对各种输入都能正确按要求工作。在程序中添加新代码时，依然可以对其进行测试，确认它们不会影响原有的代码。1、测试函数先编写一个简单的函数：name_fun.pydefget_name(first,last):"""生成全名"""name=first+''+lastreturnname.title()name.pyfromname_funimp
  • 【实验五 一维数组】7-2 sdut-C语言实验-整数位 卡西莫多~ SDUT的PTA练习算法开发语言c语言
    7-2sdut-C语言实验-整数位输入一个不多于5位的正整数，要求：（1）求出它是几位数；//一个计数循环（2）分别输出每一位数字；//正序输出各位数字（3）按逆序输出各位数字。//逆序输出各位数字输入格式:输入一个不多于5位的正整数。输出格式:输出数据有3行，第一行为正整数位数，第二行为各位数字，第三行为逆序的各位数字。输入样例:123输出样例:3123321答案示例1（无注释）#include
  • “深入浅出”系列之杂谈篇：（3）Qt5和Qt6该学哪个？ 我真不会起名字啊 qt开发语言
    建议qt5且版本为qt5.14.2(百度搜qtarchieve获取)，更高版本的坚决不碰。建议这个版本的核心原因是之后的qt版本全部没有离线安装包，只有在线安装器，这个在线安装器经常会偷偷改掉你可以安装的qt版本以及该版本内部可安装的模块，比如(做个假设)你今天装了qt6.2.1然后安装时少安了几个模块，过一段时间你突然需要想安装，会发线在线安装器找不到这个版本了于是你只能把这个版本卸载了装更高的
  • Python----数据分析（Pandas四：一维数组Series的统计计算，分组和聚合） 蹦蹦跳跳真可爱589 数据分析Pythonpandaspython数据分析
    一、统计计算1.1、count用于计算Series中非NaN（非空）值的数量。importpandasaspds=pd.Series([1,2,None,4,None])count_non_na=s.count()print(count_non_na)1.2、sumsum()函数会计算所有值的总和。Series.sum(axis=None,skipna=True,numeric_only=None
  • Python----数据分析（Pandas三：一维数组Series的数据操作：数据清洗，数据转换，数据排序，数据筛选，数据拼接） 蹦蹦跳跳真可爱589 数据分析Pythonpython数据分析pandas
    一、数据清洗1.1、dropna()删除包含NaN值的行。series.dropna(axis=0,inplace=False)描述说明axis可选参数，用于指定按哪个轴删除缺失值。对于Series对象，因为它是一维数据结构，只有一个轴，所以此参数默认值为0，且一般不需要修改这个参数（在处理DataFrame时该参数才有更多实际意义，如除，axis=1表示按列删除）。inplace可选参数，用于指
  • 深度学习处理时间序列（2） yyc_audio 深度学习笔记深度学习人工智能
    在数据中寻找周期性在多个时间尺度上的周期性，是时间序列数据非常重要且常见的属性。无论是天气、商场停车位使用率、网站流量、杂货店销售额，还是健身追踪器记录的步数，你都会看到每日周期性和年度周期性（人类生成的数据通常还有每周的周期性）。探索数据时，一定要注意寻找这些模式。（让人想到波，想到傅里叶变换）对于这个数据集，如果你想根据前几个月的数据来预测下个月的平均温度，那么问题很简单，因为数据具有可靠的年
  • 【华为机试】HJ4 字符串分隔 椰椰荔枝糖 华为机试【牛客网】华为java开发语言
    str.substring(0,8)//截取str中从startIndex开始至endIndex结束时的字符串，并将其赋值给str;str=str.substring(8)//截取掉str从首字母起长度为startIndex的字符串，将剩余字符串赋值给str；importjava.util.Scanner;//注意类名必须为Main,不要有任何packagexxx信息publicclassMain
  • 【华为机试】HJ3 明明的随机数 椰椰荔枝糖 华为机试【牛客网】华为java开发语言
    importjava.util.Scanner;importjava.util.List;importjava.util.ArrayList;importjava.util.Collections;//注意类名必须为Main,不要有任何packagexxx信息publicclassMain{publicstaticvoidmain(String[]args){Scannersc=newScanne
  • 青少年编程与数学 02-010 C++程序设计基础 46课题、链接库 明月看潮生 编程与数学第02阶段青少年编程c++编程与数学开发语言
    青少年编程与数学02-010C++程序设计基础46课题、链接库一、链接库（LinkLibrary）1.静态链接库（StaticLibrary）特点：示例：创建和使用静态链接库2.动态链接库（DynamicLibrary）特点：示例：创建和使用动态链接库1.2创建动态链接库2.编写使用链接库的程序3.编译和链接程序3.1编译和链接静态链接库3.2编译和链接动态链接库4.使用第三方链接库4.1下载和安
  • Hive SQL 精进系列：一行变多行的 LATERAL VIEW EXPLODE 进一步有进一步的欢喜 HiveSQL精进系列hivesqlhadoop
    目录一、引言二、`LATERALVIEWEXPLODE`概述2.1基本概念2.2单词解析2.2.1`LATERAL`2.2.2`VIEW`2.2.3`EXPLODE`三、语法详解3.1基本语法结构3.2完整语法示例（针对映射情况）四、使用场景4.1数组数据展开4.2映射数据展开五、案例分析5.1展开数组示例5.1.1数据准备5.1.2使用`LATERALVIEWEXPLODE`展开数组5.1.3结
  • matlab 模糊pid实现温度控制 studyer_爱啃鸡爪的小米 Matlab系列案例matlab
    1、内容简介matlab162-模糊pid实现温度控制可以交流、咨询、答疑2、内容说明略基于PID电加热炉温度控制系统设计摘要电加热炉随着科学技术的发展和工业生产水平的提高，已经在冶金、化工、机械等各类工业控制中得到了广泛应用，并且在国民经济中占有举足轻重的地位。对于这样一个具有非线性、大滞后、大惯性、时变性、升温单向性等特点的控制对象，很难用数学方法建立精确的数学模型，因此用传统的控制理论和方法
  • MyBatis 类型处理器TypeHandler作用 冰糖心书房 Mybatis源码系列mybatis
    TypeHandler是MyBatis中用于处理Java类型与JDBC类型之间转换的接口。它在MyBatis的参数绑定和结果映射过程中起着至关重要的作用。为什么需要TypeHandler？Java和数据库（JDBC）使用不同的类型系统。例如：Java中有String、Integer、Date、Boolean、enum等类型。JDBC中有VARCHAR、INTEGER、DATE、BOOLEAN、TI
  • 数组逆序重放 crmeb专业二开 python开发语言
    数组逆序重放的意思是将数组的元素逆序排列，然后重新放回原数组中。这个操作可以在很多编程语言中实现，例如Python、Java等。下面是一个Python的示例代码，可以实现这个操作：defreverse_and_rearrange(arr):#反转数组arr.reverse()#重新放回原数组result=[]foriinrange(len(arr)):result.append(arr[i])re
  • Flask 框架app = Flask(__name__) 解析 Nolannk flask框架
    fromflaskimportFlaskapp=Flask(name)@app.route(‘/’)defhello_world():return‘HelloWorld!’ifname==‘main‘:app.run(host=’0.0.0.0’,port=9000)第4行，引入Flask类，Flask类实现了一个WSGI应用第5行，app是Flask的实例，它接收包或者模块的名字作为参数，但一般
  • 高效开发利器：ElementUI元件库与后台模板页面（兼容Axure9） 晏肠冲Jessie
    高效开发利器：ElementUI元件库与后台模板页面（兼容Axure9）【下载地址】ElementUI元件库与后台模板页面兼容Axure9下载本仓库提供了一个名为“web元件库ElementUI元件库后台模板页面（兼容Axure9）.zip”的资源文件下载。该文件包含了适用于Web开发的ElementUI元件库以及兼容Axure9的后台模板页面项目地址:https://gitcode.com/op
  • Python 程序 运行过程 iteye_20309 pythonc/c++数据库
    一.Python解释器Python是一门编程语言，同时也是一个解释器的软件包。解释器是一种让其他程序运行起来的程序。当你编写了一段Python程序，Python解释器将读取程序，并按照其中的命令执行，得出结果。解释器是代码与计算机硬件之间的软件逻辑层。当Python包安装后，它包含了一些最小化的组件：一个解释器和支持的库。根据使用情况的不同，Python解释器可能采取可执行程序的形式，或者作为链接
  • ElementUI元件库与后台模板页面（支持Axure8及9） 贡驰赞Powerful
    ElementUI元件库与后台模板页面（支持Axure8及9）【下载地址】ElementUI元件库与后台模板页面支持Axure8及9本仓库提供了一个全面的资源文件，包含ElementUI元件库及后台模板页面，支持Axure8及9版本。该资源文件旨在帮助设计师和产品经理快速构建高保真原型，提升工作效率项目地址:https://gitcode.com/open-source-toolkit/50b64
  • SQLAlchemy 数据模型可视化工具——洞察数据库架构的艺术 宁彦腾
    SQLAlchemy数据模型可视化工具——洞察数据库架构的艺术sqlalchemy_data_model_visualizerAutomaticallyturnyourSQLalchemyDataModelsintoaNiceSVGDiagram项目地址:https://gitcode.com/gh_mirrors/sq/sqlalchemy_data_model_visualizer在数据驱动的
  • C语言刷题第五章(上) 乞丐1469 C语言刷题c语言学习
    一.题目:1.竞选社长(1)题目描述:假设你们社团要竞选社长，有两名候选人A和B。社团每名同学必须并且只能投一票，最终票数最多的为社长。(2)输入描述:一行，包括字符序列，包含A和B，输入以字符0结束。(3)输出描述:一行，一行字符，A，B或者E。输出A表示A得到的票数最多，输出B表示B得到的票数最多，输出E表示两个同学得到的票数一样多。(4)示例:输入:AABBBBBBBB0输出:B(5)代码实
  • (c语言)将一个数组逆序输出 WuwuwuH_ C语言C语言数组逆序输出编程算法
    (c语言)将一个数组逆序输出#include#includeintmain(){intarr[10]={0,2,5,7,9,10,13,15,18,25};inti;intlength=(int)sizeof(arr)/sizeof(arr[0]);//判断数组长度(总长度除以单个的长度）printf("数组共有%d个数字\n",length);for(i=length-1;i>0;i--){pr
  • 手把手教你学AUTOSAR（10.1）--AUTOSAR 组件的配置与集成实例 小蘑菇二号 手把手教你学AUTOSAR原型模式
    目录AUTOSAR组件的配置与集成实例1.准备工作1.1安装工具1.2创建项目2.系统设计2.1创建系统包3.添加软件组件（SWCs）3.1创建TemperatureSensorSWC3.2创建ACControlSWC4.配置通信接口4.1连接端口5.配置ECU资源5.1创建ECU资源包5.2分配资源6.生成配置文件和代码6.1生成配置文件6.2生成代码7.示例代码7.1ReadTemperatu
  • 手把手教你学AUTOSAR（4.4）--AUTOSAR的Ethernet 小蘑菇二号 手把手教你学AUTOSAR网络
    目录AUTOSAR中的Ethernet1.Ethernet协议简介2.Ethernet在汽车中的应用3.AUTOSAR中的Ethernet支持3.1网络管理（NetworkManagement&#
  • 手把手教你学AUTOSAR（8.2）--AUTOSAR 组件的配置与集成 小蘑菇二号 手把手教你学AUTOSARunity游戏引擎
    目录AUTOSAR组件的配置与集成1.AUTOSAR组件概述2.配置与集成的主要步骤2.1系统设计2.2组件配置2.3组件集成3.工具支持3.1VectorDaVinciDeveloper3.2ETASINTECRIO3.3dSpaceSystemDesk3.4MentorGraphicsVolcanoVSA3.5ElektrobitEBtresos4.示例：使用VectorDaVinciDeve
  • 智慧医疗蛀牙检测数据集VOC+YOLO格式2792张3类别 FL1623863129 数据集深度学习机器学习人工智能
    数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：2792标注数量(xml文件个数)：2792标注数量(txt文件个数)：2792标注类别数：3标注类别名称(注意yolo格式类别顺序不和这个对应，而以labels文件夹classes.txt为准):["decaycavi
  • 在Qt Designer中使用自定义小部件编程 DevRevolt qtpython数据库编程
    在QtDesigner中使用自定义小部件编程QtDesigner是一个可视化界面设计工具，它允许开发人员使用拖放操作创建用户界面。QtDesigner内置了许多标准小部件，如按钮、文本框和标签等。然而，有时候我们可能需要在QtDesigner中使用自定义小部件来满足特定的需求。本文将介绍如何在QtDesigner中使用自定义小部件，并提供相应的源代码示例。首先，我们需要创建一个自定义小部件类。这个
  • 什么是状态管理？有何种方式可以实现？它们之间有什么区别？ Ever69 Flutter《葵花宝典》flutter状态管理
    在Flutter中，状态管理（StateManagement）是管理应用数据变化和传递的核心机制，其目标是高效同步UI与数据，并保持代码的可维护性。以下是主流状态管理方案及其核心区别：一、状态管理的核心概念状态（State）：应用中动态变化的数据（如用户输入、网络响应、页面切换）。状态管理目标：数据共享：跨组件传递状态（如用户登录信息）。局部刷新：避免不必要的UI重建。业务逻辑解耦：分离UI与数据
  • vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header Beamon__ vuevue.js前端
    项目信息vue-cli创建的vue3+webpack5项目；问题现状配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；原因定位代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考Websocketconnectionfailed,Invalidframeheader·Issue#1850·vuejs/vue-cli·GitHub解决方案方案一一刀
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他