一颗不甘坠落的流星
一颗不甘坠落的流星

【CSS】实现元素水平垂直居中布局（七种方法）

文章目录

    • 一、绝对定位（absolute）
      • 1.1、margin 外边距
      • 1.2、transform 转换
    • 二、转换类型（display）
      • 2.1、flex 弹性布局
      • 2.2、grid 网格布局
      • 2.3、table 表格布局
      • 2.4、inline 内联元素
      • 2.5、inline-block 内联块元素

一、绝对定位（absolute）

1.1、margin 外边距

  • 核心代码：
/* 父元素 */
position: relative;

/* 子元素 */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 自适应外边距 */
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            position: relative;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">div>
    div>
body>
html>
  • 结果：
    【CSS】实现元素水平垂直居中布局（七种方法）_第1张图片

1.2、transform 转换

  • 核心代码：
/* 父元素 */
position: relative;

/* 子元素 */
position: absolute; /*设置绝对定位*/
/*相对第一个不是static定位的父盒子进行定位*/
/*static是postion的默认属性*/
left: 50%;
top: 50%;
/*距离第一个不是static定位的父元素上边框与左边框50%*/
transform: translate(-50%, -50%);
/*向左移动50%本元素宽度*/
/*向上移动50%本元素高度*/
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            position: relative;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">div>
    div>
body>
html>
  • 结果：

【CSS】实现元素水平垂直居中布局（七种方法）_第2张图片

二、转换类型（display）

2.1、flex 弹性布局

  • 核心代码
/* 父元素 */
display: flex; /* 父元素flex布局 */
justify-content: center; /* 子元素水平居中 */
align-items: center;/* 子元素垂直居中 */
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            display: flex;
			justify-content: center;
			align-items: center;
        }

        .centerbox {
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">div>
    div>
body>
html>
  • 结果：
    【CSS】实现元素水平垂直居中布局（七种方法）_第3张图片

2.2、grid 网格布局

  • 核心代码：
/* 父元素 */
display: grid;

/* 子元素 */
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
			display: grid;
        }

        .centerbox {
            background-color: aqua;
			width: 100px;
			height: 100px;
			justify-self: center;
			align-self: center;
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">div>
    div>
body>
html>
  • 结果：
    【CSS】实现元素水平垂直居中布局（七种方法）_第4张图片

2.3、table 表格布局

  • 核心代码：
/* 父元素 */
display: table-cell;  
vertical-align: middle;/* 垂直居中 */    
text-align: center;/* 水平居中 */

/* 子元素 */
display: inline-block;
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
			display: table-cell;  
			vertical-align: middle; /* 垂直居中 */    
			text-align: center; /* 水平居中 */
        }

        .centerbox {
            background-color: aqua;
			width: 100px;
			height: 100px;
			display: inline-block;
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">div>
    div>
body>
html>
  • 结果：
    【CSS】实现元素水平垂直居中布局（七种方法）_第5张图片

2.4、inline 内联元素

行内式元素水平垂直居中

  • 核心代码：
/* 子元素 */
text-align:center;
line-height:200px; /* line-height值为父元素高度 */
  • 示例：
DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Documenttitle>
    <style>
        .bigbox {
            height: 200px;
            width: 200px;
            border: 1px solid black;
        }

        .centerbox {
            background-color: aqua;
			text-align: center;
			line-height: 200px;
        }
    style>
head>
<body>
    <div class="bigbox">
        <div class="centerbox">居中文本div>
    div>
body>
html>
  • 结果：
    【CSS】实现元素水平垂直居中布局（七种方法）_第6张图片

2.5、inline-block 内联块元素

  • 实现方法：
1. 必须给容器（父元素）加上text-align：center；
2. 必须给当前元素转成行内块元素display：inline-block；再给当前元素加上vertical-align：middle；
3. 在当前元素的后面（没有回车）加上同级元素span；并且对span进行vertical-align：middle；width：0；height：100%；display：inline-block；
  • 示例：
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			div {
				width: 200px;
				height: 200px;
				border: aqua 1px solid;
				text-align: center;
			}
			p {
				width: 100px;
				height: 100px;
				border: aqua 1px solid;
				display: inline-block;
				vertical-align: middle;
			}
			span {
				width: 0;
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		style>

	head>
	<body>

		<div>
			<p>p><span>span>
		div>

	body>
html>
  • 结果：

【CSS】实现元素水平垂直居中布局（七种方法）_第7张图片

你可能感兴趣的:(CSS,笔记,css,水平居中,垂直居中,水平垂直居中)

  • 《On Java进阶卷》阅读笔记（二） m0_74823317 面试学习路线阿里巴巴java笔记python
    第3章集合主题List的行为：List是除数组之外最基本的对象存储和检索方式，基本操作如下：add()用于插入元素get()用于随机访问元素，这个操作在特定的List的实现成本不同iterator()用于返回该序列上的iteratorstream()用于生成序列中元素的StreamSet的行为：Set的意义在于测试成员身份，也可以用于删除重复元素。HashSet的输出是没有明显的顺序TreeSet
  • RPC框架Dubbo深入分析 radcb55226 程序员rpcdubbo网络协议
    《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！依赖于Zookeeper的稳定性Redis支持基于客户端双写的集群方式，性能高要求服务器时间同步，用于检查心跳过期脏数据Multicast去中心化，不需要安装注册中心依赖于网络拓普和路由，跨机房有风险SimpleDogfooding，注册中心本身也是一个标准的RPC服务没有集群支持，可能单点故障cl
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • CSS动画与变形 玲玲酱 #CSS3前端html5css3
    CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任
  • CSS3动画属性：转换(transition) 前端独秀 前端css3transition
    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
  • 从Paxos到Zookeeper笔记1——第一章：分布式架构 半臻（火白） 分布式大数据zookeeper
    第1章：分布式架构将多台机器组成分布式的处理方式越来越收到业界的青睐。1.1从集中式到分布式由于大型主机拥有卓越的性能和良好的稳定性，在单机处理方面优势非常明显。但是随着计算机系统向网络化和微型化的方向发展，传统的集中式处理越来越不适应人们的需求。大型主机的缺点：（1）操作难度大。（2）价格昂贵（3）虽然大型主机稳定，但是一旦出现故障后果严重（4）扩容非常困难阿里提出的“去IOE”运动，让计算和存
  • 【瀑布流插件】vue-masonry 春晓_春眠花落 vue.jsjavascript前端
    **最近一直在画静态页面，有个图片列表，布局很紧凑，图片宽度一样，高度不一样，但是效果图上都是紧挨在一起，我用普通的v-for循环加css布局，它会以这一行最高的那张图片的高度为准，导致图片高度小的，下一行不能紧挨在一起**如图：但是我要的效果是这样的，如图：依靠vue-masonry，实现了一些简单的功能,可参考这篇文章，讲的比较详细《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
  • 常见数据结构的简介（基本概念 & 操作 & 时间复杂度） 子诚之 编程
    文章目录0.概览1.线性表、栈和队列2.数组2.1基本操作1)时间复杂度2)案例3.字符串3.1存储结构3.2基本操作1)时间复杂度2)案例：最大公共字符串4.二叉树4.1储存结构4.2基本操作1)时间复杂度2)案例：使用字典树判断字符串是否存在5.哈希/散列表5.1哈希函数5.2基本操作1)时间复杂度2)案例：构建哈希表《重学数据结构与算法》学习笔记0.概览数据结构增删查特点线性表变长栈队列数组
  • app，waf笔记 qq_45981247 笔记
    API攻防知识点：1、HTTP接口类-测评2、RPC类接口-测评3、WebService类-测评内容点：SOAP（SimpleObjectAccessProtocol）简单对象访问协议是交换数据的一种协议规范，是一种轻量级的、简单的、基于XML（标准通用标记语言下的一个子集）的协议，它被设计成在WEB上交换结构化的和固化的信息。SOAP部署WebService的专有协议。SOAP使用HTTP来发送
  • Android技术笔记 桃花镇童长老ᥫ᭡ Androidandroid笔记
    1、TextView设置宽度（行内可包含的字符数）android:ems="12"//宽度为12个字符的宽度。android:maxEms="18"//最大宽度为18个字符的宽度。android:minEms="10"//最小宽度为10个字符的宽度。android:letterSpacing="0.1"//控制文字水平间距注意事项：1、只有在android:layout_width=“wrap_c
  • 笔记-《A Survey of Large Language Models》- 尾声 L_serein 玩转LLM笔记语言模型人工智能
    尾声:尾声:本综述是由我们研究团队在一次讨论会上计划的,我们旨在总结LLM的最新进展,为我们的团队成员提供一份高度可读性的报告。第一稿于2023年3月13日完成,我们的团队成员尽最大努力以相对客观、全面的方式囊括有关LLM的相关研究。接着,我们进行了多次细致的写作和内容修订。尽管我们付出了巨大的努力,但这份综述仍远非完美:我们可能会遗漏重要的参考文献或主题,也可能存在不严谨的表述或讨论。由于空间有
  • 本地部署model scope魔搭大模型流程 CQller python算法深度学习机器学习jupyterpytorch
    一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来
  • html5游戏引擎-Pharse.js学习笔记（一） 18520195858 游戏javascriptc/c++ViewUI
    1.前言前几天随着flappybird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。我了解过cocos-2dforhtml5和phaser.js这两个引擎，其中前者比较复杂，对于有过coco
  • 【转】时间序列分析——基于R，王燕 weixin_30780221 r语言
    《时间序列分析——基于R》王燕，读书笔记笔记：一、检验：1、平稳性检验：图检验方法：时序图检验：该序列有明显的趋势性或周期性，则不是平稳序列自相关图检验：（acf函数）平稳序列具有短期相关性，即随着延迟期数k的增加，平稳序列的自相关系数ρ会很快地衰减向0（指数级衰减），反之非平稳序列衰减速度会比较慢构造检验统计量进行假设检验：单位根检验adfTest()——fUnitRoots包2、纯随机性检验、
  • 【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 丶思想 vuevue.jsjavascript前端
    项目场景：谷歌浏览器问题描述谷歌浏览器el-dialog概率出现背景全黑，透明度不生效classv-modalopacity:0.5不生效解决方案：采用opacity:1background:0.5透明度的黑色代码如下：importVuefrom'vue'importElementfrom'element-ui'import'../element-variables.scss'/***来自Kare
  • element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer 春云资源 elementuicsshtmlcss3
    //没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效//有scoped为局部css--scoped只在本文件生效在这里设置el-dialog__header不生效//因此通过el-dialog的class进行全局css中局部定义只在当前文件生效点击打开Dialogdialog内容取消确定exportdefault{data(){return{centerDialogVi
  • 【Vim Masterclass 笔记10】S06L23：Vim 核心操作训练之 —— 文本的搜索、查找与替换操作（第二部分） 安冬的码畜日常 VimMasterclassvim笔记vim查找与替换
    文章目录S06L23Search,Find,andReplace-PartTwo1文本替换命令`:s/old/new/`2指定范围的文本替换3特例：路径的替换4文件行号的配置5要点总结（1）搜索当前行（SameLineSearching）（2）跨行搜索（Searching）（3）替换命令（SubstituteCommand）写在前面根据李笑来《自学是门手艺》的建议，梳理完知识要点后又对这章内容制作
  • 【Vim Masterclass 笔记13】第 7 章：Vim 核心操作之——文本对象与宏操作 + S07L28：Vim 文本对象 安冬的码畜日常 VimMasterclassvim笔记vim文本对象文本对象
    文章目录Section7：TextObjectsandMacrosS07L28TextObjects1文本对象的含义2操作文本对象的基本语法3操作光标所在的整个单词4删除光标所在的整个句子5操作光标所在的整个段落6删除光标所在的中括号内的文本7删除光标所在的小括号内的文本8操作尖括号内的文本9操作光标所在的标签文本10操作大括号内的文本11操作光标所在的各种括号内的文本12本节思维导图写在前面本篇
  • 企业使用统一终端管理(UEM)工具提高端点安全性 ManageEngine卓豪 统一终端管理终端管理端点安全统一终端管理UEM
    什么是统一终端管理(UEM)统一终端管理(UEM)是一种从单个控制台管理和保护企业中所有端点的方法，包括智能手机、平板电脑、笔记本电脑、台式机和IoT设备。UEM解决方案为IT管理员提供了一个集中式平台，用于跨所有作系统和设备类型部署、配置、管理和保护端点。统一终端管理(UEM)对企业有哪些好处使用UEM的企业可以简化跨各种作系统和设备类型的端点管理，而无需依赖多种工具，从而提高效率。随着整个IT
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • 使用css实现镂空效果 gurenchang css前端
    前言：最近在公司完成小程序的新手引导中遇到了要将蒙层挖空，漏出后面内容的功能，找了各种资料之后，发现了一种就使用几行css代码就实现这个效果的方式，在这里分享给各位小伙伴们。功能描述：实现下图的镂空效果代码展示：.mask{position:absolute;bottom:20rpx;left:50%;transform:translateX(-50%);width:90%;height:500r
  • 对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端 昨今 前端htmlcss
    1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
  • 【合集】Java进阶——Java深入学习的笔记汇总 & 再论面向对象、数据结构和算法、JVM底层、多线程、类加载、 web_15534274656 面试学习路线阿里巴巴java学习笔记
    前言spring作为主流的JavaWeb开发的开源框架，是Java世界最为成功的框架，持续不断深入认识spring框架是Java程序员不变的追求；而spring的底层其实就是Java，因此，深入学习Spring和深入学习Java是硬币的正反面，两者相辅相成，相互促进。本篇博客是一篇不定期持续更新的博客，是一些Java深入学习的笔记汇总。目录前言面向对象专题再论面向对象封装和关键字private，t
  • vue3 关于插槽的使用 加班是不可能的，除非双倍日工资 vue3vue.js
    插槽的使用最近把Vue3重新复习了一下,发现之前掌握的还不够清楚.所以这里做一下笔记以免忘记,话不多说直接上干货.关于Vue3的插槽插槽的使用,用过Vue的人都清楚,就是在需要插入的地方挖个坑,然后你把想要的内容放坑里面,坑就会根据你的内容自动填充,但是插槽也是有区别的:-插槽有好几种:-匿名插槽-具名插槽-作用域插槽-匿名作用域插槽-具名作用域插槽-条件插槽-动态插槽-暂时还是没弄明白插槽这么多
  • 高级前端工程师Vue面试题 盼盼盼 面试题前端前端
    HTML/CSS1.解释HTML5中的元素及其用途。元素用于通过JavaScript绘制图形，比如图表、图像处理等。它提供了一个图形上下文，可以进行2D图形绘制。2.CSS中display:none和visibility:hidden有什么区别？display:none会将元素从文档流中完全移除，不占据空间。而visibility:hidden则元素依然占据空间，只是变得不可见。3.描述CSSFl
  • 《构建之法》 –读书笔记 Lishq2004 读书笔记软件开发软件工程读书笔记构建
    《构建之法》–读书笔记lishq为什么读这本书:这是一本非常接地气的讲《软件工程》的书，第一次了解到这本书是从豆瓣上看到，看了下密密麻麻的正面评论，觉得内容应该不错。翻阅了几个章节，发现干货确实挺多。为方便大家了解，摘抄作者简介以及部分书评如下。---------------------------------------------------------------------------
  • nacos学习笔记 柠檬编程工作室 SpringCloud微服务java面试经验学习笔记
    Nacos（动态服务发现、配置管理与服务管理平台）是阿里巴巴开源的一个分布式系统架构中服务发现和配置管理的基础组件。它的主要目标是提供一个动态服务发现、配置管理和服务管理的解决方案。Nacos主要适用于微服务架构，并在云原生环境下发挥重要作用。Nacos的核心功能服务发现与健康检查Nacos提供了服务发现功能，可以帮助微服务在运行时动态发现其他服务的地址和端口。服务提供者（例如一个微服务实例）将自
  • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了 阿毛sky electronvue前端
    由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
  • 【CSS】图片比例完整展示与滚动查看 Peter-Lu #CSS开发语言前端css
    文章目录一、问题背景二、问题分析为什么`100vh`会压缩图片高度？为什么固定像素高度有效？三、解决方案与改进1.页面布局代码2.样式代码3.核心点解读容器高度图片样式滚动支持在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决100vh固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。一、问
  • nodejs：express + js-mdict 网页查询英汉词典，能播放声音 belldeep nodejsweb服务nodejsexpressjs-mdict
    向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他