猴子猿
猴子猿

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局

什么是宽度自适应布局呢？

就是当浏览器窗口大小改变时，浏览器里的元素宽度也随之改变，从而达到自适应布局。

常见的宽度自适应布局有：

1、  两列：左边宽度不变，右边宽度自适应

2、  三列：左右两边宽度不变，中间部分自适应

3、  三列：左右两边宽度自适应，中间部分不变

一、利用div+css实现以上“自适应布局”

（1）两列：左边宽度固定，右边宽度自适应

利用div+float+margin，已在随笔‘float剖析’中讲解，具体代码和效果图见下：

<!DOCTYPE html>
    <head>
        <title>width_layout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <style type="text/css">
            .content {
                min-width:300px;
            }
            .div1 {
                width:200px;
                height:300px;
                background:green;
                float:left;
            }
            .div2 {
                height:300px;
                background:pink;
                margin-left:200px;
            }
        </style>
    </head>
    <body>

        <div class="content">
            <div class="div1"></div>
            <div class="div2"></div>
        </div>
        
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第1张图片

（2）三列：左右两列宽度固定，中间部分自适应

思路：将左右两列分别设置为左浮动和右浮动，中间的列宽度不管，将它的margin-left和margin-right设置为与左右两列的固定宽度一致。

具体代码和效果图见下：

<!DOCTYPE html>
    <head>
        <title>layout2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <style>
            * {
                margin:0;
                padding:0;
            }
            .main {
                height:300px;
                width:100%;
                min-width:400px;
            }
            .main_left {
                height:300px;
                width:200px;
                float:left;
                background-color:green;
                text-align:center;
            }
            .main_center {
                height:300px;
                margin-left:200px;
                margin-right:100px;
                text-align:center;
                background-color:pink;
            }
            .main_right {
                height:300px;
                width:100px;
                float:right;
                text-align:center;
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="main_left">我是左边部分，宽度不变</div>
            <div class="main_right">我是右边部分，宽度不变</div>
            <div class="main_center">
                我是中间部分，宽度自适应
            </div>
        </div>
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第2张图片

（3）三列：左右两列宽度自适应，中间列宽度固定不变

思路：倘若左右两列宽度一样，左右两列将其宽度各设置为父元素的50%，然后再将左右两列的margin-left设置为中间列固定宽度的一半，然后将这三列都左浮动，就ok了。

具体代码及效果见下：

<!DOCTYPE html>
    <head>
        <title>layout3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <style>
            body {
                min-width:500px;
            }
            #left,
            #right {
                float: left;
                margin: 0 0 0 -101px;
                width: 50%;
                height:58px;
                *width: 49.9%;
            }

            #main {
                width: 200px;
                height:58px;
                float: left;
                background: green;
            }
            .inner {
                height: 100%;
            }
    
            #left .inner,
            #right .inner {
                margin: 0 0 0 101px;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div id="left">
            <div class="inner">left</div>
        </div>
        <div id="main">
            <div class="inner">中间width不变，两边自适应</div>
        </div>
        <div id="right">
            <div class="inner">right</div>
        </div>
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第3张图片

二、利用table+css实现以上“自适应布局”

 由于table自带一些特性，所以实现以上三种布局，比较容易。

 在这里用到的table特性就是文字自动垂直居中，当不设置td的宽度width时，浏览器自动渲染。

（1）两列：左边宽度固定，中间部分自适应

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>table_layout</title>
        <style>
            .m_table {
                width:100%;
                height:100px;
                text-align:center;
            }
            .left_td {
                width:300px;
                background-color:#98FF1A;
            }
            .right_td {
               
                background-color:#7CC0FF;
            }
        </style>
    </head>
    <body>
        <table class="m_table">
            <tr>
                <td class="left_td">这个是左边部分，宽度确定</td>
                <td class="right_td">这个是右边部分，宽度自动扩展</td>
            </tr>
        </table>
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第4张图片

（2）三列：左右两列宽度固定，中间部分自适应

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>table_layout2</title>
        <style>
        .m_table {
            width:100%;
            height:400px;
            text-align:center;
        }
        .left_td {
            width:200px;
            height:300px;
            min-width:200px;
            background-color:green;
        }
        .center_td {
            height:300px;
            background-color:pink;
        }
        .right_td {
            width:200px;
            height:300px;
            min-width:200px;
            background-color:blue;
        }
    </style>
    </head>
    <body>
        <table class="m_table">
            <tr>
                <td class="left_td">我是左边部分，宽度不变</td>
                <td class="center_td">我是中间部分，宽度自适应</td>
                <td class="right_td">我是右边部分，宽度不变</td>
            </tr>
        </table>
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第5张图片

（3）左右两列宽度自适应，中间列宽度固定不变

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>table_layout3</title>
        <style>
        .m_table {
            width:100%;
            min-width:500px;
            height:58px;
            text-align:center;
        }
        .left_td {
            height:58px;
            background-color:orange;
        }
        .center_td {
            height:58px;
            width:200px;
            background-color:green;
        }
        .right_td {
            height:58px;
            background-color:orange;
        }
        </style>
    </head>
    <body>
        <table class="m_table">
            <tr>
                <td class="left_td">我是左边部分，宽度自适应</td>
                <td class="center_td">我是中间部分，宽度不变</td>
                <td class="right_td">我是右边部分，宽度自适应</td>
            </tr>
        </table>
    </body>
</html>
View Code

抛砖引玉之宽度自适应布局_第6张图片

三、div+css和table+css布局的比较

对于这两个概念的区别以及优劣势，网站建设的设计师和SEO者已经是再熟悉不过了，众所周知DIV+CSS的优势，也都清楚table布局已经趋于淘汰，现在极少数人会使用table去建网站了。对于二者的区别，网上早有大量的文章，在下就列举几点谈谈。

1、 table结构的网站是按照表格一格一格的打开的速度很慢；DIV+CSS结构的网站打开速度快。

2、 div+css的网站适合百度蜘蛛爬行。可以这么说，百度蜘蛛喜欢div+css结构的站，不喜欢table结构的站，因为后者爬起来太费劲。

3、 table结构的站，架构过于单调，一眼看去就显得方方框框的感觉，如果想实现圆润或者流线的效果，必须绘制大量的边框图片。而div+css的站，样式及其丰富，可以利用结构做出丰富的效果。

4、 table结构的站，页面样式都在页面代码里面，不但代码冗余，可读性和再次开发性差，而且修改起来麻烦；Div+css的结构，结构与样式分离，可读性和二次修改都极其方便。

 

你可能感兴趣的:(抛砖引玉之宽度自适应布局)

  • Python 之SQLite3 tianxicool PythonSQLite3sqlitepythonibm数据库inserttable
    （翻译自pythonv2.7document）sqlite是一个c语言库，提供了一个轻量级的文件数据库解决方案。她不需要服务器支持，而且支持非标准的sql语句。自python2.5之后sqlite被集成到了python标准库中。一个使用sqlite3的例子：importsqlite3conn=sqlite3.connect('example')##若想创建内存数据库，可以conn=sqlite3.
  • 【CSS】核心布局技术 Guiat HTMLCSSJavaScriptcss前端
    个人主页：Guiat归属专栏：HTMLCSSJavaScript文章目录1.CSS布局基础1.1盒模型与布局基础1.2文档流2.传统布局技术2.1浮动布局2.1.1浮动的问题与解决方案2.2定位布局2.2.1相对定位2.2.2绝对定位2.2.3固定定位2.2.4粘性定位2.3表格布局3.现代布局技术3.1Flexbox布局3.1.1Flex容器属性3.1.2Flex项目属性3.1.3Flexbox
  • LabVIEW高效溢流阀测试系统 LabVIEW开发 LabVIEW开发案例LabVIEW开发案例
    开发了一种基于LabVIEW软件和PLC硬件的溢流阀测试系统。通过集成神经网络优化的自适应PID控制器，该系统能自动进行压力稳定性、寿命以及动静态性能测试。该设计不仅提升了测试效率，还通过智能化控制提高了数据的精确性和操作的便捷性。项目背景：传统的溢流阀测试系统多依赖手动操作，速度慢且准确度低，容易受人为操作误差影响。本项目旨在开发一套自动化程度高、测试精度高的溢流阀测试系统，用以满足现代航空工业
  • Python 数据可视化之密度散点图 Density Scatter Plot 幸运 lucky 暂时Python数据可视化密度散点图DensityPlotMatplotlib
    CSDN叶庭云：https://yetingyun.blog.csdn.net/密度散点图（DensityScatterPlot），也称为密度点图或核密度估计散点图，是一种数据可视化技术，主要用于展示大量数据点在二维平面上的分布情况。与传统散点图相比，它使用颜色或阴影来表示数据点的密度，从而更直观地展示数据的分布情况。密度散点图能更好地揭示数据的集中趋势和分布模式，尤其是在数据量非常大时，避免了散
  • html5炫酷图片悬停效果实现详解 木木黄木木 html5前端html5前端html
    html5炫酷图片悬停效果实现详解这里写目录标题html5炫酷图片悬停效果实现详解项目介绍技术栈核心功能实现1.页面布局2.图片容器样式3.炫酷悬停效果缩放效果倾斜效果模糊效果旋转效果4.悬停文字效果5.性能优化6.响应式设计项目亮点总结项目介绍本文将详细介绍如何使用HTML5和CSS3技术实现一个具有炫酷悬停效果的图片展示组件。该组件包含多种动画效果，如缩放、倾斜、模糊和旋转等，并且具有良好的响
  • DeepSeek环境适配实战：从云到端无缝部署的终极方案 恶霸不委屈 pythonbash人工智能deepseek
    摘要：当AI模型需要在10+种芯片、5+种云平台、数百类边缘设备上运行时，如何避免"移植地狱"？DeepSeek通过自适应环境感知引擎，实现跨平台部署效率提升20倍。本文揭秘其环境适配核心技术，并附可复用的实战配置模板。一、环境适配的五大死亡陷阱在复杂异构环境中，开发者常陷入以下困境：场景典型问题经济损失案例云端训练/边缘推理TensorRT与PyTorch模型格式不兼容某安防企业交付延迟导致违约
  • AI入门书籍推荐 撬动未来的支点 深度学习深度学习人工智能
    漫画机械学习入门(（日）大关真之戴凤智张鸿涛孟宇（译）)深度学习入门：基于Python的理论与实现深度学习的数学：使用Python语言[转换版]([美]罗纳德·T.纽塞尔)
  • 2024年Web前端最全slurm深度解析：探索作业调度系统的架构和术语，超硬核 2401_84447297 程序员前端架构
    最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】二、slurm的架构和术语slurm的架构主要由以下几个组件构成：slurmctl
  • 算法之Java数据结构：链表实现栈与队列的深度剖析 一杯年华@编程空间 算法精讲数据结构算法java
    算法之Java数据结构：链表实现栈与队列的深度剖析在编程的学习旅程中，每一次对新知识点的钻研都是成长的宝贵契机。今天，咱们一同深入探索Java中利用链表实现栈和队列的相关知识，希望能和大家共同进步，让我们的编程技能更上一层楼！一、链表：数据结构的基石链表是一种灵活的数据结构，它由一系列的节点组成，每个节点包含一个数据元素和一个指向下一个节点的引用。这种结构就像是一条链子，每个节点都是链环，通过引用
  • Logback 实现不同包的日志记录到不同文件 jaymou Springlogbackjava开发语言
    核心通过合理配置多个appender来定义不同的日志输出目的地通过logger元素将不同的包与对应的appender关联起来同时利用additivity属性控制日志的传递，从而实现精准的日志输出管理。additivity属性控制日志传递：additivity属性决定了该logger的日志是否会传递给父logger。将其设置为false时，该logger的日志只会输出到与之关联的appender，不
  • 设计模式之适配器模式(二)：STL适配器 流星雨爱编程 #设计模式/架构设计#C++进阶设计模式适配器模式c++STL包装器
    目录1.背景2.什么是STL适配器？3.函数对象适配器3.1.std::bind3.2.std::not1和std::not23.3.std::mem_fn4.容器适配器4.1.std::stack(栈)4.2.std::queue（队列）4.3.std::priority_queue（优先队列）5.迭代器适配器5.1.std::reverse_iterator（反向迭代器）5.2.std::ba
  • 【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的安全性：使用 Spring Security 实现认证与授权 Foyo Designer springspringbootjava后端logbackservlet
    点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、开篇整活儿今儿个咱唠唠Spr
  • Elasticsearch 搜索 Kuzury Elasticsearch大数据elasticsearch搜索
    Elasticsearch真正强大之处在于可以从混乱的数据中找出有意义的信息——从大数据到全面的信息。这也是为什么我们使用结构化的JSON文档，而不是无结构的二进制数据。Elasticsearch不只会存储(store)文档，也会索引(indexes)文档内容来使之可以被搜索。每个文档里的字段都会被索引并被查询。而且不仅如此。在简单查询时，Elasticsearch可以使用所有的索引，以非常快的速
  • Grid布局及其相关属性 Lucky__h CSS前端知识前端csshtml
    一、概述Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。二、基本概念容器与项目：一样的容器与项目的概念，采用网格布局的区域，称为"容器"（container）。容器
  • Google 三大论文之——MapReduce 花月诗人 MapReduceMapReduceGoogle三大论文之MapReduceGoogle三大论文论文MapReduceGoogleMapReduce
    MapReduce:超大机群上的简单数据处理摘要MapReduce是一个编程模型,和处理,产生大数据集的相关实现.用户指定一个map函数处理一个key/value对,从而产生中间的key/value对集.然后再指定一个reduce函数合并所有的具有相同中间key的中间value.下面将列举许多可以用这个模型来表示的现实世界的工作.以这种方式写的程序能自动的在大规模的普通机器上实现并行化.这个运行时
  • 【20期获取股票数据API接口】如何用Python、Java等五种主流语言实例演示获取股票行情api接口之沪深A股实时最新分时MACD数据及接口API说明文档 无名的小码农 pythonjava开发语言股票api股票数据股票数据接口
    在量化分析领域，实时且准确的数据接口是成功的基石。经过多次实际测试，我将已确认可用的数据接口分享给正在从事量化分析的朋友们，希望能够对你们的研究和工作有所帮助，接下来我会用Python、JavaScript（Node.js）、Java、C#和Ruby五种主流语言的实例代码给大家逐一演示一下如何获取各类股票数据。在下方，所有演示中的API接口Url链接结尾的ZHITU_TOKEN_LIMIT_TES
  • 鸿蒙开发：使用Ellipse绘制椭圆
    前言本文基于Api13前边两篇文章，我们概述了几何图形矩形和圆形，分别使用Rect和Circle两个组件来实现，本篇文章，我们介绍另一个几何图形组件Ellipse，来实现一个椭圆图形。Ellipse是ArkUI框架中用于绘制椭圆的图形组件，支持填充、描边、透明度调节等基础功能，其核心特性包括，灵活布局，可单独使用或嵌套于Shape父组件中实现复杂矢量图形（类似SVG效果），也支持动态属性，通过状态
  • 手把手教你华为鸿蒙开发之第十三节 harmonyos-next
    华为鸿蒙开发：自定义组件的创建与使用引言在华为鸿蒙应用的开发中，自定义组件是构建复杂界面和重用代码的重要手段。通过自定义组件，开发者可以将复杂的UI逻辑封装起来，提高代码的可维护性和可读性。本文将通过DevEcoStudio详细介绍如何在鸿蒙应用中创建和使用自定义组件，包括组件的参数传递、状态管理、事件处理以及如何通过@Builder和@BuilderParam装饰器自定义组件内容。自定义组件基础
  • 手把手教你华为鸿蒙开发之第九节 safari
    华为鸿蒙开发：滚动视图Scroller与ForEach循环深度解析引言在移动应用开发中，滚动视图是展示大量内容的常用组件。华为鸿蒙操作系统提供了Scroller组件，允许开发者创建滚动视图。本文将通过DevEcoStudio详细介绍Scroller的基本使用、滚动控制以及如何结合ForEach循环动态生成滚动内容。Scroller基础Scroller是鸿蒙应用中用于创建滚动视图的组件，它支持垂直和
  • 手把手教你华为鸿蒙开发之第十节 harmonyos-next
    华为鸿蒙开发：深入探索Tabs组件的定制与应用引言在移动应用设计中，标签页（Tabs）是用户切换不同内容区块的重要界面元素。华为鸿蒙操作系统提供的Tabs组件支持开发者创建高度定制化的标签页界面。本文将通过DevEcoStudio详细介绍Tabs组件的使用，包括基本设置、动态生成标签页、以及如何通过自定义组件来实现独特的视觉效果。Tabs组件基础Tabs组件允许开发者创建一组可滑动的标签页，每个标
  • 手把手教你华为鸿蒙开发之第五节
    华为鸿蒙开发：条件语句和分支逻辑引言在编程中，根据不同的条件执行不同的代码块是常见的需求。华为鸿蒙操作系统的开发同样涉及到这些基础的控制流语句。本文将通过DevEcoStudio介绍鸿蒙开发中的条件语句和分支逻辑，包括if语句、switch语句和三元条件表达式，以及如何在UI中实现条件渲染。if语句if语句是最基本的条件语句，它允许我们根据条件是否满足来执行不同的代码。单分支if语句单分支if语句
  • 手把手教你华为鸿蒙开发之第六节
    华为鸿蒙开发：循环控制语句详解与示例引言在编程中，循环控制语句是处理重复任务的重要工具。在华为鸿蒙操作系统的开发中，我们可以使用while和for循环来实现代码的重复执行。本文将通过DevEcoStudio介绍鸿蒙开发中的循环控制语句，并提供丰富的示例来帮助理解。while循环while循环会重复执行一段代码，直到条件不再满足。示例1：打印1到50的数字@Entry@Componentstruct
  • 手把手教你华为鸿蒙开发之第七节 harmonyos-next
    华为鸿蒙开发：数组和对象遍历及UI渲染详解引言在华为鸿蒙操作系统的开发中，数组和对象的遍历是基础且频繁的操作。无论是处理数据集合还是动态生成用户界面，都需要对数组和对象进行高效的遍历。本文将详细介绍如何在鸿蒙开发中使用for循环、for...of循环以及ForEach方法来遍历数组和对象，并展示如何在UI中渲染这些数据。遍历数组基本遍历数组遍历是访问数组中每个元素的过程。在鸿蒙开发中，我们可以使用
  • 手把手教你华为鸿蒙开发之第八节 harmonyos-next
    华为鸿蒙开发：Swiper轮播组件详解与实践引言在现代用户界面设计中，轮播图是一种常见的组件，用于展示广告、新闻、产品等信息。华为鸿蒙操作系统提供了Swiper轮播组件，使得开发者能够轻松实现轮播效果。本文将通过DevEcoStudio详细介绍Swiper组件的基本使用、属性配置以及如何结合扩展函数进行轮播图的快速开发。Swiper轮播组件基础Swiper组件是鸿蒙应用中用于创建轮播效果的组件，它
  • 手把手教你华为鸿蒙开发之第三节
    华为鸿蒙开发基础第三节：一元运算符、比较运算符、逻辑运算符及运算符优先级引言在华为鸿蒙操作系统的开发中，DevEcoStudio是官方推荐的集成开发环境（IDE），它提供了代码编写、调试、打包和签名等一系列开发功能。本文将结合DevEcoStudio，详细介绍鸿蒙应用开发中常用的一元运算符、比较运算符、逻辑运算符以及运算符的优先级，帮助开发者更好地理解和使用这些基础概念。一元运算符一元运算符只对一
  • HarmonyOS NEXT 中级开发笔记：艺术展览类应用的ArkTS实践 harmonyos-next
    最近在尝试用ArkTS应用开发语言为HarmonyOSNEXT开发一个艺术展览类的应用。作为刚接触鸿蒙生态不久的开发者，记录一些过程中的思考片段，供同行参考。界面构建与数据绑定艺术展览应用的核心是展品展示页，这里用ArkTS的声明式UI实现了一个瀑布流布局。比较特别的是，HarmonyOSNEXT的List组件对性能优化做得很好，即使加载高清图片也能保持流畅滚动。typescript//展品卡片组
  • LevelDB源码解析 | 04.3 SST之布隆过滤器 Jessie-jx 架构c++数据库sstable布隆过滤器
    目录布隆过滤器原理bloomfilter的实现bloomfilter的使用过滤器的格式filterblock的构造使用过滤器的判别过程在前面关于SST文件的章节中，我们提到SST文件中包含indexblock和datablock，在查询数据中先利用indexblock定位到相应的datablock，然后再到datablock中去查询数据。但是如果该key在该datablock中并不存在，此番查询便
  • ARM驱动学习之静态申请字符类设备号 JT灬新一 嵌入式Carm开发学习
    ARM驱动学习之静态申请字符类设备号内核文件：宏定义MKDEV的头文件“include/linux/kdev_t.h”register_chrdev_region和unregister_chrdev_region在头文件"include/linux/fs.h"1.“module_param.c“改写为“request_cdev_num.c”修改Makefile对应名字2.添加linux头文件/*字
  • 基于Python的文件操作之第1课读文件 赵谨言 pythonpython开发语言
    学习目标掌握基于python对文件相关操作每种格式包含很多相关操作，学习只要掌握知识点的用法，参考笔记可以实现相关的练习即可，不必背会，在企业开发过程中边搜实现。学习内容了解python函数和模块文件操作：读文件，写文件文件夹和路径csv格式文件ini格式文件xml格式文件excel文件压缩文件第1节了解函数和模块1.1函数的定义定义了一个功能模块，调用函数。1.2函数有什么作用对公共代码块进行封
  • 自制工具合集之《在线步进电机调速》 小皮匠1992 在线工具合集stm32嵌入式硬件单片机
    嵌入式学习交流Q群679912988前言工具地址:电机调速无需下载，根据输入的起始频率、结束频率及采样点，输出横坐标为时间，纵坐标为频率的曲线。支持多种曲线类型，直线(梯形)，S形，指数，对数。有好的想法或遇到问题，请到留言板留言。简介步进电机的调速方法可以根据不同的控制方式和技术手段进行分类，以下是常见的方式：分类依据调速方法电流/电压控制改变电压、改变电流、PWM控制反馈控制闭环控制、PID控
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他