cesiuming
cesiuming

css 居中布局的几种常用方式

水平居中

1、第一种方案：

父元素设置：text-align: center;
子元素设置：display: inline-block;

优点：浏览器兼容性比较好
缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示的,解决方案在子级元素中增加text-align:lfet;


     
子级元素




.parent {
    width: 100%;
    height: 300px;
    background: #ccc;
    /**
        center 居中
        left 居左
        right 居右
     */
    text-align: center;
}
.child {
    width: 300px;
    height: 300px;
    background: rgb(202, 50, 50);
    /**
        display: block;  块级元素
        display: inline; 内联元素
        display: inline-block; 行内块级元素
    */
    display: inline-block;
    text-align: left;
}

2、第二种方案：

优点：只需要设置子级元素进行设置就可以实现水平居中布局的效果
缺点：如果子级元素脱离文档流，导致margin属性的值是无效的（将元素设置为浮动float、绝对定位absolute或者固定定位fixed就会脱离文档流）


     
子级元素




.parent {
    width: 100%;
    height: 300px;
    background: #ccc;
}
.child {
    width: 300px;
    height: 300px;
    background: red;

    /**display: ; 
        table  和  block 都可以实现水平居中效果
    */
    display: table;
    /** margin 属性：外边距
        一个值：上右下左
        二个值：上下，左右
            auto: 表示浏览器自动分配
        三个值：上，左右，下
        四个值：上右下左
    */
    margin: 0 auto;
}

3、第三种解决方案

优点：无论父级元素是否脱离文档流，都不影响子级元素水平居中效果
缺点：transform属性是css3中新增的属性，浏览器支持情况不好

.parent {
    width: 100%;
    height: 300px;
    background: #ccc;

    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;

    /**
        把当前元素设置为绝对定位之后：
        - 父级元素没有开启定位，当前元素是相对于页面定位的
        - 父级元素开启定位，当前元素是相对于父级元素的
    */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

垂直居中

1、第一种：table-cell

.parent {
    width: 300px;
    height: 600px;
    background: #ccc;

    /** 
        display属性：
        table: 设置当前元素为元素
        table-cell: 设置当前元素为元素（单元格）
    */
    display: table-cell;
    /** 
        vertical-aligin属性：用于设置文本内容的垂直方向对齐方式
        top: 顶部对齐
        middle: 居中对齐
        bottom: 底部对齐
    */
    vertical-align: middle;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

2、第二种：position + transform
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

3、第三种：行内块级元素
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}
.parent::after {
    content: ' ';
    height: 100%;
}
.parent::after, .child {
    display: inline-block;
    vertical-align: middle;
}

4、第四种：flex
优点：内容块的宽度任意，可用于更复杂高级的布局技术
 缺点：IE8/IE9不支持
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    display: flex;
    align-items: center;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

5、第五种：postion + margin-top负高度的一半
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 50%;
    margin-top: -150px; // 负的高度的一半
}

6、第六种：绝对定位 + left、right、bottom、top+margin
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7、第七种：display:grid
.parent {
    width: 300px;
    height: 600px;
    background: #ccc;
    display: grid;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
}

居中部局
1、table+margin 实现水平方向的居中，table-cell + vertical-aligin实现垂直方向居中
.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: table-cell;
    vertical-align: middle;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
    display: block;
    margin: 0 auto;
}

2、absolute + transform
.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    position: relative;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3、display:grid + margin:auto
.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: grid;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
}

4、flex
.parent {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 300px;
    height: 300px;
    background: red;
}

圣杯布局
    

  • 圣杯布局是来源于该布局效果类似圣杯而得名，简单来说，就是指三行三列布局。
    • 

  • 主要是实现中间主体部分中的左右定宽+中间自适应的布局效果。
    • 


   
1

   
2

   
3




.parent{
    height: 300px;
    margin-left: 300px;
    margin-right: 300px;
}
.left,
.center,
.right{
    height: 300px;
    float: left;
}
.left,
.right{
    width: 300px;
}
.left{
    margin-left: -100%;
    position: relative;
    left: -300px;
    background: chocolate;
}
.center{
    background: darkcyan;
    width: 100%;
}
.right {
    background: darkred;
    margin-left: -300px;
    position: relative;
    right: -300px;
}

双飞翼布局
    

  • 针对圣杯布局的优化解决方案，主要优化了圣杯布局中开启定位的问题
    • 


  

      

  

  

  




.parent{
    height: 300px;
}
.left,
.center,
.right{
    height: 300px;
    float: left;
}
.left,
.right{
    width: 300px;
}
.left{
    margin-left: -100%;
    background: chocolate;
}
.center{
    background: darkcyan;
    width: 100%;
}
.right {
    background: darkred;
    margin-left: -300px;
}
.inner{
    height: 300px;
    margin: 0 300px;
}

等分布局

  

    

    

    

    

  




方案一：
#parent-box {
  overflow: hidden;
}
#parent {
    height: 300px;
    margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
    width: 25%;
    height: 300px;
    float: left;
    padding-left: 10px;
    box-sizing: border-box; /** 盒子模型为border-box */
}
.inner {
    height: 300px;
}
.col1 .inner {
    background: darkred;
}
.col2 .inner {
    background: darksalmon;
}
.col3 .inner {
    background: darkslateblue;
}
.col4 .inner {
    background: darkviolet;
}

方案二：
#parent-box {
    overflow: hidden;
}
#parent {
    width: 1400px;
    display: table;
    margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
    height: 300px;
    display: table-cell;
    box-sizing: border-box;
    padding-left: 10px;
}
.inner {
    height: 300px;
}
.col1 .inner {
    background: darkred;
}
.col2 .inner {
    background: darksalmon;
}
.col3 .inner {
    background: darkslateblue;
}
.col4 .inner {
    background: darkviolet;
}

等高布局
第一种
#parent-box {
    display: table;
}
.left,.right {
    width: 300px;
    display: table-cell;
}
.left {
    background: #ccc;
}
.right {
    background:#909090;
}

第二种
#parent-box {
    overflow: hidden;
}
.left,.right {
    width: 300px;
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left {
    background: #ccc;
}
.right {
    background:#909090;
}

css3多列布局
columns
#parent {
    /* column-count: 4;
    column-width: 300px; */
    columns: 4 300px;
    column-gap: 1.2rem; // 默认为1rem，用于设置列与列之间的间距，该属性需要为多列显示时的元素设置
    column-rule: 2px blue solid; // 用于定义列与列之间的边框，其中包括边框宽度、颜色、样式
}
.col1,.col2,.col3,.col4 {
    height: 300px;
}
.col1 {
    background: darkred;
}
.col2 {
    background: darksalmon;
}
.col3 {
    background: darkslateblue;
}
.col4 {
    background: darkviolet;
}






你可能感兴趣的:(css 居中布局的几种常用方式)






    

  • 美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15%
美股投资
财经人工智能大数据新浪微博微信微信公众平台百度金融

    在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
    

    • 

  • 亲亲往这里来
神道仙灵

    图片发自App…哈…哈……上次……失误…失误……此…次……哈…哈…哈……我不会……哪么……大舌头……哪么……呆笨……直…白…了…！…亲们……看见…我口中……喝的…啥了么……呵…呵…呵……看见…我手上……又…拿的……啥了…么……哈…哈…哈……哈我的小宝贝
    

    • 

  • 别人能伤害你，是你允许的。
1125198e6b7d

    不要对别人抱有太大期望，保护自己的最佳方式,就是从不高估自己在别人心中的份量。能伤害你的从来不是别人的无情，而是你心存幻想的坚持。及时止损，不盼望就不会失望。相识很久的关系，明明内心很不舒服，却还要装作若无其事的样子，强撑着去面对。一次又一次为了迎合而迎合，自我qipian，精神内耗。对于那些不能带给你任何积极能量的人，我们真正要做的就是及时止损。伤害你的人从来没想过帮助你成长，真正让你成长的是你
    

    • 

  • 2023-02-16
执剑饮烈酒

    1、开心点，反正谁也别想活着离开这个世界。——朱德庸2、我一直以为爱的反义词是不爱，直到现在我才明白，爱的反义词是遗忘。——《寻梦环游记》3、人生的最高境界是佛为心，道为骨，儒为表，大度看世界。技在手，能在身，思在脑，从容过生活。——南怀瑾4、如果一个民族沦落到，只剩下把升官发财当成最终目标和追求的时候，那么这个民族就危险了，一旦金钱和权利成了唯一的信仰，那将是悲哀的。——鲁迅5、人和人如果不在一
    

    • 

  • 为什么wal会 提升数据库性能
浩澜大大
数据库

    由于对于一个数据库内会存在很多张表，那么当数据库更新表数据时（1）直接写入磁盘实际写入的位置，会根据表的不同对应到不同的磁盘位置，在写入数据的时候，就会不停的寻找磁盘地址，找到地址后再去写入，对于机械硬盘来说，无规律的寻址是非常耗时的，对应SSD来说虽然性能提升很多，但是也会消耗时间；（2）先写入日志，在写入磁盘（WAL）WAL的过程，由于总是按照在文件末尾追加，只要找到文件写入位置，写入修改后，
    

    • 

  • 【Python】一文详细介绍 py格式 文件
高斯小哥
Python基础【高质量合集】python新手入门学习

    【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
    

    • 

  • 《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情
迷影咖啡

    作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在
    

    • 

  • 迎接2019
唯有杜康1994

    告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工
    

    • 

  • 亲子日记之祝姑姥姥生日快乐（282）
冰心雨露_d504

    2021年7月18日，周日，晴周日上班的不上班，上学的不上学，全家都属于休息状态，洗衣做饭是上午的主要任务，中午休息一会儿，下午比较晚了出去给梦怡买了二年级上册的口算题卡，然后去参加姑姑的生日聚餐，本来姑姑应该是周一生日，因为周一都要上班，就提前到周日过了，说是过生日其实就是想借此机会一家人聚聚，毕竟平常都忙，没有时间聚在一起，梦怡还给姑姥姥做了生日贺卡，虽然长相一般，重在心意。生日快乐
    

    • 

  • 100天30本书读书计划（2018-06-11）DAY 62
一个姜姜

    【书名】当我谈跑步时，我谈些什么【作者】村上春树【读书页数】51--128/187【读书时间】2018年6月11日【精彩句子】01肌肉难长，易消。赘肉易长，难消。P5502肌肉也同有血有肉的动物一般无二，它也愿意过更舒服的日子，不继续给它负荷，它便会心安理得地将记忆出去。想再度输入的话，必须得从头开始，将同样的模式重复一遍。P7703不管怎样，反正得坚持跑步。每天跑步对我来说好比生命线，不能说忙就
    

    • 

  • 植物小记
番茄秧子

    小时候，我养过一院子的花。今年，我重新开始从头开始养一点儿植物。别人说那也只是别人说临到快过年，我逛了一趟花市，买了两棵水仙花。路过另外一个卖水仙的摊位，霸气的卖花小妹瞧了一眼我捧着的那两棵弱小，说了一句：“你那个水仙不行，都不会开花的。”以我的脾气，这当然不能相信啊。结果，带回家好几天没动静。某一天早晨起来，两棵水仙悄不吭声全开了，然后香了屋子好多天。水仙三月，我在花市扛了一盆栀子花，花店老板见
    

    • 

  • 大学播音主持都学什么内容？播音主持专业学什么？
配音新手圈

    有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、
    

    • 

  • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法
江上清风山间明月
FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏

    文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
    

    • 

  • 微信小程序监听用户经纬度变化
某公司摸鱼前端
微信小程序小程序

    一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
    

    • 

  • 2019-04-08早
梦雅的简动力

    在上瑜伽课前10分钟的调息中，你的眼睛为什么总是想睁开？（焦虑）。你的眉头为什么总是紧锁？（压力）。练习体式时你为什么总是去看别人？（攀比）保持体式时你为什么总是烦躁？（性急）。保持长久而规律的练习，以上这些，终归离你远去。瑜伽，首先，不是帮你得到，而是教你放下。图片发自App时间，一时间无法跳离这个特殊的词汇毅力，坚持，真诚，需要时间来见证真相，现实，伪装，时间自然会揭秘珍惜它又害怕它可它丝毫不
    

    • 

  • 3/31总结
静心第一

    今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
    

    • 

  • 极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～
极小狐
gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM

    安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或
    

    • 

  • 数据结构奇妙旅程之深入解析快速排序
山间漫步人生路
数据结构排序算法算法

    快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo
    

    • 

  • 被隔离的日子（五）@三七会写作营
三七会萍海临风

    从隔离的初期，我们三人都不适应，彼此说话都还火药味十足。后随着时间的推移，到现在，我们仨人能够心平气和，幽默地对待彼此。看来，时间可真是个好东西，不仅能见证一个人的心性，还能看清自己的需求、他人的本质。今天晚上，孩子跑到厨房，告诉我她给人捐款了。我纳闷，不是给河南捐过款了么。当时，我还落后于她捐的呢。这次又捐给谁？看到我一脸狐疑，孩子说，还记得初四给她补课的那个男老师么？当让记得，当时，就因为是男
    

    • 

  • 教育微创新的意蕴
知北老师

    我是1992年参加工作的，一毕业就被分配到一所全县最偏僻落后的农村学校——付窝中学，12年后被调往一所已经连续十年全县倒数第一，也是很偏僻落后的农村学校——北宋镇第三中学。三年后到了北宋镇第一中学工作，这所学校教学质量也是连续几年落后了。2014年我到了北京市育英学校，这所学校是京城名校。2016年7月，我被育英学校派往原密云区第七中学工作，这是一所城乡接合部薄弱学校。学校现名为北京市育英学校密云
    

    • 

  • 我喝醉了，但是与你无关
Z先生的日记本

    2019年04月10号晚上我和一个朋友喝酒了，彻彻底底的喝醉了，喝到短片，事后我问L，我说我喝醉了之后，都发生了什么，L没有告诉我详情，但是跟我说了大致，他说我跟他一直聊天，说自己小的时候的事，说自己爸妈的事，说自己现在过得很苦可能，确实是喝醉了酒，才会毫无防备的跟其他人说这些吧。L还说感觉我过得很苦，很心疼。醉了酒之后还哭了，想想还真是丢人一年前，在宿舍也有一瓶红酒，那是舍友出去拉赞助时候，友商
    

    • 

  • android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android自定义曲线图

    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
    

    • 

  • Flink中的SQL Client和SQL Gateway
BigDataMLApplication
flinkflinksqlgateway

    Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient：FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway：FlinkSQLGateway是一个独立的服务，它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL
    

    • 

  • 2022年河南省高等职业教育技能大赛云计算赛项竞赛赛卷（样卷）
忘川_ydy
云计算云计算openstackkubernetesdockerpythonk8sansible

    #需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！第一部分：私有云任务1私有云服务搭建(10分)使用提供的用户名密码，登录竞赛用的云计算平台，按要求自行使用镜像创建两台云主机，创建完云主机后确保网络正常通信，然后按要求配置服务器。根据提供安装脚本框架，补充脚本完成OpenStack平台的安装搭
    

    • 

  • 浪潮 M5系列服务器IPMI无法监控存储RAID卡问题.
Songxwn
硬件服务器服务器运维

    简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/
    

    • 

  • 打印出1-100的奇数 。（C语言）
王多鱼001
C语言c语言算法数据结构

    代码：#includeintmain(){for(inti=1;i<101;i++){if(i%2==1){printf("%d,",i);}}return0;}
    

    • 

  • 【OpenModelica】4命令行大全
Wumbuk
python开发语言modelica

    命令行大全文章目录命令行大全一、SummaryofCommandsfortheInteractiveSessionHandler二、Runningthecompilerfromcommandline一、SummaryofCommandsfortheInteractiveSessionHandler以下是交互式会话处理器中当前可用命令的完整列表。•simulate(modelname)：翻译一个名为
    

    • 

  • 通俗易懂：MySQL中如何设置只读实例并确保数据一致性？
大龄下岗程序员
mysqljavamysqlspring

    在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication
    

    • 

  • 拼多多纸巾推荐：品质与性价比的完美结合
氧惠帮朋友一起省

    拼多多纸巾推荐拼多多纸巾返现怎么做在我们的日常生活中，纸巾已经成为不可或缺的用品。无论是在家庭、办公室还是旅途中，纸巾都是我们随时随地需要的物品。随着电商平台的兴起，越来越多的人选择在网上购买纸巾。其中，拼多多作为国内知名的电商平台之一，以其独特的社交电商模式和实惠的价格吸引了大量用户。今天，我们就来探讨如何在拼多多上选择品质优良、性价比高的纸巾，以及如何通过一些小技巧来获取更多的优惠。一、品质与
    

    • 

  • 5月8日盘前提示：维持短期可以操作到下周二左右的判断，重个股轻指数
九命_猫妖

    大盘：消息面。取消境外投资者额度限制，这个长线利好股市，短期影响不大，因为3000亿额度只用了1/3。额度本来就够用。走势看，昨天缩量横盘，走的还算中规中矩，近期一直弱势的次新股走势较强，前期强势股京威股份、光大嘉宝等跌停，由此判断市场还是存量博弈的市场，震荡是市场的主基调。维持短期可以操作到下周二左右的判断。下周后半段震荡回调的概率较高。思路：短期重个股轻指数行业和个股：物联网行业有利好，关注下
    

    • 

  • JAVA中的Enum
周凡杨
javaenum枚举

    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义：
public String monday;
public String tuesday;
public String wensday;
public String thursday
    

    • 

  • 赶集网mysql开发36条军规
Bill_chen
mysql业务架构设计mysql调优mysql性能优化

    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
    

    • 

  • Shell test命令
daizj
shell字符串test数字文件比较

    Shell test命令
Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真
实例演示：
num1=100
num2=100if test $[num1]
    

    • 

  • XFire框架实现WebService(二)
周凡杨
javawebservice

       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。
Webservice的服务端(WEB工程)：
两个java bean类：
Course.java
   package cn.com.bean;
public class Course {
    private 
    

    • 

  • 重绘之画图板
朱辉辉33
画图板

           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。
       画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
    

    • 

  • Java的IO流
西蜀石兰
java

    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。
每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。
IO流作用是什么？
答：实现对文件的读写，这里的文件是广义的；
Java如何实现程序到文件
    

    • 

  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither
林鹤霄

    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!
 
网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
    

    • 

  • Row size too large (> 8126). Changing some columns to TEXT or BLOB
aigo
column

    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large
 
异常信息：
Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
    

    • 

  • JS 格式化时间
alxw4616
JavaScript

    /**
* 格式化时间 2013/6/13 by 半仙 [email protected]
* 需要 pad 函数
* 接收可用的时间值.
* 返回替换时间占位符后的字符串
*
* 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数
* 如 YYYY 4占4位 YY 占2位<p></p>
* MM DD hh mm
    

    • 

  • 队列中数据的移除问题
百合不是茶
队列移除

     
   队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;
 
   //
package com.Thread0715.com;
import java.util.ArrayList;
public class Threa
    

    • 

  • Runnable接口使用实例
bijian1013
javathreadRunnablejava多线程

    Runnable接口
a.       该接口只有一个方法：public void run();
b.       实现该接口的类必须覆盖该run方法
c.       实现了Runnable接口的类并不具有任何天
    

    • 

  • oracle里的extend详解
bijian1013
oracle数据库extend

    扩展已知的数组空间，例：
DECLARE
TYPE CourseList IS TABLE OF VARCHAR2(10);
courses CourseList;
BEGIN
-- 初始化数组元素，大小为3
courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 ');
-- 
    

    • 

  • 【httpclient】httpclient发送表单POST请求
bit1129
httpclient

    浏览器Form Post请求
浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求
1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据
2. Form 
    

    • 

  • 【Hive十三】Hive读写Avro格式的数据
bit1129
hive

     1. 原始数据
hive> select * from word;
OK
1 MSN
10 QQ
100 Gtalk
1000 Skype
 
 
 2. 创建avro格式的数据表
 
hive> CREATE TABLE avro_table(age INT, name STRING)STORE
    

    • 

  • nginx+lua+redis自动识别封解禁频繁访问IP
ronin47

    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。
一、安装环境：
CentOS x64 release 6.4(Fin
    

    • 

  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历
bylijinnan
java

    
import java.util.LinkedList;
import java.util.List;
import java.util.Stack;
public class BinTreeTraverse {
//private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 };
private int[] array={ 10,6,
    

    • 

  • Spring源码学习-XML 配置方式的IoC容器启动过程分析
bylijinnan
javaspringIOC

    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍：
ApplicationContext context = new FileSystemXmlApplicationContext
("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
    

    • 

  • [科研与项目]民营企业请慎重参与军事科技工程
comsci
企业

    
     军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”
   而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
    

    • 

  • spring 定时器-两种方式
cuityang
springquartz定时器

    方式一：
间隔一定时间 运行
<bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" />
<bean id="updateSessionIdSchedule
    

    • 

  • 简述一下关于BroadView站点的相关设计
damoqiongqiu
view

    终于弄上线了，累趴，戳这里http://www.broadview.com.cn
 
简述一下相关的技术点
 
前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。
 
后端：U
    

    • 

  • 运维 PHP问题汇总
dcj3sjt126com
windows2003

    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页
解决方法：
后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。
后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。
 
2、解决PHP168超级管理员上传图片提示你的空间不足
网站是用PHP168做的，反映使用管理员在后台无法
    

    • 

  • mac 下 安装php扩展 - mcrypt
dcj3sjt126com
PHP

    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下：
下载并解压libmcrypt-2.5.8.tar.gz。
在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
    

    • 

  • MongoDB更新文档 [四]
eksliang
mongodbMongodb更新文档

    MongoDB更新文档
转载请出自出处：http://eksliang.iteye.com/blog/2174104
MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。
语法结构如下：
db.collection.update( criteria, objNew, upsert, multi)
参数含义 参数   
    

    • 

  • Linux下的解压，移除，复制，查看tomcat命令
y806839048
tomcat

    重复myeclipse生成webservice有问题删除以前的，干净
1、先切换到：cd usr/local/tomcat5/logs
2、tail -f catalina.out
3、这样运行时就可以实时查看运行日志了
Ctrl+c 是退出tail命令。
有问题不明的先注掉
  cp /opt/tomcat-6.0.44/webapps/g
    

    • 

  • Spring之使用事务缘由(3-XML实现)
ihuning
spring

     
用事务通知声明式地管理事务
 
事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
    

    • 

  • GCD使用经验与技巧浅谈
啸笑天
GC

    前言
GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。
dispatch_once_t必须是全局或static变量
这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1 
    

    • 

  • linux（Ubuntu）下常用命令备忘录1
macroli
linux工作ubuntu

    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls
ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息： 
ls / 显示/.下的所有文件和目录 
ls -l 给出文件或者文件夹的详细信息
ls -a 显示所有文件，包括隐藏文
    

    • 

  • nodejs同步操作mysql
qiaolevip
学习永无止境每天进步一点点mysqlnodejs

    // db-util.js
var mysql = require('mysql');
var pool = mysql.createPool({
connectionLimit : 10,
host: 'localhost',
user: 'root',
password: '',
database: 'test',
port: 3306
});

    

    • 

  • 一起学Hive系列文章
superlxw1234
hiveHive入门

     
[一起学Hive]系列文章 目录贴，入门Hive，持续更新中。
 
[一起学Hive]之一—Hive概述，Hive是什么
[一起学Hive]之二—Hive函数大全-完整版
[一起学Hive]之三—Hive中的数据库(Database)和表(Table)
[一起学Hive]之四-Hive的安装配置
[一起学Hive]之五-Hive的视图和分区
[一起学Hive
    

    • 

  • Spring开发利器：Spring Tool Suite 3.7.0 发布
wiselyman
spring

    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。
 
在3.7.0版本主要做了如下的更新：
 
将eclipse版本更新至Eclipse Mars 4.5 GA
Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
    

    •