静茹秋叶
静茹秋叶

CSS 网页定位与布局

要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。

1 文档流定位

html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。

  • 行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签
  • 块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 ……
  • 行内块元素：顾名思义，拥有行内元素和块级元素的特点。
    这三者之间，可以通过display属性进行转换
display: none;  表示元素不会被显示
display: inline; 表示元素是行内元素
display: block; 表示元素是块级元素
display: inline-block; 表示元素是行内块元素

CSS 网页定位与布局_第1张图片

2 浮动定位

将元素设置成浮动定位后，元素将脱离文档流位置。浮动定位主要是float属性和clear属性。
float属性有三个值

float: none;    表示不浮动
float: left;    表示左浮动
float: right;   表示右浮动

接下来重点看一下左浮动和右浮动

2.1 文档流定位例子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floattitle>
    <style>
        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: #66ccff;
        }
    style>
head>
<body>
    <div id="container">
        <div id="box1">box1div>
        <div id="box2">box2div>
    div>
body>
html>

CSS 网页定位与布局_第2张图片

2.2 设置float为left

将box1和box2都设置为left定位

        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #66ccff;
        }

CSS 网页定位与布局_第3张图片

2.3 float设置为left和right定位

将box1设置成left布局，box2设置成right布局

        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            float: right;
            background-color: #66ccff;
        }

CSS 网页定位与布局_第4张图片

2.4 clear属性

首先看一下，若将上述例子中的box1设置float:left定位，box2仍然是文档流定位，看一下有何效果。

        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: #66ccff;
        }

CSS 网页定位与布局_第5张图片
从效果看，box2和box1颜色重叠了，只是box2的字在下面。那怎么让box1和box2正常显示呢？可以使用clear属性，将box2的clear设置成both，或者left都可以。

        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            /*clear: left;*/
            clear: both;
            background-color: #66ccff;
        }

clear属性有四个取值：

  • clear: left; 清除左浮动
  • clear: right; 清除右浮动
  • clear: both; 清除左右浮动
  • clear: none; 默认值，只在需要移除已指定的清除值时用到，例如，最开始指定clear: left,后来又要清除该值，可以设置成clear: none

3 层定位

3.1 position属性

  • 静态布局static: 默认值,没有定位，元素出现在正常的流中，top right bottom left 和z-index无效。
  • 相对定位relative: 元素并未脱离文档流，而是在原文档流位置上进行定位，可以使用top right bottom left和z-index进行定位
  • 绝对定位absolute：元素脱离原来的文档流。以最近的非static元素为父级元素进行定位，若未找到最近的非static布局的父级元素，则以body为父级元素进行定位。可以使用top right bottom left和z-index进行定位
  • 固定定位fixed：元素以body为父级元素，不随着滚动条而移动.可以使用top right bottom left和z-index进行定位

例如：要想实现下面这种布局样式，可以通过设置position属性实现。
CSS 网页定位与布局_第6张图片
这种样式属于两行三列，其中第二行整个box可以设置成绝对定位，然后里面都可以设置成绝对定位。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position属性title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #header {
            width: 100%;
            height: 50px;
            background-color: #66ccff;
        }
        #main_area {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: pink;
        }
        #menu_side {
            width: 100px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: #138eee;
        }
        #right_side {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 150px;
            background-color: #ccffff;
        }
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 100px;
            right: 150px;
            background-color: #ffc600;
        }
    style>
head>
<body>
    <div id="container">
        <div id="header">头部div>
        <div id="main_area">
            <div id="menu_side">菜单栏div>
            <div id="content">内容展示区div>
            <div id="right_side">右侧栏div>
        div>
    div>
body>
html>

CSS 网页定位与布局_第7张图片
其实，也可以用float布局实现上图的效果。

参考资料：中国大学慕课网上的《Web前端开发》（作者：孙俏 、王新阳 、祖明 、付慧）课程

你可能感兴趣的:(CSS,css,定位,布局,float,position)

  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • 基于CODESYS的多轴运动控制程序框架：逻辑与运动控制分离，快速开发灵活操作 GPJnCrbBdl python开发语言
    基于codesys开发的多轴运动控制程序框架，将逻辑与运动控制分离，将单轴控制封装成功能块，对该功能块的操作包含了所有的单轴控制（归零、点动、相对定位、绝对定位、设置当前位置、伺服模式切换等等）。程序框架由主程序按照状态调用分归零模式、手动模式、自动模式、故障模式，程序状态的跳转都已完成，只需要根据不同的工艺要求完成所需的动作即可。变量的声明、地址的规划都严格按照C++的标准定义，能帮助开发者快速
  • 南美洲的奇特艺术品【神秘档案馆·第三期】 清风小和尚
    本期回答问题：1.复活节岛石像是谁建造的？2.复活节岛石像的建造方法与目的？3.纳斯卡线条的设计意义？南美洲是南亚美利加洲的简称，位于西半球的南部，东濒大西洋，西临太平洋，北滨加勒比海，南隔德雷克海峡与南极洲相望。对南美洲最简单的定位方法是：美国南面。南美洲是地球上第四大的大洲，有着种类繁多的物种和丰富的地形。在这片广袤的土地上，有两样奇特的艺术品---复活节岛摩艾石像与纳斯卡线条。摩艾石像（Mo
  • TDengine 签约前晨汽车，解锁智能出行的无限潜力 涛思数据（TDengine） tdengine汽车大数据
    在全球汽车产业转型升级的背景下，智能网联和新能源技术正迅速成为商用车行业的重要发展方向。随着市场对环保和智能化需求的日益增强，企业必须在技术创新和数据管理上不断突破，以满足客户对高效、安全和智能出行的期待。在这一背景下，前晨汽车凭借其在新能源智能商用车领域的前瞻性布局和技术实力，成为行业中的佼佼者。前晨汽车采用整车数据采集和全车数据打通策略，能够实时将数据推送至APP端客户。然而，这导致整体写入和
  • 一文掌握python常用的list（列表）操作 程序员neil pythonpython开发语言
    目录一、创建列表1.直接创建列表：2.使用list()构造器3.使用列表推导式4.创建空列表二、访问列表元素1.列表支持通过索引访问元素，索引从0开始：2.还可以使用切片操作访问列表的一部分：三、修改列表元素四、添加元素1.append()：在末尾添加元素2.insert()：在指定位置插入元素五、删除元素1.del：删除指定位置的元素2.remove()：删除指定值的第一个匹配项3.pop()：
  • 请用幸福影响他人，请不要看不惯别人 吕氏春秋驴驴
    这个世间包罗万象，这个世间丰富多彩，这个世间色彩缤纷。。。。。如果只一种模式，一种色彩，一种花朵，一样容颜，一种人，一个思想。。。。。多么无趣啊！不管怎样的思想和生活方式只要能够安慰自己的心灵，能克服自己的恐惧感受祥和，充满生命的活力。。。。就是正确的活法。读了金刚经你会感觉博大精深空灵之美，看见基督徒你会感知被爱，易经道德经你会定位人生不纠结，读了鲁米你会跟宇宙自然神灵做朋友，人生无意义会让你珍
  • 光盘文件系统 (iso9660) 格式解析 穷人小水滴 光盘文件系统iso9660denoGNU/Linuxjavascript
    越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht
  • 【Bugs】Python：“ModuleNotFoundError: No module named ‘XXX‘” 系'辞 工具箱pythonbuganaconda
    问题描述Python使用库的前提是必须已安装了相应的库，往往利用“命令行指令”实现安装，一般安装解法类似。但，还是具有延伸问题，本博客对此作记录。【1】Nomodulenamed‘seaborn’(1.1):情况1：为Anaconda安装【图1-2】.定位Anaconda路径【图3】.Anaconda路径加入Path>&
  • 《我的人间烟火》火遍全网，姐弟恋专业户魏大勋用演技为自己正名，他的代表作并非三个女人 天然农场
    说起魏大勋，真是一言难尽！毕业于中央戏剧学院的他，出道十几年居然没有塑造出让观众记住的角色，一直被大家定位为综艺咖，甚至有人打趣道，魏大勋的代表作就是三段姐弟恋。他的绯闻女友，囊括了马苏、杨幂、秦岚这三位顶级女神。不得不承认，魏大勋虽然形象欠佳，但是眼光不错，艳福不浅，直逼当年的泡妞高手李亚鹏。与李亚鹏不同的是，魏大勋每次都是奔着结婚而去，并非玩玩而已，毕竟不以结婚为目标的恋爱都是耍流氓！有网友评
  • 解决Obsidian写笔记中的＜img＞标签无法显示图片的问题 全能全知者 笔记
    Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件 仓库
  • 03-Cesium自定义着色器完整代码以及注释 fxshy 着色器javascript
    1.效果展示2.完整代码自定义着色器完整代码#map{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;}Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZjZkZDAwZC1mNTFhLTRhO
  • 7月结束了 摸不着的小鱼
    这日子快得让人看不见、摸不着，也是真的太快了点吧！一眨眼我已经辞去第二份工作两个多月了！在这两个月里真的是做了好多好多事，有自己小试牛刀的“创业”，也有辛酸在家带娃的三个周……时间带不走的永远看不见，时间能带走的都是我们所见所闻的东西……前一个月感觉都是在荒废时间吧，也没有找到自己的定位，一次又一次的更替和改变，我越发觉得自己不清楚自己所要的东西是什么了？后面一个多月的时间里就是磨练耐心了，全程带
  • Android实现监听事件的方法 Amy木婉清
    1.通过内部类实现2.通过匿名内部类实现3.通过事件源所在类实现4.通过外部类实现5.布局文件中onclick属性(针对点击事件)1.通过内部类实现代码:privateButtonmBtnEvent;//oncreate中mBtnEvent.setOnClickListener(newOnClick());//内部类实现监听classOnClickimplementsView.OnClickLis
  • 程序员架构师主要是做什么_程序员架构师：职责、技能与挑战 绿色小猪
    免费备考资料（2024年11月软考）：历年试题+视频课合集+电子讲义点击领取>>>免费刷题：2024年11月软考备考刷题点此进入>>>程序员架构师的角色定位在软件开发领域，程序员架构师是一个至关重要的角色。他们不仅需要深入理解业务需求，还要将其转化为技术上的解决方案。程序员架构师是项目中的技术领航者，负责制定和维护软件系统的整体架构，确保系统的可扩展性、可维护性和性能。他们的工作涉及从概念化到实现
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • 2021-06-07 Do What You Are Meant To Do 春生阁
    Don’tgiveupontryingtofindbalanceinyourlife.Sticktoyourpriorities.Rememberwhat’smostimportanttoyouanddoeverythingyoucantoputyourselfinapositionwhereyoucanfocusonthosepriorities,ratherthanbeingpulledbyt
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Android shell 常用 debug 命令 晨春计 Audiodebugandroidlinux
    目录1、查看版本2、am命令3、pm命令4、dumpsys命令5、sed命令6、log定位查看APK进程号7、log定位使用场景1、查看版本1.1、Android串口终端执行getpropro.build.version.release#获取Android版本uname-a#查看linux内核版本信息uname-r#单独查看内核版本1.2、linux服务器执行lsb_release-a#查看Lin
  • 2022-04-25 L是木子李呢
    上门维修APP开发应具备哪些功能随着移动互联网的不断发展，上门维修在我们生活中已经是非常普遍的存在了，为了给用户更方便的找到上门维修的渠道，上门维修APP应运而生，那么上门维修APP开发应具备哪些功能呢？1、维修门店搜索为了更好地方便用户省时省力，上门维修APP会依据用户定位信息搜索线下实体店，促使用户更好的找到线下维修店面，省时又省力。2、维修服务分类包括管道洁具维修、强电弱电维修、木工维修、粉
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • apache ftpserver-CentOS config gengzg apache
    <server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
  • 优化MySQL数据库性能的八种方法 AILIKES sqlmysql
    1、选取最适用的字段属性 　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
  • JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
    JeeSite 企业信息化快速开发平台 平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
  • 通过Spring Mail Api发送邮件 120153216 邮件main
    原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】 Spring Mail API都在org.spri
  • Pysvn 程序员使用指南 2002wmj SVN
    源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
  • 在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
    SELECT  R.session_id AS BlockedSessionID ,          S.session_id AS BlockingSessionID ,          Q1.text AS Block
  • Intent 常用的用法备忘 7454103 .netandroidGoogleBlogF#
    Intent     应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。 下面列出几种Intent 的用法 显示网页:
  • Spring定时器时间配置 adminjun spring时间配置定时器
    红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
  • POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
    来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。 思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。 代码： #include <iostream> #include <cstdio>
  • 重构笔记——提取方法（Extract Method） ayaoxinchao java重构提炼函数局部变量提取方法
    提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。   下面是我学习这个重构手法的笔记：   提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
  • 为UILabel添加点击事件 bewithme UILabel
        默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。   UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
  • NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis数据库NoSQL
    一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
  • SecureCRT使用备注 bingyingao secureCRT每页行数
    SecureCRT日志和卷屏行数设置 一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
  • 【Scala九】Scala核心三：泛型 bit1129 scala
    泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
  • 素数与音乐 bookjovi 素数数学haskell
        由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。     闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
  • Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
            这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。         简单的说，IdentityHashMap和HashM
  • 读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
  • PS人像润饰&调色教程集锦 cherishLC PS
      1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/   新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。   所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
  • 更新多个字段的UPDATE语句 crabdave update
    更新多个字段的UPDATE语句                    update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
  • hive实例讲解实现in和not in子句 daizj hivenot inin
    本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。 假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
  • 一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
    这是人类算24点的方法？！！！ 事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态 朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。 然后么。。。我就在深夜很得瑟的问室友求室友算 刚出完题，文哥的暴走之旅开始了 5秒后
  • 关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yiiframework
    在使用 YIi的路径管理工具时，发现了一个问题。                    <?php         
  • 对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
    概述   “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。   “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
  • 学习编程那点事 gcq511120594 编程互联网
    一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
  • Reverse Linked List II hcx2013 list
    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return 
  • Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • Hadoop集群工具distcp liyonghui160com
        1. 环境描述 两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
  • 一个备份MySQL数据库的简单Shell脚本 pda158 mysql脚本
    　　主脚本（用于备份mysql数据库）： 　　该Shell脚本可以自动备份 数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。 　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
  • 300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
    A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
  • thrift总结 - 跨语言服务开发 uule thrift
    官网 官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍   RPC    POM： <dependency> <groupId>org.apache.thrift</groupId>
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他