猴子猿
猴子猿

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

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

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

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

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

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的结构，结构与样式分离，可读性和二次修改都极其方便。

 

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

  • DeepSeek V3可用的15种精美知识卡片提示词 东锋17 人工智能信息可视化人工智能
    视觉风格模板库尺寸规格基准尺寸：宽度400px，高度不少于1280px。比例关系：遵循3:10的垂直长卡片比例，保持竖版布局。显示方式：卡片自左向右平铺展示，保持一致的顶部对齐。响应适配：主体内容在固定宽度内，确保在不同设备上保持竖版体验。具体风格介绍01|孟菲斯解构主义(MemphisDeconstructed)设计哲学：打破常规秩序，创造有意识的视觉冲突与趣味张力。色彩系统：高饱和不协调组合（
  • OmniGraffle Pro for Mac思维导图 1alisa macos
    OmniGraffleProforMac思维导图文章目录OmniGraffleProforMac思维导图一、介绍二、效果三、下载一、介绍OmniGraffleProforMac，具有演示模式，支持多个编辑窗口，Xcode导入，AppleScript和动作支持以及许多导出选项等。可以帮助您尽可能轻松地设计各种图形，如图表、网站线框、映射软件类、流程图、组织结构图、网络拓扑图布局等等。二、效果三、下载
  • 树型表格｜图形天下思维导图图形布局 思维导图思维
    树型表格是一种直观且高效的展示层级结构信息的工具。这种布局形式适合用于展示层级结构清晰、分类明确的信息。1.操作方法图形天下思维导图软件切换树型表格布局的方法，具体步骤如下：点击右侧工具栏的“布局”，打开布局功能面板，然后在图形布局中点击”树型表格“。2.布局方向在树型表格中，布局方向是可以灵活设置的，以满足不同用户的需求。2.1标题靠左当选择标题靠左的布局方向时，将中心主题置于左侧，层级关系从左
  • 扇形放射图｜图形天下思维导图图形布局 思维导图思维
    扇形放射图布局是思维导图中的一种核心布局形式，源自对自然界扇形及放射性形态的灵感借鉴。该布局以中心主题为起点，各子主题如同扇形或辐射状般向外延伸，构筑成一个生动的扇形结构。扇形放射图布局特别适用于展现围绕中心主题展开的多个分支内容，诸如产品分类的概览、技能发展的树状结构、以及深度分析的层次等。1.操作方法图形天下思维导图软件切换扇形放射图布局的方法，具体步骤如下：点击右侧工具栏的“布局”，打开布局
  • 鸿蒙栅格布局组件 GridRow 自学指南 harmonyos-next
    在日常的鸿蒙应用开发工作里，我时常面临布局设计的挑战。不同设备的分辨率、宽高比千差万别，若采用传统的固定布局，在某些设备上可能出现组件挤压、留白过多甚至显示错乱的尴尬局面。而GridRow组件宛如一把精准的手术刀，能够巧妙地切割屏幕空间，构建出规整且灵活多变的布局架构，轻松化解多尺寸适配难题。为了帮助同行们少走弯路，快速掌握这一强大工具，我决定将自己的学习心得整理成这篇自学指南。一、GridRow
  • axure 侧滑抽屉式菜单_AxureRP教程 泽善党 axure侧滑抽屉式菜单
    前面介绍的《AxureRP教程–自适应菜单效果》里的自适应菜单，其实也可以叫做抽屉式菜单，皆因其可展开可收缩，类似抽屉的开关，不过自适应菜单有空间大小的显示，这里介绍的则没有大小限制，完全取决于菜单项的多少。抽屉式菜单网上也有很多朋友尝试制作过，在这里我自己也尝试了一下，做了一个三级菜单的抽屉式效果。抽屉式菜单应用的比较广，一般常见于左侧的导航式菜单。本例的实现原理是用一个动态面板来控制一级菜单，
  • Linux下配置pptp协议之拨号上网 fengwuJ linuxlinuxpptp客户端
    首先安装pptp，sodoapt-getinstallpptp-linux-y：创建连接：sudopptpsetup--createnodeName--serveryourServerAddr--usernamexxx--passwordxxxconnectionconfigfile为拨号配置文件，可通过pppdcall进行拨号打开配置路由，sudogedit/etc/ppp/ip-up在文件末尾
  • 基于HTML的邮件发送状态查询界面设计示例 大霸王龙 html前端javascript
    以下是一个基于HTML的邮件发送状态查询界面设计示例，结合筛选功能、状态展示和重新发送操作，采用Bootstrap框架实现响应式布局：邮件发送状态监控系统.status-badge{padding:4px8px;border-radius:12px;font-size:0.9em;}.success{background-color:#d4edda;color:#155724;}.failed{b
  • 【力扣100】简要总结之哈希 却道海棠 力扣leetcode哈希算法golang
    文章目录1、两数之和思路代码（Go）2、字母异位词分组（1）计数法思路实现代码（Go）（2）排序法思路实现代码（Go）（3）比较3、最长连续序列思路实现代码（Go）1、两数之和思路使用map，【键】：元素值【值】：下标遍历原值，找对应的值是否存在于map中若存在，返回两者下标若不存在，将当前值与下标存入map代码（Go）functwoSum(nums[]int,targetint)[]int{m:
  • ffmpeg之AVFormatContext结构体详细解释 _WAWA鱼_ ffmpeg音视频java
    AVFormatContext作用AVFormatContext主要起到了管理和存储媒体文件相关信息的作用。它是一个比较重要的结构体，在FFmpeg中用于表示媒体文件的格式上下文，其中包含了已经打开的媒体文件的详细信息，包括媒体文件的格式、媒体流的信息、各个媒体流的编码格式、时长、码率等。AVFormatContext结构体管理着整个媒体文件，核心的功能包括以下几个方面：打开、关闭媒体文件：AVF
  • Flutter Scaffold 属性之 Drawer 侧边栏、DrawerHeader 详解及多平台调试指南 阿贾克斯的黎明 安卓flutter
    目录FlutterScaffold属性之Drawer侧边栏、DrawerHeader详解及多平台调试指南一、Drawer侧边栏详解1.什么是Drawer侧边栏2.使用Drawer侧边栏的示例代码二、DrawerHeader详解1.DrawerHeader的作用2.使用DrawerHeader的示例代码三、在Web、Windows不同平台调试程序1.在Web平台调试2.在Windows平台调试在Fl
  • Java在算法竞赛中的技巧（蓝桥杯备赛总结） Sr.浅河 java蓝桥杯算法
    前言：笔者在这段时间准备蓝桥杯竞赛，由于个人原因选择Java作为语言，刷题中也是不断感到Java有些语法还是不够方便（非常羡慕隔壁C++的STL…），不过有些常见的技巧/方法/模板，也是自己做了些总结，十分之不全面，比完赛会继续完善…！！！！！提交结果时记得检查有无不该加的头文件，主类名是否为Main！！！！！！2.优化输入输出时间（快速IO模板）：importjava.io.*;importja
  • python 网格_python 栅格处理利器之Rasterio weixin_40003512 python网格
    本文主要是Automatizedatadownloadautomating-gis-processes.github.io中栅格图像处理的学习笔记，分享给大家，同时也便于自己记忆以及查看，节省时间。数据准备如果手头有数据，可以跳过该步骤，如果没有，可以按照原文提供的下载链接，保存数据。importosimporturllibdefget_filename(url):"""Parsesfilenam
  • Rust从入门到精通之进阶篇：13.错误处理进阶 aimmon Rust从入门到精通系列rust算法开发语言区块链
    错误处理进阶错误处理是编写健壮软件的关键部分。Rust提供了一套强大的错误处理机制，使开发者能够编写安全、可靠的代码。在本章中，我们将深入探讨Rust的错误处理模式和最佳实践。回顾：Rust的错误处理哲学Rust将错误分为两大类：可恢复错误：程序可以处理并继续执行的错误，如文件未找到不可恢复错误：严重问题导致程序必须终止，如数组越界访问Rust使用Result类型处理可恢复错误，使用panic!机
  • 基于变分推理与 Best‑of‑N 策略的元 Prompt 自动生成与优化框架 由数入道 提示词工程提示词人工智能
    摘要本文提出了一种融合变分推理与Best‑of‑N策略的元Prompt自动生成与优化框架，通过高度参数化的模板、随机扰动采样及多指标评分机制，实现从初始提示生成到最终输出的动态优化。同时，针对实际应用中对自适应参数调整、深层语义理解、多模态融合、用户反馈闭环等需求，文章在未来扩展方向中提出了详细建议，并在代码中预留了相应接口。实验评估与讨论表明，该框架具备较高的灵活性、扩展性和实用性，为自然语言生
  • K8S学习之基础五十八：部署nexus服务 云上艺旅 K8S学习kubernetes学习容器云原生docker
    部署nexus服务Nexus服务器是一个代码包管理的服务器，可以理解Nexus服务器是一个巨大的Library仓库。Nexus可以支持管理的工具包括Maven，npm等，对于JAVA开发来说，只要用到Maven管理就可以了。Nexus服务器作用：因为传统的中央仓库在国外，其地理位置比较远，下载速度比较缓慢。因此，当公司开发人员数量越来越多时，如果不架设一台自己的Nexus服务器，会产生大量的流量阻
  • uniapp css grid布局 —Qeyser 微信小程序uni-appHtmlcss前端uniapp
    html代码{{item}}css代码.view-list{width:100%;margin-top:40rpx;margin-bottom:40rpx;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);;gap:30rpx;}.view-item{width:100%;height
  • ElasticSearch7学习笔记之重建索引、预处理、数据建模与压力测试 coder_szc ElasticSearchelasticsearch
    文章目录重建索引使用场景UpdateByQuery1、插入数据2、改变Mapping3、变更生效4、查询测试Reindex1、新建索引2、重建索引3、查询测试IngestNode与数据预处理简介Pipeline与Processor_ingest/pipeline/_simulate管道api通过管道插入数据通过管道重建索引Painless脚本管道与painless脚本painless脚本更新数据保
  • java项目之基于ssm的阅微文学网站的设计与开发（源码+文档） 风月歌 java毕业设计javamysqlssm毕业设计源码
    风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的阅微文学网站的设计与开发。项目源码以及部署相关请联系风歌，文末附上联系信息。项目简介：本次开发的阅微文学网站实现了字典管理、文学信息管理、书架管理、文学信息留言管理、文学信息购买管理、用户管理、阅读记录管理管理、作者管理、管理员管理等功能。作者：风歌（风定落花生，歌声逐流水的风歌）个人简介：混迹在
  • 前端安全之加密介绍 素燃 前端安全加密
    本文转自马老师博客园介绍作为前端，数据提交到后台之前，重要的数据要进行加密一下，虽然已经有https等技术，但是增加一道前端的加密还是相对更安全的。虽然，前端的加密很容破解，但是有总比没有强。尤其是涉及到用户名和密码，最好加密后再进行发送ajax请求。md5加密算法是一种哈希算法以下是单独的md5加密帮助文件的使用：第一步：下载md5的js文件第二步：引入js文件第三步：调用加密方法varhash
  • Android从零开始搭建MVVM架构（1），企业级项目实战讲解 m0_64603776 程序员面试android移动开发
    type=“com.lihang.databindinglover.User”/>Activity里的使用都是非常简单的，如果有不明白，稍后放出链接。这里还有特殊功能，比如我们再布局预览页面。通常会使用**tools:text=“中间的”**来预览布局，这个时候可以通过使用default的时候，即使是studio3.5里，也不提示，不过不影响。还有一点，在DataBinding里，已经处理了nul
  • Windows PC上创建大数据职业技能竞赛实验环境之六--Flume、Kafka和Flink编程 liu9ang 大数据平台hadoopkafkaflinkredis
    1Flume参看日志采集工具Flume的安装与使用方法_厦大数据库实验室博客(xmu.edu.cn)。查看Flume安装root@client1:~#flume-ngversionFlume1.7.0Sourcecoderepository:https://git-wip-us.apache.org/repos/asf/flume.gitRevision:511d868555dd4d16e6ce4
  • Android项目实战搭建 MVVM架构 le161616 android架构
    View层具体代码：activity:/***@description:*普通Activity基类，不带ViewModel,显示基本加载状态*需要获取到子类的布局id用于databinding的绑定*@authorYLChen*@date2024/9/421:34*@version1.0*/abstractclassBaseActivity(@LayoutReslayoutID:Int):AppC
  • 重生之我在CSDN学循环语句 AI26108 c++算法开发语言数据结构javapythoneclipse
    C++中的循环语句用于执行重复任务，主要有三种类型：for循环：适用于已知循环次数的情况。while循环：适用于循环次数不确定，但满足某个条件时继续执行的情况。do-while循环：类似while，但至少会执行一次循环体。1.for循环语法：for(初始化;条件;更新){//循环体}运行流程：初始化：只执行一次，用于初始化循环变量。条件：每次循环前检查，如果条件为true，继续执行循环体；否则，结
  • 211.HarmonyOS NEXT系列教程之 TabsRaisedCircle组件核心实现解析 harmonyos-next
    温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyOSNEXT系列教程之TabsRaisedCircle组件核心实现解析本文将详细解析TabsRaisedCircle组件的核心实现，包括状态管理、布局结构和交互处理。效果演示1.组件状态定义@ComponentexportstructTabsRai
  • 第五天 开始Unity Shader的学习之旅之Unity中的基础光照之漫反射光照模型 傻欣一号 unity学习游戏引擎
    UnityShader的学习笔记第五天开始UnityShader的学习之旅之Unity中的基础光照之漫反射光照模型文章目录UnityShader的学习笔记前言一、Unity中的环境光和自发光二、漫反射光照模型逐顶点光照①Shader名称②定义属性③Tags④CGPROGRAM和ENDCG⑤定义vert和frag⑥#include"Lighting.cginc"⑦fixed4_Diffuse⑧a2v
  • 【设计模式】抽象工厂模式（含与工厂方法模式的对比） 白码思 设计模式抽象工厂模式工厂方法模式
    本期我们来学习一下设计模式之抽象工厂模式，在软件开发中，工厂模式和抽象工厂模式都用于创建对象，但它们的应用场景和实现方式有所不同。本文将基于C++代码，分析抽象工厂模式的实现，并对比其与工厂方法模式的区别。1.抽象工厂模式简介抽象工厂模式（AbstractFactoryPattern）是创建型设计模式，用于创建一系列相关或相互依赖的对象，而无需指定其具体类。它提供了一个接口，允许客户端通过工厂方法
  • 敏捷需求分析之INVEST原则 舒旻 敏捷项目管理需求分析敏捷开发
    INVEST原则是什么INVEST是用户故事的六个核心标准，由敏捷教练BillWake提出，用于确保用户故事具备可执行性和价值导向性。1.I-Independent（独立的）含义：用户故事应独立于其他故事，避免依赖关系。问题：若故事A必须等待故事B完成才能开发，会导致进度阻塞。示例：❌差：“用户登录后查看订单”（依赖登录功能）。✅好：“用户通过手机号和密码登录系统”+“用户查看历史订单列表”。2.
  • 1011 World Cup Betting 理智的灰太狼 pta英文题算法c++数据结构
    1011WorldCupBetting分数20全屏浏览切换布局作者CHEN,Yue单位浙江大学Withthe2010FIFAWorldCuprunning,footballfanstheworldoverwerebecomingincreasinglyexcitedasthebestplayersfromthebestteamsdoingbattlesfortheWorldCuptrophyinS
  • L2-007 家庭房产（并查集&结构体） 理智的灰太狼 pta天梯赛2级题算法数据结构
    1.题目L2-007家庭房产分数25全屏浏览切换布局作者陈越单位浙江大学给定每个人的家庭成员和其自己名下的房产，请你统计出每个家庭的人口数、人均房产面积及房产套数。输入格式：输入第一行给出一个正整数N（≤1000），随后N行，每行按下列格式给出一个人的房产：编号父母k孩子1...孩子k房产套数总面积其中编号是每个人独有的一个4位数的编号；父和母分别是该编号对应的这个人的父母的编号（如果已经过世，则
  • web报表工具FineReport常见的数据集报错错误代码和解释 老A不折腾 web报表finereport代码可视化工具
    在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。   NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码
  • Java的WeakReference与WeakHashMap bylijinnan java弱引用
    首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea
  • Linux——（hostname）主机名与ip的映射 eksliang linuxhostname
    一、 什么是主机名 无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的； 主机名是用于什么的呢？ 答：在一个局域网中，每台机器都有一个主
  • oracle 常用技巧 18289753290
    oracle常用技巧 ①复制表结构和数据   create table  temp_clientloginUser as   select distinct userid from tbusrtloginlog ②仅复制数据 如果表结构一样 insert into  mytable  select  * &nb
  • 使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException 酷的飞上天空 exception
    有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou
  • IT系统分析师如何学习大数据 蓝儿唯美 大数据
    我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系 统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能
  • spring学习——简介 a-john spring
    Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，
  • 自定义颜色的xml文件 aijuans xml
    <?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &
  • 运营到底是做什么的？ aoyouzi 运营到底是做什么的？
    文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用
  • js面向对象类和对象 百合不是茶 js面向对象函数创建类和对象
    接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言 但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下  ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似   下面介绍一些js的类和对象的创建的技术   一:类和对
  • web.xml之资源管理对象配置 resource-env-ref bijian1013 javaweb.xmlservlet
    resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类
  • Create a composite component with a custom namespace sunjing
    https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace   When you developed a composite component the namespace you would be seeing would
  • 【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter bit1129 mongodb
     一、复本集为什么要加入Arbiter这个角色 回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。 什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a
  • Javascript开发笔记 白糖_ JavaScript
    获取iframe内的元素 通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if
  • Web浏览器Chrome打开一段时间后，运行alert无效 bozch Webchormealert无效
    今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。 试了试其他浏览器，发现都是没有问题的。 开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。 这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了 就关闭浏览器重启。   结果就好了，这也太怪异了。难道是cho
  • 编程之美-高效地安排会议 图着色问题 贪心算法 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美 高效地安排会议 图着色问题 贪心算法 * 假设要用很多个教室对一组
  • 机器学习相关概念和开发工具 chenbowen00 算法matlab机器学习
    基本概念： 机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。 它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。 开发工具 M
  • [宇宙经济学]关于在太空建立永久定居点的可能性 comsci 经济
           大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........        所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点
  • oracle 11g database control 证书错误 daizj oracle证书错误oracle 11G 安装
    oracle 11g database control 证书错误  win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面 解决办法： 是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：
  • Java I/O之用FilenameFilter实现根据文件扩展名删除文件 游其是你 FilenameFilter
    在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。 在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例 dcj3sjt126com carray
    # include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",
  • PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引 dcj3sjt126com primary
    PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。 就是 唯一 且 不能为空。INDEX 索引，普通的UNIQUE 唯一索引。 不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号   INT会员姓名  
  • java集合辅助类 Collections、Arrays shuizhaosi888 CollectionsArraysHashCode
      Arrays、Collections   1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); }      a）Arrays.asL
  • Spring Security（10）——退出登录logout 234390216 logoutSpring Security退出登录logout-urlLogoutFilter
           要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu
  • 透过源码学前端 之 Backbone 三 Model 逐行分析JS源代码 backbone源码分析js学习
    Backbone 分析第三部分  Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里， 但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件， 如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。
  • SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter 乒乓狂魔 springMVC
    这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate
  • 分布式基础知识和算法理论 bluky999 算法zookeeper分布式一致性哈希paxos
      分布式基础知识和算法理论 BY NODEXY@2014.8.12 本文永久链接：http://nodex.iteye.com/blog/2103218   在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同
  • Android Studio的.gitignore以及gitignore无效的解决 bell0901 androidgitignore
    　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了 　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store
  • 成为高级程序员的10个步骤 tomcat_oracle 编程
    What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。   Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加 提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进 历经更大的挑战。随着你的成长，各种影响力也会提高。
  • mongdb在linux下的安装 xtuhcy mongodblinux
    一、查询linux版本号： lsb_release -a  LSB Version:    :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他