韩曙亮
韩曙亮

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

文章目录

  • 一、问题提出
  • 二、绝对定位 居中设置
    • 1、设置固定尺寸
    • 2、先偏移50%再回退固定值
  • 三、绝对定位元素 水平 / 垂直 居中





一、问题提出


绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

相对定位 的 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin: auto; 样式的方式 令盒子水平居中 ;


举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点 的容器需要居中对齐 ;

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )_第1张图片





二、绝对定位 居中设置



1、设置固定尺寸


使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ;


2、先偏移50%再回退固定值


父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ;

先设置 50% 的 宽度 / 高度 偏移量 , 然后再往回退 盒子一半 宽度 / 高度 的偏移量 ;


以 水平居中为例 : 200 x 200 大小的盒子 , 通过设置

  • 首先 , 设置 left 左边偏移为 50% , 让子元素的左侧 移动到 父容器水平中心位置 ;
	left: 50%;

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )_第2张图片

  • 然后 , 设置 负数的 左外边距 , 令 子元素 向左移动 自身 宽度的一半 , 需要提前测量 子元素的宽度 ;
	margin-left: -100px;

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )_第3张图片





三、绝对定位元素 水平 / 垂直 居中


为 80x80 像素尺寸的元素设置 水平 / 垂直 居中 ;

  • 设置水平居中 : 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left: -40px 向左移动 40 像素 ;
		/* 绝对定位元素 - 水平居中 */
		.top {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器左上角 */
			/* 上边偏移 0 紧贴顶部 */
			top: 0;
			/* 左边偏移 50% 左侧紧贴水平居中位置 */
			left: 50%;

			/* 再向做移动 40 像素, 水平居中 */
			margin-left: -40px;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: blue;
		}
  • 设置垂直居中 : 先设置子元素顶部移动到父容器垂直中心位置 top: 50%; , 然后再向上移动 40 像素 ;
		/* 绝对定位元素 - 垂直居中 */
		.bottom {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器右下角 */
			/* 顶部移动到垂直中心位置 */
			top: 50%;
			/* 右边偏移 0 紧贴右侧 */
			right: 0;

			/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */
			margin-top: -40px;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: red;
		}

代码示例 :

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位示例title>
	<style>
		/* 最外层 父容器盒子 */
		.box {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: relative;

			/* 内容尺寸 通过测量图片获得 */
			width: 300px;
			height: 200px;

			/* 边框 1 像素实线 */
			border: 1px solid #ccc;
			/* 上下设置 100 像素外边距 水平居中 */
			margin: 100px auto;
			/* 子元素与 */
			padding: 10px;

			background-color: pink;
		}

		/* 标准流元素 */
		.center {
			width: 300px;
			height: 200px;

			background-color: purple;
		}

		/* 绝对定位元素 - 水平居中 */
		.top {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器左上角 */
			/* 上边偏移 0 紧贴顶部 */
			top: 0;
			/* 左边偏移 50% 左侧紧贴水平居中位置 */
			left: 50%;

			/* 再向做移动 40 像素, 水平居中 */
			margin-left: -40px;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: blue;
		}

		/* 绝对定位元素 - 垂直居中 */
		.bottom {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器右下角 */
			/* 顶部移动到垂直中心位置 */
			top: 50%;
			/* 右边偏移 0 紧贴右侧 */
			right: 0;

			/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */
			margin-top: -40px;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: red;
		}
	style>
head>
<body>
	<div class="box">
		<div class="top">div>
		<div class="center">div>
		<div class="bottom">div>
	div>
body>
html>

执行效果 :

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )_第4张图片

你可能感兴趣的:(CSS,css,html,前端,绝对定位,绝对定位居中)

  • VUE前端实现防抖节流 Lodash 2501_91133275 前端vue.jsjavascript
    写在前面：兄弟们，我手里有个长期项目，考虑接私活的可以看看我GitHub！https://github.com/ccy-233/coder2retire方法一：采用Lodash工具库Lodash是一个一致性、[模块化]、高性能的JavaScript实用工具库。（1）采用终端导入Lodash库$npmi-gnpm$npmi--savelodash（2）应用示例：搜索框输入防抖在这个示例中，我们希望用
  • 从零开始学机器学习——构建一个推荐web应用 努力的小雨 机器学习机器学习前端人工智能
    首先给大家介绍一个很好用的学习地址：https://cloudstudio.net/columns今天，我们终于将分类器这一章节学习完活了，和回归一样，最后一章节用来构建web应用程序，我们会回顾之前所学的知识点，并新增一个web应用用来让模型和用户交互。所以今天的主题是美食推荐。美食推荐Web应用程序首先，请不要担心，本章节并不会涉及过多的前端知识点。我们此次的学习重点在于机器学习本身，因此我们
  • 【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 【前端入门】应该了解和知道的几个国内外前端开发资源网站 爱上大树的小猪 前端
    与大家分享一下几个国内外前端开发资源网站国际资源MDNWebDocs(MozillaDeveloperNetwork)用途：MDN是Web技术领域最全面的文档库之一，涵盖了HTML、CSS、JavaScript以及浏览器API等。链接:https://developer.mozilla.orgW3Schools用途：适合初学者学习Web技术，提供从基础到进阶的教程，同时还有在线练习环境。链接:ht
  • 【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术 爱上大树的小猪 前端ocr前端框架react.js
    本文仅介绍第三方依赖包Tesseract.js，Tesseract.js是一个基于网页的OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。支持多框架编译，如Vue、React等，这里展示步骤为React开发。下面直接进入主题：附Tesseract.js官方（https://github.com/naptha/tesseract.js）下载安装依赖包npminst
  • HTML深度解读 Small踢倒coffee_氕氘氚 经验分享笔记
    ##引言HTML（HyperTextMarkupLanguage）是构建网页的基础语言。自1991年由TimBerners-Lee发明以来，HTML已经经历了多次版本更新，从HTML1.0到HTML5，每一次更新都带来了新的特性和功能。本文将深入探讨HTML的核心概念、结构、标签、语义化以及HTML5的新特性。##一、HTML的核心概念###1.1什么是HTML？HTML是一种标记语言，用于创建和
  • 前端 - js - - 防抖和节流 cv高级工程师YKY vue.js前端javascript
    1、防抖短时间内重复执行相同操作时只执行最后一次常见场景：浏览器输入文字后下面会有模糊提示实现思路：延时器控制事件在几秒后执行每次触发事件时都会重置延时器constfn=()=>{//先定义timeout避免第一次触发时clearTimeout报错lettimeout;//每次触发事件重置延时器clearTimeout(timeout)//规定一秒后再执行timeout=setTimeout(()
  • 前端存储后端响应数据方式详解 z2637305611 前端
    在前端存储后端响应数据是常见需求，可以优化性能（减少重复请求）、支持离线访问或提升用户体验。以下是超详细的实现方式和注意事项：一、前端存储后端数据的核心步骤1.获取后端数据使用fetch或axios发送请求：//使用fetchfetch('https://api.example.com/data').then(response=>response.json()).then(data=>saveDa
  • 计算机毕业设计springboot教务管理系统 0k1c1源码+系统+程序+lw文档+部署 呦呦网络 springbootjavamysql
    计算机毕业设计springboot教务管理系统0k1c1源码+系统+程序+lw文档+部署计算机毕业设计springboot教务管理系统0k1c1源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5
  • 【大模型开发】大模型转换为 NCNN 格式并在 微信小程序 中进行调用 云博士的AI课堂 大模型技术开发与实践哈佛博后带你玩转机器学习深度学习微信小程序小程序NCNN小程序调用大模型大模型部署大模型优化部署微信小程序
    以下内容将介绍如何将大模型转换为NCNN格式并在微信小程序中进行调用。我们会从整体流程、模型转换工具、NCNNWebAssembly（WASM）编译与集成、小程序前端代码示例等方面进行详细讲解，并在最后给出优化方向与未来建议。目录背景与整体流程概述准备工作2.1常见模型格式与转换思路2.2环境与工具安装模型转换为NCNN格式3.1以ONNX模型为例3.2使用onnx2ncnn工具NCNN在微信小程
  • python的格式转换库_3个Python PDF库，提取信息、转换格式、分割剪裁有它就够了！... 来朝三博士 python的格式转换库
    PDFMiner：PDFMiner是一个从PDF文档中提取信息的工具。与其他PDF相关的工具不同，它只用于获取和分析文本数据。PDFMiner能获取页面中文本的准确位置，以及字体或行等其他信息。它还有一个PDF转换器，可以将PDF文件转换成其他文本格式(如HTML)。还有一个可扩展的解析器PDF，可以用于文本分析以外的其他用途。(地址https://github.com/euske/pdfmine
  • Vue 3 vs Vue 2：深入解析从性能优化到源码层面的进化 银之夏雪 vue.js性能优化前端
    Vue.js是当今前端开发中最受欢迎的框架之一。随着Vue3的发布，它在性能优化、开发体验、响应式系统、构建工具和热更新等多个方面都带来了巨大提升。本文将深入剖析Vue3的进化，包括其源码实现方面的优化，如diff算法、静态标记、编译优化，以及Vue3在热更新、构建工具上的改进。1.性能提升：底层优化的革命1.1响应式系统的改进：从Object.defineProperty到ProxyVue2的响
  • python中beautifulsoup怎么安装_Python3爬虫中Beautiful Soup库的安装方法是什么 柳虎璐 Python3BeautifulSoup安装教程lxml爬虫
    Python3爬虫中BeautifulSoup库的安装方法是什么发布时间：2020-08-0517:38:09来源：亿速云阅读：70作者：小新这篇文章将为大家详细讲解有关Python3爬虫中BeautifulSoup库的安装方法是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。BeautifulSoup是Python的一个HTML或XML的解析库，我们可以用它
  • 如何减少跨团队交付摩擦？——基于 DevOps 与敏捷的最佳实践 网罗开发 实战实战源码devops运维
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • 深度解析前端面试八股文：核心知识点与高效应对策略 赵大仁 前端面试职场和发展
    深度解析前端面试八股文：核心知识点与高效应对策略1.引言前端面试是每位开发者迈向职业进阶的重要环节，涉及HTML、CSS、JavaScript、性能优化、浏览器原理、网络、安全、框架（Vue/React）等核心知识点。本文不仅会覆盖前端面试的高频八股文，还会结合生动的案例，让你在面试时能够脱离死记硬背，从理解中突破！2.HTML&CSS高频考点2.1HTML语义化问题：什么是HTML语义化？为什么
  • AJAX PHP：深入理解与实际应用 wjs2024 开发语言
    AJAXPHP：深入理解与实际应用引言随着互联网技术的不断发展，前端与后端交互变得更加频繁。AJAX（AsynchronousJavaScriptandXML）和PHP（HypertextPreprocessor）作为两种流行的技术，在实现动态网页和应用程序方面扮演着重要角色。本文将深入探讨AJAXPHP的工作原理、应用场景以及实际开发中的注意事项。AJAXPHP概述AJAXAJAX是一种基于Ja
  • python内存泄露 weixin_39810989 内存泄漏pythonmalloc
    定位工具及使用1.tracemalloc可以通过创建快照的方式记录当前的内存占用情况。从而可以比较快照与快照之间的内存占用差异。可以获取内存块的回溯，定位到内存占用最多的文件和代码行。osgeo.cn/cpython/library/tracemalloc.html2.pympler可以创建快照（summaries）进行内存块占用对比frompympler.classtrackerimportCl
  • 【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式 贫苦游商 学习设计模式mvc业务代理模式组合实体模式数据访问对象模式传输对象模式
    【从零开始学习计算机科学】设计模式（五）MVC模式、业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位器模式、传输对象模式MVC模式主要组件工作原理优点缺点适用场景总结业务代表模式主要特点组成部分工作原理优点缺点适用场景总结组合实体模式主要特点组成部分工作原理适用场景优点缺点总结数据访问对象模式主要特点组成部分工作原理适用场景优点缺点总结前端控制器模式主要特点组
  • 解析 iframe bbppooi 测试学习javascriptselenium测试用例功能测试模块测试
    iframe（inlineframe，内联框架）是HTML标签，用于在一个网页内嵌入另一个网页。它通常用于：广告嵌入（如GoogleAds）视频播放器（如YouTube、Bilibili）第三方登录页面（如Google登录）在线支付（如支付宝、微信支付）嵌入iframe示例主页面在上面的代码中，iframe的src属性指向https://www.example.com，宽度800px
  • PyQt6嵌入HTML5内容教程 mosquito_lover1 pythonpyqthtml5
    在PyQt6中嵌入HTML5内容可以通过QWebEngineView实现。QWebEngineView是一个基于Chromium的浏览器引擎，能够渲染HTML5内容。以下是一个简单的示例，展示如何在PyQt6中嵌入HTML5页面：1.安装PyQt6和PyQt6-WebEnginepipinstallPyQt6PyQt6-WebEngine2.创建PyQt6应用程序并嵌入HTML5内容imports
  • 【Vue3+Vite指南】全局引入SCSS文件后出现Undefined mixin？一招解决命名空间陷阱！ 积水成江 前端scss前端html5vue.js
    【Vue3+Vite全局引入SCSS指南】解决Undefinedmixin错误的完整方案本文目录前置准备：安装SCSS环境问题现象与错误分析根本原因：Sass模块化的命名空间三大解决方案详解方案1:显式命名空间调用方案2:全局暴露命名空间方案3:主文件聚合导出操作验证步骤扩展：@use与@import对比最佳实践与避坑指南常见问题FAQ️前置准备：安装SCSS环境{#-前置准备}步骤1：安装Sas
  • html css 笔记 小箌 htmlcss笔记
    01_浏览器相关知识五大主流浏览器：ChromeSafariIEFirefoxOpera(拥有自己的内核)四大内核:webkitTridentGeckoblink.02_网页相关知识构成网址网站网页网页标准：结构表现行为分别对应HTMLCSSJavaScript03_HTML简介HTML是什么译为：标记语言超文本：比普通的文本信息含量更多04_HTML初体验保存：Ctrl+S后缀：.html程序员
  • 网页制作12-html,css,javascript初认识のJavascipt脚本基础 Ama_tor 网页制作专栏javascript开发语言ecmascript
    一、JavaScript的三种基本使用方法:body|head|外部网页效果：运行代码：.html无标题文档functionn1(){document.getElementById("ama01").innerHTML="NO.3这是head中的JavaScript函数";}document.write("NO.1HELLOWORLD")//Document要小写NO.2这是body中的JavaS
  • 数据库查询优化：提升性能的关键实践
    title:数据库查询优化：提升性能的关键实践date:2025/1/30updated:2025/1/30author:cmdragonexcerpt:在当今数据驱动的商业环境中，数据库的性能直接影响着应用程序的响应速度和用户体验。查询优化是性能调优的重要组成部分，通过对SQL查询的分析与改进，减少查询执行时间和资源消耗，从而提升整体系统效率。categories:前端开发tags:查询优化数据
  • CSS教程--动画 前段被迫创业 前端学习css3前端css
    目录一．２Ｄ转换１.ｔｒａｎｓｌａｔｅ（）平移操作２.ｒｏｔａｔｅ（）旋转操作３.ｓｃａｌｅ（）放大缩小操作３.１.ｓｃａｌｅＸ（）３.２.ｓｃａｌｅＹ（）４.ｓｋｅｗ（）倾斜操作二．３Ｄ变换１.ｒｏｔａｔｅＸ（）２.ｒｏｔａｔｅＹ（）３.ｒｏｔａｔｅＺ（）三．ＣＳＳ过渡１.ｔｒａｎｓｉｔｉｏｎ属性２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ属性３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ属性
  • Go+Vue通用后台管理项目实战 - 带源码课件 6v6-博客网 6v6-博客 golangvue.js开发语言
    Go+Vue通用后台管理项目实战-带源码课件课程描述本课程从0到1搭建前后端项目，帮助学员掌握Go+Vue开发前后端分离项目的能力。通过实战项目，学员将学习到如何设计系统架构、实现核心功能模块，并最终完成一个完整的后台管理系统。课程亮点前后端分离：基于Go语言后端和Vue前端，实现高效开发模式。实战项目：通过完整项目实战，掌握从需求分析到部署上线的全流程。源码提供：附带完整源码，方便学员学习和二次
  • C# 通过chrome插件将HTML网页转换为PDF Eiceblue C#.NETPDFc#chromehtml
    将HTML网页内容转换为PDF格式能方便文档的后续打印、存档和分享等。之前介绍过如何通过QT插件将HTML转为PDF文件，本文将介绍另一个新的转换方法，通过谷歌浏览器Chrome插件将HTML网页转PDF文件。首先需要安装Spire.PDFfor.NET库（10.7.21版本及以上）。可以通过此链接下载产品包后手动添加引用，或者直接通过NuGet安装。https://www.e-iceblue.c
  • JavaEE系统架构师学习路线(基础篇) 淘小五
    大纲：第1阶段(Java程序员)-Java语言基础第2阶段(Java初级软件工程师)-JSP、Servlet、HTML、CSS、JS、Bootstrap、XML、AJAX、MySQL、SQLServer、Oracle第3阶段(Java中级软件工程师)-Struts2、Spring、Hibernate、SpringMVC、Mybatis、Shiro、JVM第4阶段(Java高级软件工程师)-WebS
  • 基于python+mysql+vue的医院门诊管理系统 自不量力的A同学 mysql
    主要使用技术环境需要1.运行环境：python3.82.IDE环境：pycharm+mysql5.73.数据库工具：Navicat154.硬件环境：windows10/118G内存以上；或者MacOS；5.数据库：MySql5.7版本；技术栈后端：python+django前端：vue+CSS+JavaScript+jQuery+antdesign代码结构server目录是后端代码web目录是前端
  • 基于python的家政预约管理系统源码+运行步骤 冷琴1996 Python系统设计python开发语言
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。学习技术问题可以留言。整个平台包括前台和后台两个部分。前台功能包括：首页、详情页、用户中心、家政入驻模块。后台功能包括：总览、家政管理、分类管理、标签管理、评论管理、用户管理、运营管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_ji
  • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
            这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
  • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
    内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
  • web.xml报错 crabdave web.xml
    web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
  • 泛型类的自定义 麦田的设计者 javaandroid泛型
       为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
  • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
    清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
  • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
    1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
  • linux下安装maven 无量 mavenlinux安装
    Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
  • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
    1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
  • 关于领号活动总结 alafqq 活动
    关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
  • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
    java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
  • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
    如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
  • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
    JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
  • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
    父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
  • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
    1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
  • WAS各种脚本作用大全 ronin47 WAS 脚本
    　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
  • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
    借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
  • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
    Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
  • spring 定时任务中cronExpression表达式含义 chicony cronExpression
    一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
  • Nutz配置Jndi ctrain JNDI
    1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
  • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
    在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
  • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
      Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
  • Android实用小技巧 dcj3sjt126com android
    1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
  • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
    转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
  • 有“品”的程序员 gongmeitao 工作
    完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
  • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
    本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
  • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
    SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
  • 链表栈 luyulong java数据结构
    public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
  • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
      Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
  • spring配置定时任务 stunizhengjia springtimer
    最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
  • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他