mercop
mercop

HTML CSS + DIV实现整体布局

HTML CSS + DIV实现整体布局

1、技术目标：

  • 开发符合W3C标准的Web页面
  • 理解盒子模型
  • 实现DIV+CSS整体布局

2、什么是W3C标准？

    W3C：World Wide Web Consortium，万维网联盟
    W3C的职能：负责制定和维护Web行业标准
    W3C标准包括一系列的标准：

  • HTML内容方面：XHTML
  • 样式美化方面：CSS 
  • 结构文档访问方面：DOM
  • 页面交互方面：ECMAScript
  • ……等等


3、W3C倡导的Web结构要符合以下要求：

  • XHTML负责内容组织
  • CSS负责页面样式


4、符合W3C规范页面的结构：
   

Html代码 复制代码 收藏代码
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.     <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.     <head> 
  5.         <metahttp-equiv="Content-Type"content="text/html; 
  6.                 charset=gb2312"/> 
  7.         <title>无标题文档title> 
  8.     head> 
  9.     <body> 
  10.             ......页面内容部分 
  11.     body> 
  12.     html> 

    
    
        
        无标题文档
    
    
            ......页面内容部分

5、XHTML基本规范

  1. 标签名和属性名称必须小写
  2. HTML标签必须关闭
  3. 属性值必须用引号括起来
  4. 标签必须正确嵌套
  5. 文档必须拥有一个根元素，所有的XHTML元素必须嵌套于根元素中
  6. 属性不能简写，如：

                      
                      
                      

  • 不要使用淘汰的标签：、、等，可参考官方文档(http://www.w3c.org)
  • < img />标签的alt属性：为图片增加alt属性
  • 样式和内容分离：将样式和结构分离，不使用行类样式
  • 表单的name和id：表单及表单元素要求设置name和id属性
  • 使用CSS + DIV布局
  • 页面的浏览器兼容性


    • 7、为什么需要盒子模型？

        网页可以看成由一个个"盒子"组成，如图：
        HTML CSS + DIV实现整体布局_第1张图片

        由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
        中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
        的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

    8、盒子模型的相关属性

    • margin（外边距/边界）
    • border（边框）
    • padding（内边距/填充 ）

         我们看图理解一下各属性作用：

         HTML CSS + DIV实现整体布局_第2张图片

         以上属性又分为上、右、下、左四个方向
        
             问题：页面元素的宽度width、高度height如何计算？
         答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
         比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

    9、盒模型的层次关系

        我们通过一个经典的盒模型3D立体结构图来理解，如图：
        HTML CSS + DIV实现整体布局_第3张图片

         从上往下看，层次关系如下：

         第1层：盒子的边框(border)，
         第2层：元素的内容(content)、内边距(padding)
         第3层：背景图(background-image)
         第4层：背景色(background-color)
         第5层：盒子的外边距(margin)

         从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
         图将在背景色的上方显示

    10、margin外边距
      
        可统一设置或四边分开设置，如图：

        HTML CSS + DIV实现整体布局_第4张图片   

        具体的设置可查看CSS帮助文档(页面下方提供下载)

    11、水平居中和垂直居中

        水平居中包含两种情况：
                块级元素的水平居中：margin:0px auto;
            文字内容的水平居中：text-align: center;
       
        垂直居中：
            常见的单行文字的垂直居中可设置文字所在行的height与
            行高样式属性一致，比如：
            div{
                width: 400px;
                height: 400px;
                line-height: 400px;/*行高与div高度一致*/
            }

    12、案例的首页布局分析

           HTML CSS + DIV实现整体布局_第5张图片

             只保留DIV的布局分析：

             HTML CSS + DIV实现整体布局_第6张图片

    13、首页布局CSS + DIV代码分析

        HTML结构代码：
       


               
               
    主体部分（main）

               
       

       
        CSS样式代码：
        /*主面板样式*/
        #container {
            width:980px;
            margin:0px auto;/*主面板DIV居中*/
        }
       /*顶部面板样式*/
        #header {
            width:100%;
            height:150px;
            border:1px #F00 solid;
        }
        /*中间部分面板样式*/
        #main {
            width:100%;
            height:400px;
            border:1px #F00 solid;
        }
        /*底部面板样式*/
        #footer {
            width:100%;
            height:100px;
            border:1px #F00 solid;
        }

    14、为什么需要float浮动属性？
      
        我们来看看下图：

        HTML CSS + DIV实现整体布局_第7张图片
       
        问题：如何让商品分类DIV、内容DIV和右侧DIV并排放置？
        答案：使用float(浮动)样式

    15、浮动属性

        理解浮动属性首先要搞清楚，什么是文档流？
        文档流：浏览器根据元素在html文档中出现的顺序，
            从左向右，从上到下依次排列
       
        浮动属性是CSS中的定位属性，用法如下：
            float: 浮动方向(left、right、none);

        left为左浮动、right为右浮动、none是默认值表示不浮动
        ，设置元素的浮动，该元素将脱离文档流，向左或向右移动
        直到它的外边距碰到父元素的边框或另一个浮动元素的边
        框为止

        浮动示例，没有使用浮动的3个DIV：
        HTML结构代码：
           
    第1块div

           
    第2块div

           
    第3块div


        CSS样式代码：
            #first, #second, #third{
                    width:100px;
                    height:50px;
                    border:1px #333 solid;
                    margin:5px;
            }

        执行效果如图：
        HTML CSS + DIV实现整体布局_第8张图片


        样式中加入 float:left;
        执行效果如图：
       
       
        你再修改为 float: right试试右浮动是什么效果
       
    16、让商品分类DIV、内容DIV和右侧DIV并排放置

        HTML结构代码：
       

    Java代码 复制代码 收藏代码
    1. "container"> 
    2.    
      "header">顶部（header）
       
    3.    
      "main"> 
    4.        
      class="cat">商品分类(cat)
       
    5.        
      class="content">内容(content)
       
    6.        
      class="sidebar">右侧(sidebar)
       
    7.    
     
  •    
    "footer">底部（footer）
     
  •   
    •     
    
        
        
    
            
    商品分类(cat)
    
            
    内容(content)
    
            
    右侧(sidebar)

       
       CSS样式代码(在第13节CSS代码基础上加入)：

        .cat, .sidebar {
            float:left;
            width:20%;
            height:100%;
        }
        .content {
            float:left;
            width:60%;
            height:100%;
        }

    17、clear清除

        clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行
        clear属性的取值：rigth、left、both、none

    18、总结

    • 盒子模型有哪些属性？各属性又分别包含哪些属性？
    • float属性的应用场合？有哪些取值？   
    • clear属性的应用场合？有哪些取值？

    你可能感兴趣的:(HTML&JS)

    • 022-安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用 wusuowei2986 安全php数据库web安全
      022-安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用#知识点：1、PHP留言板前后端功能实现2、数据库创建&架构&增删改查3、内置超全局变量&HTML&JS混编4、第三方应用插件&传参&对象调用演示案例：➢数据导入-mysql架构&库表列➢数据库操作-mysqli函数&增删改查➢数据接收输出-html混编&超全局变量➢第三方插件引用-js传参&函数对象调用#开发环境：D
    • Html&Js笔记（持续更新中...） liranke JavaScript笔记cssjavascript前端
      Html&Js笔记（持续更新中...）Html&Js笔记（持续更新中...）一.基本控件的使用1.控件靠右显示2.设置按钮的属性和点击事件3.下拉列表的使用4.js中实现一个按钮的跳转二.table的使用：1.右边框的设置：2.只给表格单元格加右边框3.动态设置右边框的风格Html&Js笔记（持续更新中…）你好！这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdo
    • 【Web前端开发利器。先开拓眼界，在深入技术】 睡醒的狂狮 前端uijavascript
      技术了解要全面，不要局限于使用单一的技术体系，我们共同研究，加油伙伴们！用到的各种优秀资料、神器及框架整理在此，毕竟好记性不如烂键盘。觉得比较不错,贴出来便于大家使用!!GRUNT:jstaskrunnerSea.js:js模块化knockout.js：MVVM开发前台，绑定技术Angular.js:使用超动感HTML&JS开发WEB应用！Highcharts.js，Flot:常用的Web图表插件
    • 网络安全学习路线： 小黑安全 web安全学习安全网络安全
      相信各位刚学习网络安全时都是手足无措的，不知道自己究竟应该怎么样才能将时间运用到点上，达到利益最大化，那么今天我们就网络安全学习路线这一标题讨论该怎样学习网络安全才是最好的，此文章若有错误望指正；了解网络安全我们应当走进网络安全去，主要了解安全导论、安全法律法规、操作系统应用、计算机网络、HTML&JS、PHP编程、Python编程和Docker基础知识。让初级入门的人员对网络安全基础有所了解，了
    • 网络安全学习路线 小黑安全 web安全学习安全
      第一部分：基础篇。主要包括安全导论、安全法律法规、操作系统应用、计算机网络、HTML&JS、PHP编程、Python编程和Docker基础知识。让初级入门的人员对网络安全基础有所了解。第二部分：Web安全。包含Web安全概述、Web安全基础、Web安全漏洞及防御和企业Web安全防护策略方面的安全知识。让初学者入门学习Web安全知识。第三部分：渗透测试。这个阶段包括的内容有，渗透测试概述、渗透测试环
    • JS旋转实现转盘抽奖效果
      本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果:可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入)HTML文件:                    #RotationDiv{        /
    • 防参数传输篡改html+js+php Mr_jinhua 杂七杂八php签名参数传输篡改
      html&js:账户：密码：记住我：//与服务端加密字符串保持一致varbandParam='fghfghfghfgretyret';varversionNumber='wesion-v1';//默认字符串functionmakeSign(_data){varsign=bandParam;//对_data进行排序按键值升序排列varnewData=Object.keys(_data).sort()
    • 简单JS旋转实现转盘抽奖效果 飞翔的熊blabla
      闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果:可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入)HTML文件:#RotationDiv{/*初始化界面,让指针朝上*/transform:rotate(180deg);-ms-transform:rotate(180deg);
    • Web前端 黑客与编程
      MaterialDesign:谷歌出品，必属精品Vue.js:借鉴了Angular及React的JS框架，设计理念较为先进GRUNT:jstaskrunnerSea.js:js模块化knockout.js：MVVM开发前台，绑定技术Angular.js:使用超动感HTML&JS开发WEB应用！Highcharts.js，Flot:常用的Web图表插件NVD3:基于d3.js的图表库Raw：非常不错
    • AngularJS1.x书签 HiSea
      文档：APIReference(api)ErrorReference(error)DeveloperGuide(guide)HelloWorld:Other使用超动感HTML&JS开发WEB应用!|AngularJS中文社区AngularJS快速开始|AngularJS中文社区[!!!]AngularJs:Howtocheckforchangesinfileinputfields?-StackOv
    • 使用jQuery实现返回顶部
      使用jQuery实现。所用图片：1、尝试滚动此页面到底部即可出现go2top按钮。2、go2top-inner暂未使用。HTML&JS定义：复制代码代码如下:$(function(){$('#go2top').click(function(){$("html,body").animate({scrollTop:0},200);returnfalse;});$(window).scroll(func
    • jQuery实现每日秒杀商品倒计时功能 1
      html&js：jQuery每日秒杀倒计时倒计时COUNTDOWN距离结束还剩000000$(document).ready(function(){varoDate=newDate();varnowTime=oDate.getTime();//现在的毫秒数oDate.setDate(oDate.getDate()+1);//设定截止时间为第二天vartargetDate=newDate(oDate
    • jQuery每日秒杀商品倒计时 1 html
      html&js： jQuery每日秒杀倒计时 倒计时 COUNTDOWN 距离结束还剩 00 00 00 $(document).ready(function(){ varoDate=newDate(); varnowTime=oDate.getTime();//现在的毫秒数 oDate.setDate(oDate.getDate()+1);//设定截止时间为第二天
    • html网页网站顶部自适应导航栏，菜单栏 1 html自适应导航栏jquery自适应菜单栏公司官网自适应导航菜单栏网页自适应菜单栏jquery自适应导航栏html
      html&js： jQuery自适应网页顶部导航菜单 首页 品牌故事 产品中心 网上商城 招商加盟 行业新闻 联系我们 //用于判断导航栏的状态 vartoggle=true; //导航栏按钮 $('.btnImg').click(function(){ if(toggle){ $('.btnImg').css("border","1px
    • Android与Html&JS交互 luyouxin androidhtml5
      最近的项目中有个网上商城的功能，最后决定用Html5来实现，这样的话Android这边就能省去很多时间去实现这个功能，只需要与做与Html&JS交互就行！下面介绍下怎么Android与Html&JS之间的交互，先上html5实现的简单界面和代码： functionmethod1(){varvalue='fdsaf';document.getElementById('get_result1').
    • HTML&JS笔记(1) html
      canvas基本绘图 <!DOCTYPE html> <html> <body> <meta charset="utf-8"> <canvas id="myCanvas" width="500" height="500"> 你的浏览器不支持HTM
    • html&js 在firefox与IE中呈现存在差异的解决方法总结 firefox
      由于现在使用firefox的用户占据了比较小的一定比例，所以现在在作web开发的时候时常需要考虑占这一很小比例的用户而考虑DHTML在firefox的呈现是否与预想一致，因为IE所遵循的标准并不是严格的W3C的标准所以IE和ff在最终呈现效果方面可能会存在一定差异。 下面列出我遇到的一些 两者之间在存在差异的地方与大家共享，不是很全面，希望大家多多指正。 1.padding 的问题
    • DIV/SPAN通用子窗口展现、关闭JS接口 LvCreator
      子窗口通用接口，基于jQuery支持使用。目前设计时，使用的是1.7.2版。FF默认焦点未失去问题存在。HTML&JS：                                          var flag = true;         $(document).ready(function() {             // 确认处理             $("#butn")
    • html&JS学习笔记(4) u010255642 jshtml5
      你的浏览器不支持HTML5 varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); vargrd=ctx.createRadialGradient(100,100,10,100,100,50); grd.addColorStop(0,"#00ff00"); grd.addColorStop(1,"#f
    • HTML&JS 笔记(3) u010255642 htmljs浏览器html5
      你的浏览器不支持HTML5 varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); varimage=newImage(); image.src="pic1.jpg"; image.onload=function(){ ctx.drawImage(image,10,10,180,180); //x,y,
    • HTML&JS笔记(2) u010255642 htmljs浏览器
      你的浏览器不支持HTML5 你好，世界 varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeStyle="red"; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(10,10); ctx.
    • HTML&JS笔记(1) u010255642 html5canvas
      canvas基本绘图 你的浏览器不支持HTML5 你好，世界 varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeStyle="red"; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(10,
    • html&js经典技巧 sdlcn
      第一个     权益声明符号“©“,注册商标符号-〉“¬“第二个，table     captioncontent第三个，无序列表                            有序列表                      第四个，隐藏对象     与jsp联合获得系统时间">第五个，onsubmit              .....      第六个，5秒后
    • Spring中@Value注解，需要注意的地方 无量 springbean@Valuexml
      Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac
    • mongoDB 分片 开窍的石头 mongodb
          mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。     第一步启动两台以上的mongo服务 &nb
    • OVER(PARTITION BY)函数用法 0624chenhong oracle
      这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数        &nb
    • Android开发中，ADB server didn't ACK 解决方法 一炮送你回车库 Android开发
      首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。   一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。 参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb
    • canvas中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas
      pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
    • 编码乱码问题 灵静志远 javajvmjsp编码
      1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
    • java 求几个月后的日期 darkranger calendargetinstance
      Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M
    • 数据库设计的三大范式（通俗易懂） aijuans 数据库复习
      关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。
    • 想学工作流怎么入手 atongyeye jbpm
      工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。 系统学习工作流，很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1  首先要
    • Context和SQLiteOpenHelper创建数据库 百合不是茶 androidContext创建数据库
             一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi
    • 浅谈group by和distinct bijian1013 oracle数据库group bydistinct
              group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。         譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
    • vi opertion 征客丶 macoprationvi
      进入 command mode （命令行模式） 按 esc 键 再按 shift + 冒号 注：以下命令中 带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字
    • 【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark
        对于K/V类型的RDD,如下操作是什么含义？   val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect  reduceByKey在这里的操作，是把
    • java类加载机制 BlueSkator java虚拟机
      java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。 虚拟机区分一个Cla
    • 动态添加文本框 BreakingBad 文本框
        <script>     var num=1; function AddInput() {      var str="";     str+="<input 
    • 读《研磨设计模式》-代码笔记-单例模式 bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton
    • iOS应用打包发布常见问题 chenhbc iosiOS发布iOS上传iOS打包
      这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。   1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc
    • 工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用OO
      我们走的设计路线和国外的产品不太一样，不一样在哪里呢？  国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很
    • oracle 11g新特性Flashback data archive daizj oracle
      1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。
    • 多叉树:2-3-4树 dieslrae 树
          平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:     1、有一个数据项的节点总是有2个子节点(称为2-节点)     2、有两个数据项的节点总是有3个子节点(称为3-节
    • C语言学习七动态分配 malloc的使用 dcj3sjt126com clanguagemalloc
      /* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p
    • Objective-C编码规范[译] dcj3sjt126com 代码规范
        原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau
    • 0.性能优化-目录 frank1234 性能优化
      从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。 主要内容包括： 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt
    • Java父类取得子类传递的泛型参数Class类型 happyqing java泛型父类子类Class
        import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =
    • 跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC
        ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架； 掌握数据库技术，表设计和索引优化，分库分表/读写分离； 了解缓存技术，熟练使用如Redis/Memcached等主流技术； 了解Ngin
    • the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite
      ./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s
    • 第12章 Ajax（中） onestopweb Ajax
      index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
    • Optimize query with Query Stripping in Web Intelligence blueoxygen BO
      http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936
    • Java开发者写SQL时常犯的10个错误 tomcat_oracle javasql
      1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 　　他们对PreparedStatements不了解 　　他们认为使用PreparedStatements太慢了 　　他们认为写Prepar
    • 世纪互联与结盟有感 阿尔萨斯
      10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。 全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟