佚名
佚名

HTML对于元素水平垂直居中的探讨

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。

到现在为止，探讨了很多种方法。

HTML：

XML/HTML Code 复制内容到剪贴板
  1. <body>  
  2.     <div class="maxbox">  
  3.         <div class="minbox align-center">div>  
  4.     div>  
  5. body>  
  6.   

效果图（下面几种方法效果图一样）：

HTML对于元素水平垂直居中的探讨_第1张图片

第一种： CSS绝对定位

主要利用绝对定位，再用margin调整到中间位置。

父元素：

CSS Code 复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

CSS Code 复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }  

水平垂直居中对齐：

CSS Code 复制内容到剪贴板
  1. .align-center{   
  2.     position: absolute;   
  3.     left: 50%;   
  4.     top: 50%;   
  5.     margin-left: -100px;   /*width/-2*/  
  6.     margin-top: -100px;    /*height/-2*/  
  7. }   

第二种： CSS绝对定位 + Javascript/JQuery

主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。

父元素：

CSS Code 复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

CSS Code 复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }  

水平垂直居中对齐：

CSS Code 复制内容到剪贴板
  1. .align-center{   
  2.     position: absolute;   
  3.     left: 50%;   
  4.     top: 50%;   
  5. }   
  6.   

JQuery：

JavaScript Code 复制内容到剪贴板
  1. $(function(){   
  2.     $(".align-center").css(   
  3.         {   
  4.             "margin-left": ($(".align-center").width()/-2),   
  5.             "margin-top": ($(".align-center").height()/-2)   
  6.         }   
  7.     );   
  8. });   
  9.   

第三种： CSS3绝对定位 + 位移

使用绝对定位与CSS3的 transform: translate同样也可以达到效果。

父元素：

CSS Code 复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

CSS Code 复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }   
  6.   

水平垂直居中对齐：

CSS Code 复制内容到剪贴板
  1. .align-center{   
  2.     position: absolute;   
  3.     top: 50%;   
  4.     left: 50%;   
  5.     -webkit-transform: translate(-50%, -50%);   
  6.        -moz-transform: translate(-50%, -50%);   
  7.             transform: translate(-50%, -50%);        /*向左向上位移*/  
  8. }   
  9.   

第四种： Flexbox: [伸缩布局盒模型]

要让元素水平垂直，对于Flexbox模型来说太容易了。

这里得改变一下HTML：

XML/HTML Code 复制内容到剪贴板
  1. <div class="maxbox align-center">  
  2.     <div class="minbox">div>  
  3. div>  
  4.   

父元素：

CSS Code 复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

C# Code 复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }  

水平垂直居中对齐：

CSS Code 复制内容到剪贴板
  1. .align-center{   
  2.     display: flex;   
  3.     display: -webkit-flex;       /*兼容问题*/  
  4.     justify-content: center;   
  5.     align-items: center;    
  6. }   

几种方法的比较：

第一种CSS绝对定位margin调整，兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要写不同的 .align-center 。
第二种使用脚本语言，兼容性很好且弥补了第一种的缺点。不因width，height的改变而影响水平垂直居中的效果。
第三种使用CSS3的一些新的属性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改变而影响水平垂直居中的效果。
使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全军覆没。也是不因width，height的改变而影响水平垂直居中的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助。

你可能感兴趣的:(HTML对于元素水平垂直居中的探讨)

  • 基于pytorch的神经病网络搭建学习 停走的风 pytorch学习学习pytorch人工智能
    1.pycharm中code方法的使用1.1父类重写技巧操作：在需要重写的方法上右键，选择code-->Generate>OverrideMethods。作用：自动生成重写父类或接口的方法2.简单神经网络importtorchfromtorchimportnnclassyu(nn.Module):def__init__(self,*args,**kwargs)->None:super().__in
  • 论文摘要生成器：用TextRank算法实现文献关键信息提取 Atlas Shepherd python算法自然语言处理python信息可视化
    我们基于python代码，使用PyQt5创建图形用户界面（GUI），同时支持中英文两种语言的文本论文文献关键信息提取。PyQt5：用于创建GUI应用程序。jieba：中文分词库，用于中文文本的处理。re：正则表达式模块，用于文本清理和句子分割。numpy：提供数值计算能力，如数组操作、矩阵运算等，主要用于TextRank算法的实现。importsysimportreimportjiebaimpor
  • 基于微信小程序的文章管理系统的设计与开发(源码+lw+部署文档+讲解等) #Takagi S# 微信小程序notepad++小程序
    文章目录前言项目背景介绍技术栈后端框架SSM前端框架Vue数据库MySQL（MyStructuredQueryLanguage）微信小程序具体实现截图详细视频演示系统测试系统测试目的系统功能测试系统测试结论代码参考数据库参考源码获取前言博主介绍：✌新人博主,工作经验两年+、专注于Java、小程序技术领域和毕业项目实战✌文末获取源码+数据库感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写
  • SvelteKit 最新中文文档教程（1）—— 入门指南
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • Vue 中 axios 的封装详解 遇见~未来 Vue.jsvue.js前端javascript
    一、创建Axios实例/***@fileOverview封装axios请求模块*/importaxiosfrom"axios";//创建axios实例constaxiosInstance=axios.create({//设置基础请求路径baseURL:"https://api.example.com",//设置请求超时时间timeout:5000,//设置默认请求头headers:{"Conten
  • C语言笔记——第8章 对文件的输入输出 誓死守护发际线 C语言c语言linux服务器
    文章目录一、c文件的有关基本知识二、打开与关闭文件三、顺序读写数据文件四、随机读写数据文件五、文件读写的出错检测前言：在我看来，书应该越读越薄的，所以我的笔记尽量记录了每一个点，可供复习与查阅，但没有详细的解释。我的C语言的笔记是在谭浩强老师的C程序设计(第五版)的基础上总结归纳的，结合了一些我自己的见解。如果是有其他见解,也欢迎大家提出。一、c文件的有关基本知识1.什么是文件（1）程序文件包括源
  • C++学习笔记（十三）——指针 奕天者 C++基础学习c++学习笔记
    一、指针的作用指针（Pointer）是C++中的一种特殊变量，它存储的是另一个变量的内存地址，而不是具体的值。指针有以下作用：直接操作内存地址，提高效率。动态内存分配，如new和delete。数组与字符串的操作，如遍历数组。函数参数传递，提高性能，避免数据拷贝。实现数据结构，如链表、树等。二、指针的声明、取地址和解引用(1)指针的声明作用：定义指针变量。语法：数据类型*指针变量名;示例：inta=
  • 资深跨境人分享：5款海外仓库管理软件使用感受
    在全球跨境电商高速发展的背景下，海外仓管理软件成为企业降本增效的核心工具。本文结合行业资深从业者的实战经验，对比测评ZohoBooks精英版、领星、吉客云等市场上常见的五款主流海外仓库管理软件，助您找到最适合的解决方案。一、ZohoBooks精英版作为Zoho生态系统的核心产品，ZohoBooks精英版凭借其高度集成化和全球化适配能力，非常适合出海企业使用。核心优势：智能多仓库管理：支持多仓库实时
  • 文件上传复现 是懒羊羊吖～ android
    1.PHPCMSPHPCMS头像上传功能允许用户上传ZIP压缩包，系统自动解压并删除非图片文件（如.php、.txt），利用解压后文件保留机制上传至服务器‌，使用特殊符号混淆文件名（如shell.txt?.php#.jpg），使系统误判为图片文件‌但未严格校验文件真实类型及内容，导致攻击者可构造特殊压缩包绕过删除逻辑，保留恶意文件‌//1.接收用户上传的ZIP压缩包并直接写入临时文件 file_p
  • 使用PHP对接StockTV全球金融市场数据API实战指南 php股票接口
    关键词：PHPAPI开发、金融市场数据、WebSocket实时数据、cURL实战一、项目概述StockTV作为全球领先的金融数据平台，提供覆盖股票、外汇、期货和加密货币的实时行情服务。本文将手把手教你使用PHP实现以下核心功能：✅RESTAPI调用：获取历史行情数据✅WebSocket订阅：实时价格推送✅生产级特性：异常重试、速率控制、数据缓存✅高性能优化：连接池、异步处理二、环境准备1.运行环境
  • 效率翻倍！超好用的AI+写作API接口汇总 程序员后端
    在过去几年里，人工智能（AI）技术经过众多科技公司和科研人员的不懈努力取得了巨大进步，吸引了大众的广泛关注。这些AI技术在应用领域的新闻报道也逐渐走入人们的视野，引发了对其具体应用的浓厚兴趣。今天，我们将聊一聊AI与写作文案的结合。在传统观念中，AI技术通常被限制在有明确定义任务的领域。然而，实际上，AI在创造性任务，如写作方面，也展现出了强大的潜力。人工智能写作软件提供了多种选择，可用于生成长篇
  • LangChain教程 - Agent -之 ZERO_SHOT_REACT_DESCRIPTION 花千树-010 LangChainlangchainjavascriptpromptAIGC自然语言处理人工智能python
    在构建智能AI助手时，我们希望模型能够智能地调用工具，以便提供准确的信息。LangChain提供了AgentType.ZERO_SHOT_REACT_DESCRIPTION，它结合了ReAct（Reasoning+Acting）策略，使得LLM可以基于工具的描述智能选择合适的工具进行推理和执行。本文将介绍该类型Agent的核心原理，并通过示例展示其应用。1.ZERO_SHOT_REACT_DESC
  • K8S日常问题优化 沉默的八哥 运维运维kubernetes
    在实际工作中，优化Kubernetes的性能和成本通常需要结合资源利用率分析、集群配置调整以及自动化工具的整合。以下是我在项目中实践过的一些典型优化场景和解决方案：一、资源利用率优化1.合理配置Requests/Limits问题：许多团队未准确设置Pod的requests和limits，导致资源浪费或频繁OOM。优化方法：使用Prometheus+Grafana监控Pod的实际CPU/内存使用量。
  • # 量子力学中叠加态、本征态、混合态、纯态、纠缠态、直积态的区别（百度整理来的） 猪猪侠|ZZXia 其他
    量子力学中叠加态、本征态、混合态、纯态、纠缠态、直积态的区别（百度整理来的）文章目录量子力学中叠加态、本征态、混合态、纯态、纠缠态、直积态的区别（百度整理来的）1【叠加态、本征态】：2【混合态、纯态】：3【纠缠态、直积态】：4【其他】量子究竟是个什么鬼？难道是比原子、电子更小的粒子吗？其实不是。量子跟原子、电子根本不能比较大小，因为它的本意是一个数学概念，就是“离散变化的最小单元”。离散变化是微观
  • 五大理由告诉你，软考为什么要趁早考！ 公众号-希赛网 学习方法职场和发展
    2025年上半年软考已经开始报名了，江苏、贵州、山西、大连、安徽、福建、澳门、兵团、四川、浙江等考区的报名入口已经开通。对于还在犹豫要不要报考的小伙伴们，小希建议趁早考软考。一、软考难度逐渐上升，越晚考越难拿证现在，软考的试题越来越注重考查考生的实践能力，且考得越来越细致。与前几年相比，软考的通过率有了很明显的下降。比如，2020年湖南考区软考的通过率约为23%，2021年上半年约为26%，到20
  • 湖南大学DeepSeek研究：我们该如何看待DeepSeek（附 PDF 下载） 伟贤AI之路 AI技术人工智能
    很多大学最近对DeepSeek相关研究比较多，大家可以通过阅读大学研究文档，学习AI知识及判断未来AI方面发展趋势。下面是其它大学的PDF下载厦门大学DeepSeek手册：从社会大众到高校及企业的全面应用实践研究（附PDF下载）清华北大推出的DeepSeek教程（附PDF下载链接）一、Whatisit：DeepSeek是什么从ChatGPT到DeepSeek-R1，TA到底厉害在哪里？DeepSe
  • Selenium的键盘操作，组合键（4） 一直开心 python开发语言
    #键盘操作，组合键fromtimeimportsleepfromseleniumimportwebdriverfromselenium.webdriver.common.keysimportKeysfromselenium.webdriver.common.byimportBydriver=webdriver.Chrome()driver.get('https://www.baidu.com/')
  • 将Labelme标注的数据做成COCO格式的数据集（实例分割的数据集） 一直开心 深度学习计算机视觉
    这里说明一下：Labelme标注数据时候是用的多边形框，关于标注，可以看前面的博客文章下面制作的COCO数据集是用于实例分割的数据集。COCO格式数据集的制作1、labelme标注的数据转coco数据集AnacondaPrompt里F:\rockdata下的目录运行指令：这里需要注意是在activatelabelme后，pythonlabelme2coco.pyNoObejectNoObeject
  • java中将字符串逆序输出的两种方法 一直开心 javastring
    importjava.util.Scanner;publicclassreverse{publicstaticvoidmain(String[]args){//将字符串倒顺序输出/*Scannersc=newScanner(System.in);Stringstr=sc.nextLine();char[]chArr=str.toCharArray();//char[]小写for(inti=chAr
  • KMeans实战——聚类和轮廓系数评估啤酒数据集 巷955 机器学习人工智能
    原理：在数据分析和机器学习中，聚类是一种常用的无监督学习方法，用于将数据集中的样本划分为若干个簇，使得同一簇内的样本相似度较高，而不同簇之间的样本相似度较低。KMeans算法是其中最常用的聚类算法之一。本文将介绍如何使用KMeans算法对啤酒数据集进行聚类，并使用轮廓系数（SilhouetteScore）来评估聚类结果的质量。1.数据准备首先，我们需要导入必要的库并加载数据集。本文使用的数据集是一
  • 大数据学习（61）-Impala与Hive计算引擎 viperrrrrrr 学习impalahiveyarnhadoop
    &&大数据学习&&系列专栏：哲学语录:承认自己的无知，乃是开启智慧的大门如果觉得博主的文章还不错的话，请点赞+收藏⭐️+留言支持一下博主哦一、impala与yarn资源管理YARN是ApacheHadoop生态系统中的一个资源管理器，它采用了master/slave的架构，使得多个处理框架能够在同一集群上共享资源。Impala作为Hadoop生态系统中的一个组件，可以与YARN集成，以便更好地管理
  • 大数据学习（62）- Hadoop-yarn viperrrrrrr 大数据yarn
    &&大数据学习&&系列专栏：哲学语录:承认自己的无知，乃是开启智慧的大门如果觉得博主的文章还不错的话，请点赞+收藏⭐️+留言支持一下博主哦一、YARN概述1.YARN简介Hadoop-YARN是ApacheHadoop生态系统中的一个集群资源管理器。它作为Hadoop的第二代资源管理框架，负责管理和分配集群中的计算资源。YARN的设计目标是提供一个通用的资源管理框架，使得Hadoop集群可以同时运
  • 大数据学习（60）-HDFS文件结构 viperrrrrrr 学习hdfshadoop
    &&大数据学习&&系列专栏：哲学语录:承认自己的无知，乃是开启智慧的大门如果觉得博主的文章还不错的话，请点赞+收藏⭐️+留言支持一下博主哦一、体系结构HDFS是一个标准的主从(Master/Slave)体系结构的分布式系统；HDFS集群包含一个或多个NameNode(NameNodeHA会有多个NameNode)和多个DataNode(根据节点情况规划),用户可以通过HDFS客户端同NameNod
  • 安当TDE透明加密技术：为Manus大模型构建用户会话数据保护的“安全金库” 安 当 加 密 安全
    摘要在人工智能技术深度落地的今天，大模型开发者面临的核心挑战已从算法优化转向数据安全。作为垂直领域大模型的代表，Manus凭借其强大的语义理解与个性化交互能力，在金融、医疗、教育等行业获得广泛应用。然而，其海量的用户会话数据存储与调用场景，也面临着数据泄露、非法篡改等安全威胁。上海安当基于TDE（TransparentDataEncryption）透明加密技术，推出了一套针对Manus大模型的用户
  • CUDA基础介绍 Hansen Feng linux
    CUDA基础介绍2月前阅读(6)原文一、GPU简介1985年8月20日ATi公司成立，同年10月ATi使用ASIC技术开发出了第一款图形芯片和图形卡，1992年4月ATi发布了Mach32图形卡集成了图形加速功能，1998年4月ATi被IDC评选为图形芯片工业的市场领导者，但那时候这种芯片还没有GPU的称号，很长的一段时间ATi都是把图形处理器称为VPU，直到AMD收购ATi之后其图形芯片才正式采
  • selenium鼠标操作 细节理解 斗笠戴山头 selenium
    ActionChains类常用方法误解move_by_offset(xoffset,yoffset)：常被解释为鼠标从当前位置移动到某个坐标其实这里的xoffset,yoffset是偏移量，并不是绝对坐标当首次执行move_by_offset(xoffset,yoffset)，鼠标是从(0,0)开始的此时xoffset,yoffset既是偏移量，也是坐标。所以被解释为移动到某个坐标。很多时候，我们
  • （二）Dart 变量与常量 Double Point Dartandroidflutter
    Dart变量与常量Dart变量Dart是一种具有类型推断功能的强类型语言。在Dart中，变量的类型可以通过var关键字或显式类型声明来定义。使用var关键字：Dart会根据变量的初始值自动推断其类型。varstr='thisisvar';//Dart推断str为String类型显式类型声明：您也可以直接指定变量的类型。Stringstr='thisisvar';//明确声明str为String类型
  • 供电公司-开关和闸刀的区别 Double Point 物联网iot
    在电力系统中，开关和闸刀（隔离开关）是两种重要的电气设备，它们在功能、结构和应用场景等方面存在一些区别。下面的内容知识我的理解，有可能有误，后面可能会再纠错特性开关（断路器）闸刀（隔离开关）定义一种能切断或闭合高压回路的电器，可在线路正常运行或发生故障时工作。一种没有灭弧能力的电器，主要用于隔离电源，保证检修安全。功能能切断或闭合高压回路，可在线路正常运行或发生故障时工作。主要用于隔离电源，保证检
  • 嵌入式Linux Protocol Buffer 的使用 小蔡不做梦 linux网络协议
    1、下载源码gitclonehttps://github.com/protocolbuffers/protobuf.git下载特定版本的源码gitclone-b4.0.xhttp://github.com/protocolbuffers/protobuf.git2、编译生成库和工具cdprotobufmkdirbuildcmake..//cmake-Dprotobuf_BUILD_TESTS=OF
  • 在Linux中将用户添加到组以进行SCP文件拷贝 小蔡不做梦 linux服务器运维
    在Linux中将用户添加到组以进行SCP文件拷贝在Linux环境中，如果希望某个用户能够通过SCP（SecureCopyProtocol）向特定目录拷贝文件，并且该目录仅对特定组开放权限时，你需要将该用户添加到相应的组。以下是如何实现这一目标的详细步骤。创建新组（如果必要）首先，检查是否已经存在用于管理访问权限的组。如果不存在，请使用groupadd命令创建一个新组：sudogroupaddyou
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他