谷小伟
谷小伟

元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）

今天来介绍各种元素垂直居中，很实用哦！

依然是先上图片哦，看好了，是不是有你需要的呢？

元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）_第1张图片
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）_第2张图片
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）_第3张图片
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）_第4张图片

行内元素垂直居中

  • 利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高，只能靠元素内容撑开， 但是父元素要有宽高的哈，这种相对比较简单；
  • html
   <h2>1、子元素是行内元素h2>
    <div class="big">
        <span class="small">我是行内元素spanspan>
    div>
  • css
.big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

块级元素垂直居中

  • 块级元素的话相对来说就更简单了，有很多种情况，利用margin，padding，position定位，会有很多种方法的，既然是块级元素了肯定宽高是要设置的，否则垂直居中的父子关系也就没什么意义了，随便写了一个相对简单的
  • html
/2、子元素是块级元素

    <div class="box">
        <div class="box_con">我是块级元素divdiv>
    div>
  • css
.box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性，小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }

图片垂直居中

  • 这应该是碰到最多，最不好控制的了，因为大多数我们不想去限制img的宽高，又想让img垂直居中，呼呼，代码见吧
  • html
 <h2>3、子元素是图片h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    div>
  • css
   .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

-哈哈，其实跟行内元素是一样一样的哦，只是图片的大小不要超过他爸爸哦，否则。。。。

最后，多行文本垂直居中

  • 这个用的应该不是太多吧，但是这是display：table；和display:table-cell;的神奇功效，不能放过呢
  • html
 <h2>4、多行文本垂直居中h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳，黯淡了，无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去，从满心不甘至无可奈何，最终落得个与世诀别。即使再不愿，也抵不过光阴的蹉跎，岁月的无情。似一支锋利的针，刺的多了，也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红，一滴，一滴，禁锢了世界。
            “最是人间留不住，朱颜辞镜，花辞树。”从落地开始，便踏入一个无法回头的路程，通往世界的那头。无法静止，无法再来，上天仅予了世人一次机会，一次，不可多得、万般珍贵的机会。
            当然，现在的你，或许是豆蔻年华的少年，性格作风间，满是少年的意气风发，锋芒毕露，好比“少年不识愁滋味，爱上层楼，爱上层楼”“左牵黄，右擎苍”；或是初来乍到的中年人，不必前者，中年人，更加成熟稳重了，当然，也添了更多的责任，有自己的信念，需要去守护。但，时光流逝的匆匆，就有了“无可奈何花落去，似曾相识燕归来”的诗句；又或是已生皱纹，苍苍白发的老人，届时，离路程的尽头，离结束不远了。更多的，也是释然。“高堂明镜悲白发，朝如青丝暮成雪。”操劳了一生，也要停止了。
        p>
    div>
  • css
.par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }

  • 子元素往往会100%宽高继承父级元素，所以如果想设置资源的占比小点的话，是需要给父级元素设置padding属性值的，当然，也要加上box-sizing：border-box;否则子元素会溢出哦。

    最后的最后，整篇代码


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

        .box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性，小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }
        .par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            width: 500px;
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
    style>
head>
<body>
<div id="wrapper">

   <h2>1、子元素是行内元素h2>
    <div class="big">
        <span class="small">我是行内元素spanspan>
    div>



    <h2>/2、子元素是块级元素h2>
    <div class="box">
        <div class="box_con">我是块级元素divdiv>
    div>

 
    <h2>3、子元素是图片h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    div>

    <h2>4、多行文本垂直居中h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳，黯淡了，无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去，从满心不甘至无可奈何，最终落得个与世诀别。即使再不愿，也抵不过光阴的蹉跎，岁月的无情。似一支锋利的针，刺的多了，也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红，一滴，一滴，禁锢了世界。
            “最是人间留不住，朱颜辞镜，花辞树。”从落地开始，便踏入一个无法回头的路程，通往世界的那头。无法静止，无法再来，上天仅予了世人一次机会，一次，不可多得、万般珍贵的机会。
            当然，现在的你，或许是豆蔻年华的少年，性格作风间，满是少年的意气风发，锋芒毕露，好比“少年不识愁滋味，爱上层楼，爱上层楼”“左牵黄，右擎苍”；或是初来乍到的中年人，不必前者，中年人，更加成熟稳重了，当然，也添了更多的责任，有自己的信念，需要去守护。但，时光流逝的匆匆，就有了“无可奈何花落去，似曾相识燕归来”的诗句；又或是已生皱纹，苍苍白发的老人，届时，离路程的尽头，离结束不远了。更多的，也是释然。“高堂明镜悲白发，朝如青丝暮成雪。”操劳了一生，也要停止了。
        p>
    div>

div>
body>
html>

你可能感兴趣的:(css基础样式)

  • CSS 滚动条样式修改（详细） mr_cmx csscss3html
    1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg
  • 前端性能优化——如何提高页面加载速度？ 忘川... 前端性能优化html
    1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的
  • 网页中加载 SVG 的七大方式 前端熊猫 Svgjavascripthtmlsvgvue
    一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100
  • jQuery UI CSS 框架 API lly202406 开发语言
    jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工
  • scoped作用原理及样式穿透的应用 太阳与星辰 Vue2前端面试前端vue面试
    scoped作用原理及样式穿透的应用(1)scoped作用原理(2)对第三条的详细解释(3)场景----微调第三方库样式(4)样式穿透(5)补充(1)scoped作用原理scoped是Vue样式作用域的一个特性,相信很多人经常在项目中用它来避免样式污染(即样式隔离)。当我们在一个组件中给style标签加上scoped时候,它会遵循以下三个规则，如下为组件实例生成一个唯一标识(可以称为文件指纹),给
  • 微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3） 2401_84910072 程序员微信小程序小程序
    由于微信小程序，整个项目编译后的大小不能超过1M查看做轮播图功能的一张图片大小都已经有100+k了那么我们可以把图片放在服务器上，发送请求来获取。index.wxml：这里使用小程序提供的组件autoplay：自动播放interval：自动切换时间duration：滑动动画的时长current：当前所在的页面bindchange：current改变时会触发change事件由于组件提供的指示点样式比
  • DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar） 宝码香车 #DeepSeekvue.js前端javascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的导航栏（Navbar）前言页面效果指令输入属性定义1.导航栏样式相关2.导航项相关3.响应式相关4.对齐方式相关事件定义1.导航项点击事件2.菜单折叠切换事件其他建议1.可访问性2.动画效果3.图标支
  • CSS 修改 SVG图标的颜色 小达学徒 htmlcsssvg图标颜色改变
    方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh
  • 通过nginx对arcgispro生成的矢量瓦片发布并调用（干货） 蓝布城发动机 nginxarcgis
    一、矢量瓦片的制作与发布试验采用国土调查的土地利用现状的数据，制作的矢量瓦片的流程如图所示：图1矢量瓦片数据生产流程数据生产分为两个步骤：1、数据配图先在ArcMap软件中建立好工程并配图，土地利用现状的配图样式按照《规程》设计的土地利用符号保存为style文件，在ArcMap加载土地利用数据后，通过数据中DLBM字段与符号库做样式匹配，并保存为MXD格式工程。打开ArcgisPro新建工程，导入
  • Arcgis Pro 如何使用 Arcgis 样式库 测绘小垃圾 arcgis
    在插入菜单栏中导入.style格式样式在符号系统主符号系统选择唯一值点击右上角三横线，选择将图层符号系统与样式匹配
  • 【ArcGIS Pro二次开发】(87)：样式_Style的用法 规划GIS会 ArcGISProSDKArcGISProSDK
    .Stylx类型的文件即为样式库文件，保存了符号样式。1、根据名字获取当前工程中的style//获取当前工程中的所有stylevarProjectStyles=Project.Current.GetItems();//根据名字找出指定的styleStyleProjectItemstyle=ProjectStyles.First(x=>x.Name=="村规样式");2、新建style//创建.st
  • 如何编写一个猜数字游戏的代码 Maysheeo c语言c#
    一、菜单的样式关于菜单的样式其实可以自己进行DIY,在这里只是一个示范。如下代码，按“1”开始游戏，看“0”退出游戏。我们将其定义为一个函数，不需要返回类型故此返回类型为void.voidmenu(){printf("**************************\n");printf("******1.play******\n");printf("******0.exit******\n"
  • DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation） 宝码香车 #DeepSeekvue.js前端javascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的表单验证（FormValidation）前言页面效果指令输入组件属性定义1.表单数据绑定相关2.验证规则相关3.样式和布局相关4.其他组件事件定义1.验证相关2.表单提交相关3.字段值变化相关其他可能
  • 如何使用qt开发一个xml发票浏览器，实现按发票样式显示 zhencon-com qtxmlc++python经验分享学习金融
    使用Qt开发一个按发票样式显示的XML发票浏览器，如下图所示样式：一、需求：1、按税务发票样式显示。2、拖入即可显示。3、正确解析xml文件。二、实现可以按照以下步骤进行：1.创建Qt项目打开QtCreator，创建一个新的QtWidgetsApplication项目。设置项目名称和路径，选择合适的Qt版本。2.导入必要的模块在项目的.pro文件中，确保导入了xml模块，以便使用Qt的XML解析功
  • 如何在微信小程序中实现具有@功能的输入框 恪愚 小程序的浪潮·初探微信小程序小程序input光标javascript
    你可以直接从npm中下载组件使用：npm-yun-ui-micro中的atinput组件。也可通过本文代码二次修改。本文完整代码地址：https://github.com/1314mxc/yunUI，欢迎star！有更多组件供你使用。展示背景像微信群聊、微博的输入框中输入“@”符号，能够选择人员，特殊通知某个人。这个功能涉及一个考虑点：要不要做“@人员”区域特殊样式？答：在小程序中很难做到。因为像
  • Bootstrap CSS 概览 froginwe11 开发语言
    BootstrapCSS概览引言Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap使用CSS、HTML和JavaScript来构建界面，其中CSS部分提供了丰富的样式和组件，使得开发者可以轻松实现各种设计效果。本文将为您提供一个关于BootstrapCSS的概览，帮助您了解其核心功能和用法。BootstrapCSS简介Bootstr
  • EasyX学习笔记1：线条 ͨৡۚۨC++ۨۚ࿐๊ C++游戏开发【EasyX】c++
    目录一、线条颜色1.`setlinecolor`-设置当前线条颜色2.`getlinecolor`-获取当前线条颜色二、线条样式1.`setlinestyle`-设置线条样式（宽度、类型等）三、绘制线条1.`line`-绘制两点间直线2.`lineto`-从当前位置画线到指定点3.`linerel`-相对当前位置画线4.`polyline`-绘制多段线四、其他函数1.`getlinestyle`-
  • 工具箱之父小程序源码（二）--萌宠大作战部分 jackzhuoa 微信小程序从零到万微信小程序游戏王者荣耀
    微信小程序搜一搜工具箱之父.game-container{position:relative;width:100vw;height:100vh;background-color:#000;}.game-canvas{width:100%;height:100%;}/*游戏信息样式*/.game-info{position:absolute;top:40rpx;left:40rpx;right:40
  • N年CSS开发总结的20条CSS开发技巧，适合高手新手小白！！ YOLO大师 csshtmlhtml5
    文章目录经过一晚上的努力，我写下了这篇文章，总结了我这几年在CSS开发中的想法。CSS的全称是CascadingStyleSheets，这意味这CSS是级联的样式表。你可以通过看看这个关于CSS级联的精彩网站（有测验！）来了解更多的技巧。现在大量的通过游戏来学习CSS的网站已经开始火爆，flex布局：https://flexboxfroggy.com/Grid布局：https://cssgridg
  • HTML CSS整理笔记（建议收藏） 程序员的生活1 jsweb前端html+csscssjavascripthtmlcss3
    点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-
  • 一些我不知道的HTML前端基础知识笔记 han1140521792 学习资料HTML5CSSJavaScript
    点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见
  • Python--正则表达式 索然无味io Python安全开发python正则表达式开发语言windows网络安全安全web安全
    1.日志打印与终端颜色控制1.1使用loguru打印日志fromloguruimportloggerlogger.debug("调试信息")logger.info("普通信息")logger.warning("警告信息")logger.error("错误信息")logger.success("成功信息")1.2终端颜色控制（Colorama）Colorama库用于控制终端输出的颜色和样式。字体颜色
  • 软件测试技术之跨平台的移动端UI自动化测试（上） 学掌门 软件测试ITui软件测试
    摘要：本文提出一种跨平台的UI自动化测试方案，一方面使用像素级的截图对比技术，解决传统UI自动化测试难以验证页面样式的问题；另一方面用统一部署在服务器端的JavaScript测试代码代替Android和iOS测试代码，大大提高编写测试代码的效率。该方案经过实际验证，具有效率高、质量好、便于维护等多方面优点，文中将阐述具体设计思路以及各关键步骤的实现方法，为同类测试提供借鉴。一、背景当前金融服务数字
  • 【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见组件(二) -＞ tabs 枫叶丹4 HarmonyOS前端javascript开发语言harmonyos华为华为云
    目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例1->创建Tabs在pages/index目录下的hml文件中创建一个Tabs组件。item1item2content1content2/*test.css*/.container{flex-direction:column;justify-content:center;align-items:center;
  • dochub实践-资源参考 xiaohangwj
    项目开源仓库-gitee开源仓库-github教程文档依赖后端-beego开源仓库入门教程前端-Flat-UI开源仓库样式文档
  • uniapp 可视化开发_dragUI 基于uni的可拖拽可视化编程web模板 weixin_39644021 uniapp可视化开发
    更新记录1.0.1(2019-12-02)忘了搞colorUI的模板，会导致下载项目后找不到样式的问题。更新了README添加了演示视频1.0.0(2019-12-01)2019/12/1更新代码注释，说明查看更多dragUI文档目录hope用于UNI可拖拽可视化编程在线演示demo地址一个简单创建helloworld界面的视频,github不会放视频，放在bilibli了dragUI演示视频效果
  • 【花雕学编程】ESP32 DeepSeek 之带样式的Web聊天机器人 驴友花雕 开源硬件机器人嵌入式硬件单片机c++带样式的Web聊天机器人ESP32DeepSeek
    Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用ArduinoIDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Ardui
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • 怎么把pyqt界面做的像web一样漂亮 mosquito_lover1 pythonpyqt前端
    要将PyQt界面做得像网页一样漂亮，可以从以下几个方面入手：1.使用样式表（QSS）PyQt支持类似CSS的样式表（QSS），通过QSS可以自定义控件的外观。fromPyQt5.QtWidgetsimportQApplication,QPushButton,QWidget,QVBoxLayoutapp=QApplication([])window=QWidget()layout=QVBoxLayo
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他