王元元
王元元

HTML+CSS布局

 

HTML CSS + DIV实现整体布局

 

HTML（2） 

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代码  收藏代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

  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> 

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  

  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  3.     <html xmlns="http://www.w3.org/1999/xhtml">  

  4.     <head>  

  5.         <meta http-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元素必须嵌套于<html>根元素中

  6. 属性不能简写，如：

                       <input checked="checked" />
                       <input readonly="readonly" />
                       <option selected="selected" />

6、页面开发需要注意的地方：

  • 不要使用淘汰的标签：<b>、<font>、<marquee>等，可参官方文档(http://www.w3c.org)

  • < img />标签的alt属性：为图片增加alt属性

  • 样式和内容分离：将样式和结构分离，不使用行类样式

  • 表单的name和id：表单及表单元素要求设置name和id属性

  • 使用CSS + DIV布局

  • 页面的浏览器兼容性


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

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

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

8、盒子模型的相关属性

  • margin（外边距/边界）

  • border（边框）

  • padding（内边距/填充 ）

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

     

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

9、盒模型的层次关系

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

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

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

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

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

       

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

11、水平居中和垂直居中

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

12、案例的首页布局分析

       HTML+CSS布局_第3张图片

         只保留DIV的布局分析：

         HTML+CSS布局_第4张图片

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

    HTML结构代码：
    <div id="container">
            <div id="header">顶部（header）</div>
            <div id="main">主体部分（main）</div>
            <div id="footer">底部（footer）</div>
    </div>
    
    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浮动属性？
   
    我们来看看下图：

    
    
    问：如何让商品分类DIV、内容DIV和右侧DIV并排放置？
    答：使用float(浮动)样式

15、浮动属性

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

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

    浮动示例，没有使用浮动的3个DIV：
    HTML结构代码：
        <div id="first">第1块div</div>
        <div id="second">第2块div</div>
        <div id="third">第3块div</div>

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

    执行效果如图：
    HTML+CSS布局_第5张图片


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

    HTML结构代码：
    

Java代码  收藏代码

  1. <div id="container"> 

  2.     <div id="header">顶部（header）</div> 

  3.     <div id="main"> 

  4.         <div class="cat">商品分类(cat)</div> 

  5.         <div class="content">内容(content)</div> 

  6.         <div class="sidebar">右侧(sidebar)</div> 

  7.     </div> 

  8.     <div id="footer">底部（footer）</div> 

  9. </div> 

[java] view plain copy

  1. <div id="container">  

  2.     <div id="header">顶部（header）</div>  

  3.     <div id="main">  

  4.         <div class="cat">商品分类(cat)</div>  

  5.         <div class="content">内容(content)</div>  

  6.         <div class="sidebar">右侧(sidebar)</div>  

  7.     </div>  

  8.     <div id="footer">底部（footer）</div>  

  9. </div>  

    
   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,css,布局)

  • 《Web 应用项目开发》课程心得体会：从理论到实战，开启 Web 开发新征程 m0_74824091 前端
    在信息技术飞速发展的当下，Web应用已然渗透到生活的方方面面，从日常网购、社交娱乐，到在线办公、学习平台，无一不是Web应用的成果。怀着对互联网技术的热忱与憧憬，我踏入了《Web应用项目开发》这门课程，历经数月的沉浸式学习与实践，收获远超预期，犹如经历一场脱胎换骨的蜕变，以下便是我在这门课程中的全面心得体会。夯实基础：Web技术初相识课程伊始，仿若踏入一片未知的技术丛林，HTML、CSS和Java
  • C程序员驯服Common Lisp - 入门 - [语言探索]<转载> acool555 lisp语言c编程documentationfortran
    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://bigwhite.blogbus.com/logs/158733479.html毫无疑问，CommonLisp是一门庞大且复杂的语言，学习曲线并不平坦。对于一个从未接触过函数式语言、交互式语言以及动态类型语言的C程序员来说，学习CommonLisp显然是一个很大的挑战。也许有人会问："C语言已经无所不能了，为何还要学习C
  • Web 开发的“三件套” zhangpeng455547940 Web开发reactnativereact.jsjavascript
    HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
  • span标签垂直居中显示的正确方法 gys9895 htmlcss前端
    span标签居中显示的正确方法方法一：水平居中垂直居中必须加上display:block;否则不能居中显示，因为span是行内元素必须转换成块元素才会居中显示生效。方法二：利用flex布局display:flex;justify-content:center;//水平align-items:center;//垂直添加链接描述
  • 智享三代实景无人直播：实景呈现+智能互动，以科技之力稳抓流量与商机 x13257272926 科技人工智能
    传统直播中，虚拟背景虽能带来简洁美观的视觉效果，但往往缺乏真实感和可信度。智享三代实景无人直播则反其道而行之，着重强调实景呈现。无论是实体店铺的内部环境，还是工厂的生产车间，亦或是户外产品的实际使用场景，都能通过高清摄像头真实、全面地展示在观众面前。例如，一家经营户外运动装备的商家，利用智享三代实景无人直播，将直播间搭建在风景秀丽的郊外露营地。观众不仅能清晰看到帐篷的搭建过程、帐篷内部的空间布局和
  • JavaScript的学习6——jQuery 十五春会
    文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide
  • WPF中Grid自动布局 Now喔 WPFwpf
    控件功能根据自定义行和列，快速进行排列，能够进行自定义控件间距离，减少元素进行定义间距，同时能更好的维护界面排序。代码部分usingSystem.ComponentModel;usingSystem.Windows;usingSystem.Windows.Controls;namespaceWPFApp{publicclassAutoGrid:Grid{//////列定义例如："100,*,100
  • WPF学习笔记04-控件Control_Part1 一只只对技术感兴趣的程序员 WPF学习wpf学习ui
    之前我们已经学习过WPF布局了，这节我们开始简单介绍下控件。熟悉Winform的应该对控件并不陌生。WPF和Winform的渲染也是不一样的一个是基于DirectX一个是基于GDI+。在WPF中，打交道最多的控件无非就那么几种。1）布局控件。之前介绍过的，可以容纳多个控件或嵌套其他布局控件，用于在UI上组织和排列控件。比如StackPanel、Grid等控件都属于此类控件，他们都拥有共同父类---
  • 深入解析STM32时钟树：从原理到实战配置 Electron-er stm32单片机嵌入式硬件
    目录引言一、STM32时钟树体系架构解析1.1时钟树全景图1.2核心时钟源详解二、时钟信号流向与控制逻辑2.1主时钟路径2.2关键分频系数2.3时钟门控机制三、CubeMX实战配置3.1配置步骤演示3.2代码生成分析四、调试技巧与常见问题4.1时钟诊断方法4.2典型故障排查五、高级应用技巧5.1动态时钟切换5.2时钟安全系统(CSS)5.3超频实践（风险提示）结语引言在嵌入式系统开发中，时钟系统堪
  • 2025版最新如何参加护网行动？零基础入门到精通，收藏这篇就够了！ 程序媛西米 网络安全web安全网络安全HVV护网行动网络安全计算机
    1.什么是护网行动护网行动是以公安部牵头的，用以评估企事业单位的网络安全的活动。具体实践中，公安部会组织攻防两方，进攻方会在一个月内对防守方发动网络攻击，检测出防守方（企事业单位）存在的安全漏洞。通过与进攻方的对抗，企事业单位网络、系统以及设备等的安全能力会大大提高。“护网行动”是国家应对网络安全问题所做的重要布局之一。“护网行动”从2016年开始，随着我国对网络安全的重视，涉及单位不断扩大，越来
  • React篇之three渲染 这个一个非常哈 react.js前端前端框架
    需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
  • 实现手机银行应用框架鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例提供了一个手机银行应用的基本框架，包含“首页”、“财富”、“生活”、“我的”四个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。实现手机银行应用框架源码链接效果预览使用说明进入应用，点击下方的tabBar可浏览不同的模块，其中一些功能未开发，只是作为页面布局展示。应用中登录验证，只是UI能力，手机号输入满11位，验证码为12345
  • HTML标记语言＜head＞中 的几个元素 2301_79698214 html前端
    在HTML文档中，部分包含了文档的元数据（metadata），这对于网页的正确显示和搜索引擎优化（SEO）非常重要。部分通常包含以下几个重要的元素：：定义了网页的标题，这个标题会显示在浏览器的标题栏或页面的标签上。例如：我的网页：用于定义网页的元数据，如字符集、页面描述、关键词、作者、视口设置等。例如：：用于链接外部资源，如CSS文件、图标（favicon）等。例如：：用于直接在文档中嵌入CSS样
  • .net 插件式开发——实现web框架中大数据算法嵌入(BP算法逼近) weixin_34219944 json人工智能
    关于算法的引入：插件式架构设计，可移植性强，利于算法的升级。【插件式开发相关资料】https://www.cnblogs.com/lenic/p/4129096.html以BP算法为例：1、首先定义一个接口规范////////插件的统一入口///publicinterfaceIPluginPerfrom{//////统一算法插件入口//////输出参数的个数///输出参数///输入参数///str
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • Unity中WolrdSpace下的UI展示在上层 程序员也有头发 Unity开发unityui游戏引擎
    一、问题描述Unity中Canvas使用WorldSpace布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在UI的材质中禁用深度测试（ZTest），强制UI始终渲染在最上层。Shader"Custom/UI_NoDepthTest"{Properties{...}SubShader{Tags{"Queue"="Transparent+1000"//设置高优先级
  • Sass (Scss) 与 Less 的区别与选择 王强你强 sassscssless
    在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
  • vue2安装scss 活宝小娜 vuescss前端css
    vue2安装scss1、下载npminstall-Dsasssass-loader2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDepen
  • QT CSS 选择器 m0_55576290 qtqtcss开发语言
    在Qt的样式表（StyleSheet）中，选择器（Selector）是用来指定样式应用对象的一种语法。它类似于CSS中的选择器，用于明确指定哪些控件（或控件的子元素）应该应用特定的样式。通过使用选择器，你可以更精确地控制样式的作用范围，避免样式被意外继承或应用到错误的控件上。1.选择器的类型在Qt的样式表中，有几种常用的选择器：（1）类型选择器（TypeSelector）类型选择器基于控件的类名来
  • CSS中相对定位使用详情 ~废弃回忆 �༄ HTMLcss前端CSS中相对定位使用详情
    1.如何设置相对定位?给元素设置postition:relative即可实现相对定位.可以使用left,right,top,bottom四个属性调整位置.2.相对定位的参考点在哪里?相对于自己原来的位置3.相对定位的特点:1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.默认规则是:定位的元素
  • spring 的model repository service controller的功能 LCY133 web开发springjava后端
    1.Controller层（控制层）•功能：负责接收和处理HTTP请求，协调客户端与业务逻辑之间的交互。•核心职责：•请求处理：解析HTTP请求参数（如URL参数、Body数据、Headers）。•路由分发：根据请求路径（@RequestMapping）调用对应的Service方法。•响应生成：返回格式化数据（如JSON、XML）或视图（如HTML页面）。•输入校验：验证请求参数的合法性（如使用@
  • CSS中绝对定位 ~废弃回忆 �༄ HTMLcss前端CSS中绝对定位
    1.如何设置绝对定位?给元素设置postition:absolute即可实现绝对定位可以使用left,right,top,bottom四个属性调整位置2.绝对定位的参考点在哪里?参考他的包含块.什么是包含块?1.对于没有脱离文档流的元素:包含块就是父元素;2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)3.绝对定位元素的特点:1.脱离文
  • 用css写背景模糊的三种情况 小竹子14 css前端
    1.背景模糊这种最简单也是最直接的，这里展示两种背景模糊的写法：1.用backdrop-filter的一个子属性blur进行设置模糊（这里的值代表的是将n✖n方格里面的像素的颜色做加权平均，即高斯模糊。2.用filter直接进行设置模糊。这里需要注意的是，filter会直接影响元素的内容，而backdrop-filter作用于元素的背景。通常情况下，使用backdrop-filter会使整个元素的
  • HTML 样式之 CSS 全面解析 烂蜻蜓 HTMLhtmlcss前端
    在网页开发的世界里，HTML负责搭建页面的结构，而CSS（CascadingStyleSheets，层叠样式表）则承担着渲染HTML元素标签样式的重任，赋予网页丰富的视觉效果。一、CSS的魅力展现CSS能够实现诸如改变文字的样式与颜色（Look!Stylesandcolors）、灵活操控文本（ManipulateText）、设置元素的颜色和盒子模型（Colors,Boxes）等诸多功能，极大地提升
  • 账本 1.01 版本：样式优化升级分享 烂蜻蜓 html前端css
    在开发账本应用的过程中，持续的样式优化对于提升用户体验起着至关重要的作用。本次账本1.02版本着重对样式进行了全面优化，让应用在视觉上更加美观、操作上更加便捷。下面就为大家分享一些关键代码及优化思路。话不多说，先上效果图。一、整体布局优化在index.vue和add.vue中，整体布局都采用了flex布局方式。以index.vue为例：.container{display:flex;flex-di
  • 响应式设计已死？流体布局才是未来！ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在当今的Web设计领域，挑战从未如此巨大。各种屏幕尺寸和分辨率的智能设备层出不穷，要让网站在所有设备上保持一致的用户体验，难度可想而知。但别担心，流体布局（FluidLayout）正是为了解决这一问题而生。它不仅适用于超大屏幕，同样也能完美适配小型移动设备，真正做到自适应！接下来，我们深入了解流体布局的原理
  • 流星雨特效css3 你的美，让我痴迷 cssCSS动画HTML5星系背景关键帧视觉艺术
    *{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;}section{position:absolute;top:0;left:0;width:100%;height:100vh;background:url(img/xingkong.jpg);background-position-x:center;backgroun
  • CSS3 用户界面设计指南 froginwe11 开发语言
    CSS3用户界面设计指南引言随着互联网的快速发展，用户界面设计已经成为网站和应用程序吸引和留住用户的关键因素之一。CSS3，作为Web开发中的核心技术之一，提供了丰富的工具和特性来改善用户界面。本文将深入探讨CSS3在用户界面设计中的应用，包括基本概念、常用技巧以及实际案例分析。CSS3用户界面基本概念1.媒体查询媒体查询（MediaQueries）是CSS3的一个重要特性，它允许开发者根据不同的
  • Electron+Python软件系统开发记录（一）：基础环境搭建 多宝鱼1998 环境配置遇到的坑pythonnodejsthrift
    Electron+Python软件系统开发记录（一）：基础环境搭建1.问题说明最近开始做本科毕设，其中有一部分内容是搭建一个完整的软件系统。系统要求就是常见的客户端，服务器，数据库的整体架构。因为本科不是计算机系的，所以学习的相关技能少，以前写课程设计一般用QT或者MFC，还有Mac的OC语言。本着多学习的态度，这次选用了Electron框架，可以迫使自己学学html,css,js这些东西。后端因
  • C# WPF学习总结 战族狼魂 WPFC#c#wpf学习
    经过一段时间的学习和实践，我对C#WPF（WindowsPresentationFoundation）有了更深入的理解。WPF作为一个强大的桌面应用程序开发框架，为开发者提供了丰富的UI控件、强大的数据绑定和灵活的布局系统。以下是我对C#WPF学习的一些总结：目录1.基础知识2.UI设计3.数据绑定4.动画和特效5.命令和路由事件6.自定义控件和扩展性7.性能优化和内存管理8.实战项目经验9.学习
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他