谷小伟
谷小伟

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

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

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

元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）_第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基础样式)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts信息可视化数据分析
    ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
  • 装修日记（三十七） huangluan
    因为没看到实际的颜色，也没有看到样式，老婆也没有参与，久久下不了单。周日下午三四点钟样子，老婆外甥女打来电话，让老婆和我去欧派看看，如果满意可以在欧派订，毕竟欧派是大品牌，品质还是有保障的。说她的朋友老颜比较过，欧派的实际价格可能比其他牌子贵点，但按照其阴影的计算面积，贵不了多少。殴派有两间专卖店，一间是底柜木饰定制，另外一间是厨房定制。我们先在海悦城店观摩，反复比较，老婆在她外甥女的参谋下定下客
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • 一串奇特的代码 hi武林高手
    一个空的div元素，所有浏览器的渲染结果都不一样。body{display:table-cell;vertical-align:middle;//垂直居中}div{margin:atuo;height:100px;width:100px;outline:inset100pxgreen;//设置4个边框的样式outline-offset:-125px;//对轮廓进行偏移}html{display：t
  • qml Text 文本 可能只会写BUG QT6qtqml
    Text文本Text元素是QML中用于显示文本的基本元素。它可以显示静态文本，也可以通过绑定属性来显示动态文本。Text元素支持多种文本格式和样式，并且可以通过各种属性来控制文本的显示效果。常用属性text:要显示的文本内容。Text{text:"Hello,World!"}color:文本的颜色。Text{text:"Hello,World!"color:"blue"}font.family:字
  • 悠悠岁月——（法）安妮·埃尔诺 欧阳云飞
    崭新的风格和出色的语言使《悠悠岁月》成为一部杰作，安妮·埃尔诺也因此当之无愧地跻身于法国当代第一流作家之列。——“21世纪年度最佳外国小说”评选委员会一种无人称自传，刚开始读还不了解作者的写作样式，有点茫然，摸不着头脑。但是读着读着就明白了作者的写作脉络，而且有点上头，停不下来。读的时候很畅快，有一种似曾相识的感觉，回想过去，再看看现在，仿佛两个平行时空串联起来，我们也恨不得穿越回去亲身经历时代的
  • Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库 默林工作室 AxureRP原型模板axure原型模板
    作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
  • 利用Axure的动态面板和中继器完成下拉框选择功能 Dannyoung 学习之路Axure动态面板中继器
    这是在练习Axure时找到的一个案例，自己根据博主的说明一步步操作后发现不能实现对应的效果，幸好博主提供了源文件，通过对源文件的拆解，最终实现了下拉框选项的功能。这里采用的Axure版本这里就在博主提供的基础上进行说明。新建Axure文件后，第一步是新增一个动态面板，设置一下样式，主要是设置控件的大小和显示方式，为了更好地操作，自动调整为内容尺寸前面的勾可以在完成所有功能以后去勾选上。第二步，在前
  • 元宵节，再见 牛来牛去_2165
    元宵节，没有吃到元宵，只吃了一大桌酒菜。是公司聚餐，把大家伙围拢到一起，搞了几个节目，自娱自乐了一番。早起的鞭炮声，还有空气中飘荡的烟雾，预示着今天是个节日。其余的，并没有什么特殊的情怀。记得，小时候，大街上，小巷子，到处都是锣鼓喧天，热闹非凡。这样热闹的场面，也只有元宵节会有。有舞狮，有武术，样式繁多，看的人们眼花缭乱。街上人头攒动，挤扛不动，夹杂在人群中央，感觉到前所未有的安全感，贼好看。如今
  • excel打开html非常慢,解决EXCEL表格打开缓慢，文件异常臃肿庞大 史文林 excel打开html非常慢
    相信很多每天在操作EXCEL的朋友，会觉得自己的表格一天比一天大，一天比一天打开慢，但表格里面实际也没多少内容。这其中的主要原因之一，就是你喜欢在多个表格之间互相复制来复制去，粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了，导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧！1.看这个“源文件”，文件大小居然达到了
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • 微信小程序常用开发框架有哪些？ +码农快讯+ 分享微信小程序小程序开发
    想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI小程序–使用教程https://weui.io/官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大
  • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
  • 【H2O2|全栈】关于CSS（3）CSS基础（三） 过期的H2O2 【H2O2】CSS入门css前端
    目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
  • python 标准库之openpyxl的常规操作 真的学不了一点。。。 Python学习python
    目录openpyxl（Excel文件处理模块）读sheet读sheet中单元格合并单元格openpyxl模块基本用法安装方法基本使用读取Excel文档（一）获取工作表（二）获取单元格（三）获取行和列写入Excel文档（一）写入单元格（二）保存文件设置单元格样式（一）字体（二）对齐方式（三）边框（四）设置行高和列宽（五）合并和拆分单元格openpyxl(Excel文件处理模块)读sheet读取Exc
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • 【无标题】 2401_84102689 2024年程序员学习java
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
  • el-table实现多列排序 KOi.. vue.js前端javascript
    业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列排序。页面/***@header-click="handleHeaderCLick"*点击表头文字触发的监听器**@sort-change="handleTableSort"*点击表头排序标签触发定时器*/data:{tmpTotal:0,tabl
  • 网页隐藏版之一行小说阅读器 流落的小鬼 css前端javascript摸鱼神器最佳隐藏
    网页隐藏版之一行小说阅读器显示效果：懒人操作：页面鼠标右键，新建文本文档，复制黏贴以下代码，点击左上角【文件】，点击【另存为】，如下设置，后缀为.html，这样一个本地网页就完成啦~https://baidu.combody{margin:0;padding:0;}p{font-size:15px;margin:0;padding:0;}/*设置文件输入框的样式*/#fileInput{font-
  • vue el-dialog嵌套解决无法点击问题 javachen__ vue.jselementui
    产生原因:当你在el-dialog上嵌套另一个el-dialog窗口时，可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层（overlay）或其他样式问题造成的。解决方案:如果你的el-dialog组件支持append-to-body属性，你可以将对话框附加到body元素上，以避免z-index问题。外层对话框内层对话框
  • H5新增标签和属性 yx_back HtmlH5新增属性H5新增标签
    H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • css滚动条隐藏但是可以滚动 每一天，每一步 HTML/CSScss前端javascript
    要实现滚动条隐藏但仍然可以滚动的效果，可以使用CSS来隐藏滚动条，同时允许鼠标的滚轮或触摸板滚动。/*隐藏滚动条，但仍可滚动*/.scrollable{overflow:auto;/*保持内容可滚动*/scrollbar-width:none;/*对于现代浏览器，隐藏滚动条*/}/*针对IE和Edge的隐藏滚动条样式*/.scrollable::-webkit-scrollbar{display:
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • 使用sass的混合插入模式进行@media响应式媒体查询做自适应开发 miao_zz csssass媒体前端
    使用sass的混合插入模式进行@media响应式媒体查询做自适应开发//定义混合指令并传参数@mixinrespond($breakname){//控制指令@if$breakname=='phone'{//手机端=1201@media(min-width:1201px){//向混合样式中导入内容@content;}}}.mz-col{border:1pxsolid$borderColor;@inc
  • 小程序的三种弹框showToast、showModal、showLoading 前端-文龙刚 小程序小程序
    小程序常用的三种弹框有：showToast：消息提示框showModal：模态对话框showLoading：加载框第一：showToast：消息提示框默认的样式自定义icon图标具体代码如下：wx.showToast({title:'成功',//提示内容icon:'loading',//图标（success成功图标、error失败图标、loading加载图标、none不显示图标）image:'..
  • 原生小程序实现根据自己的设计稿自定义地图上的气泡，并点击触发其事件 前端-文龙刚 小程序小程序
    场景：在原生小程序地图上，自定义markers点的气泡样式，并且点击这些样式获取对应的信息，然后触发你自己后续的操作最终的效果：功能介绍：1、实现了地图3D/2D的切换；2、回到当前定位；3、切换视角4、地图上圈出不同的区域5、自定义坐标点的图片样式因代码太多了，所以想要具体代码的伙伴，可以私信我获取(#^.^#)
  • 矩阵求逆（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其他