niko_sch
niko_sch

CSS3 flex布局的妙用


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>flex布局title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="components/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js">script>
    <script src="components/bootstrap.min.js">script>
    <script src="components/jquery.vide.js">script>
head>
<body>
<style>
    .father-container {
        background-color: #a8e4ff;
        padding: 50px 0;
    }

    /*dislpay:flex使父容器表现为块盒子;display:inline-flex使容器表现为行盒子*/
    .flex-container {
        display: flex;
    }

    .inline-flex-container {
        display: inline-flex;
    }

    .align-items-stretch {
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    .align-items-baseline {
        -webkit-align-items: baseline;
        align-items: baseline;
    }

    .align-items-center {
        -webkit-align-items: center;
        align-items: center;
    }

    .align-items-flex-start {
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    .align-items-flex-end {
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    .justify-content-flex-start {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .justify-content-flex-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .justify-content-center {
        -webkit-justify-content: center;
        justify-content: center;
    }

    .justify-content-space-between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .justify-content-space-around {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    .center-container {
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    .element-autoheight {
        width: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;

    }

    .element-fixedsize {
        width: 50px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        background-color: tomato;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: bold;
        font-size: 2em;
    }

    .center-item {
        width: 50px;
        height: 50px;
        background: tomato;

    }

    .flex-container1 {
        padding: 0;
        margin: 5px;
        float: left;
        list-style: none;
        width: 160px;
        height: 300px;
        display: flex;
        flex-flow: row wrap;
        background-color: #a8e4ff;
        /*flex-direction:row;
        flex-wrap:wrap;*/
    }

    .flex-start {
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    .flex-end {
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    .flex-end li {
        background: gold;

    }

    .flex-end li:nth-child(3) {
        margin-bottom: 0;
    }

    .center {
        -webkit-align-content: center;
        align-content: center;
    }

    .center li {
        background: deepskyblue;
    }

    .space-between {
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    .space-between li {
        background: lightgreen;
    }

    .space-between li:nth-child(3) {
        margin-bottom: 0;
    }

    .space-around {
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    .space-around li {
        background: hotpink;
    }

    .stretch {
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    .stretch li {
        background: chocolate;
        margin-bottom: 4px;
        height: auto;
    }

    .stretch li:nth-child(3) {
        margin-bottom: 0;
    }

    .flex-item {
        background: tomato;
        margin-bottom: 5px;
        width: 160px;
        height: 80px;

        line-height: 80px;
        color: white;
        font-weight: bold;
        font-size: 1em;
        text-align: center;
    }
style>
<div class="container">
    <h3>align-itemsh3>
    <div class="col-md-12">
        <div class="col-md-4">
            <h4>stretch（拉升至等高）h4>
            <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>

            div>
        div>
        <div class="col-md-4">
            <h4>baseline（子元素基线对齐）h4>
            <div class=" inline-flex-container align-items-baseline" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>center（子元素垂直居中对齐）h4>
            <div class="inline-flex-container align-items-center" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>flex-end（子元素对齐下边缘）h4>
            <div class="inline-flex-container align-items-flex-end" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
        <div class="col-md-4">
            <h4>flex-start（子元素对齐上边缘）h4>
            <div class="inline-flex-container align-items-flex-start" style="background-color: #a8e4ff;">
                <div class="element-autoheight">
                    <div style="height: 50px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 100px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 70px;">div>
                div>
                <div class="element-autoheight">
                    <div style="height: 90px;">div>
                div>
            div>
        div>
    div>
    <hr class="col-md-12">

    <h3>align-selfh3>
    <h4>和align-item一样，只不过是应用在子元素上（下面例子：改变align-item样式）h4>
    <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
        <div class="element-autoheight">
            <div style="height: 50px;">div>
        div>
        <div class="element-autoheight">
            <div style="height: 140px;">div>
        div>
        <div class="element-autoheight">
            <div style="height: 70px;">div>
        div>
        <div class="element-autoheight" style=" -webkit-align-self: flex-end;align-self: flex-end;">
            <div style="height: 100px;font-size: 12px;">我本来是拉伸的，现在我和下边缘对齐了div>
        div>

    div>
    <hr class="col-md-12">

    <h3>align-contenth3>
    <div style="float: left;padding-bottom: 20px;">
        <div class="flex-container1 flex-start">
            <div class="flex-item">flex-startdiv>
            <div class="flex-item">flex-startdiv>
            <div class="flex-item">flex-startdiv>
        div>

        <div class="flex-container1 flex-end">
            <li class="flex-item">flex-endli>
            <li class="flex-item">flex-endli>
            <li class="flex-item">flex-endli>
        div>

        <div class="flex-container1 center">
            <li class="flex-item">centerli>
            <li class="flex-item">centerli>
            <li class="flex-item">centerli>
        div>

        <div class="flex-container1 space-between">
            <li class="flex-item">space-betweenli>
            <li class="flex-item">space-betweenli>
            <li class="flex-item">space-betweenli>
        div>

        <div class="flex-container1 space-around">
            <li class="flex-item">space-aroundli>
            <li class="flex-item">space-aroundli>
            <li class="flex-item">space-aroundli>
        div>

        <div class="flex-container1 stretch">
            <li class="flex-item">stretchli>
            <li class="flex-item">stretchli>
            <li class="flex-item">stretchli>
        div>
    div>
    <hr  style="clear: both;">

    <h3>justify-contenth3>
    <div class="col-md-12">

        <h4>flex-start（左边缘对齐）h4>
        <div class="flex-container justify-content-flex-start" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>

        div>
        <h4>flex-end（右边缘对齐）h4>
        <div class="flex-container justify-content-flex-end" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>center（居中对齐）h4>
        <div class="flex-container justify-content-center" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>space-between（等间距对齐，左右无间距）h4>
        <div class="flex-container justify-content-space-between" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
        <h4>space-around（等间距对齐，左右有间距）h4>
        <div class="flex-container justify-content-space-around" style="background-color: #a8e4ff;">
            <div class="element-fixedsize">1div>
            <div class="element-fixedsize">2div>
            <div class="element-fixedsize">3div>
            <div class="element-fixedsize">4div>
        div>
    div>

    <hr class="col-md-12">








    <h3>子块完全置中(justify-content,align-items)h3>
    <div class="father-container center-container col-md-6">
        <div class="center-item">div>
    div>
    <hr class="col-md-12">
div>

body>
html>

你可能感兴趣的:(CSS3,flex,css3,布局)

  • AI新贵崛起：Perplexity的估值为何两月飙升至180亿美元？ 在美的苦命程序员 人工智能
    在AI搜索领域的激烈竞争中，Perplexity的崛起令人瞩目。这家AI搜索初创公司在短短两个月内，估值从140亿美元激增至180亿美元，成为挑战谷歌的“潜力股”。这背后究竟有哪些驱动力？从商业化路径到未来市场布局，Perplexity的成功揭示了AI创业领域的新机遇和挑战。一、从5亿美元到180亿美元，Perplexity的惊人估值飙升Perplexity的估值在18个月内完成了五轮融资，尤其在
  • 网页语音识别demo zy_qqqqqq 语音识别csshtml
    语音demo*{box-sizing:border-box;margin:0;padding:0;font-family:'PingFangSC','MicrosoftYaHei',sans-serif;}body{display:flex;flex-direction:column;align-items:center;padding:20px;background-color:#f7f9fc;
  • 第三集 领导体制和职责 hainan1205
    1.为什么要加强党的组织建设？根本目的是坚持和加强党的全面领导，为推进中国特色社会主义事业提供坚强保证。这个社会主义事业的发展，不单单是经济的发展，而是“经济建设、政治建设、文化建设、社会建设、生态文明建设”五位一体的总体布局。2.组织工作的领导体制是什么？党中央集中统一领导，各级党委党组分级分类领导，组织部门专门负责，有关方面各司其职、密切配合。党中央以及地方党委设置组织部，各级党政机关、人民团
  • uniapp调用高德api zhcinit0 uni-app小程序前端vue.js
    主要包含：1、uniapp调用高德地图的微信sdk2、实现坐标和经纬度互相转换功能3、实现关键字检索功能说明：页面以uniapp编写，使用uniapp官方map组件，cover-view处理原生组件层级问题。以下是单个页面布局和业务逻辑:{{inputInfo}}详细地址：{{description}}保存{{i.name}}importWhiteHeadfrom'../../components
  • 《开创新品类》第七章第9节:差异化战略方案构成与优势 a57051ee1ea8
    战略方案的制定其实有四个方面构成：1、战略，方向及布局；步骤：规划→制定→实施；方式：多元化战略→企业战略→品牌战略→差异化战略→技术战略→人才战略→竞争战略→职能战略→融资战略→资源战略；2、策略，组织成员进行战斗；方式：不战而胜→先发制人→集中攻击→力量而行→避实就虚→借鸡生蛋→狡兔三窟→暗渡陈仓→围魏救赵→背水一战→釜底抽薪；3、战术，指对指导进行战斗的方法；步骤：部署→协同→指挥→行动→保
  • XC7A75T‑2FGG484I Xilinx Artix‑7 FPGA AMD
    XC7A75T‑2FGG484I属于Xilinx28 nmArtix‑7FPGA内部包含约75,000个查找表（LUT）及相应触发器，对应数十万级组合逻辑和状态存储；它还集成了4.9 Mb的分布式BlockRAM，满足高速缓存与FIFO需求；240个DSP48E1乘加单元为数字信号处理、滤波器及乘法累加运算提供硬件加速。超网格（super‑net）布局与高效的路由交换矩阵，确保了内部时钟域频率可达
  • 3、 AWS基础设施入门：托管、部署与全球布局 jie sherry 云计算入门：从零开始掌握AWSAWS云计算IT基础设施
    AWS基础设施入门：托管、部署与全球布局1.在AWS上托管IT基础设施将IT基础设施迁移到AWS云平台是现代企业数字化转型的重要一步。在AWS云平台上托管IT基础设施需要学习一些新概念和术语，以确保迁移过程顺利进行。AWS云平台提供的虚拟化和资源管理工具，使得企业能够灵活地构建和管理IT基础设施，同时节省时间和成本。1.1新概念和术语在AWS上托管IT基础设施涉及以下新概念和术语：虚拟化：通过软件
  • 为何大厂 B 端系统登录页都长这样？深挖背后的设计底层逻辑
    你有没有注意到，无论是阿里云、腾讯云、还是企业微信的后台系统登录页，它们看起来都“差不多”？统一的布局结构、相似的视觉风格、甚至背景图的选择都很雷同。这难道只是巧合吗？为什么这些大厂明明有顶尖的设计团队，却都不约而同地选择了“千篇一律”的设计风格？真的是没有创意？还是背后藏着某种看不见的规则和逻辑？这篇文章将带你深入剖析B端系统登录页背后的底层设计思维。你会发现，这些看似“无聊”的页面，其实每一处
  • 总线 “兄弟” 大比拼：I2C 与 I3C 的异同之旅
    在电子通信的世界里，I2C和I3C就像一对“兄弟”，它们既有血脉相连的共同点，又在成长过程中发展出各自独特的个性。接下来，我们就一同踏上这对总线“兄弟”的异同之旅，从应用场景、工作原理、关键参数以及设计及布局布线注意事项等方面一探究竟。一、应用场景：各有侧重的舞台I2C总线诞生较早，凭借其结构简单、成本低的特点，在许多低速、对性能要求不高的场景中得到了广泛应用。比如在消费电子领域，像智能手机里的传
  • 低速信号设计之 RMII 万花丛中一抹绿 服务器低速信号设计服务器硬件研发低速信号设计RMII
    一、引言在服务器的信号设计中，高速信号往往是关注的焦点，但低速信号的稳定运行同样是保障服务器整体可靠性的关键。RMII（ReducedMediaIndependentInterface，简化的媒体独立接口）作为一种常用于低速以太网通信的接口标准，在服务器的低带宽通信场景中发挥着重要作用。本文将从RMII总线在服务器中的应用场景、工作原理、关键参数、设计及布局布线注意事项、典型应用案例等方面进行详细
  • 碳中和碳交易骗局揭晓！第七届内部操盘群伍戈被骗黑幕曝光!血泪事迹令人惊心! 昌龙律法
    如今大家生活好了，手里或多或少有点闲钱了。就开始想着怎么赚更多的钱！这也使得各种投资市场很火爆，无孔不入的骗子们又暗戳戳上线了，利用人们对赚钱的渴望，打着网络投资的旗号实施诈骗。随着“互联网+”的发展，万物皆可“数字经济”的“数字大数据”投资项目走入现实生活中。但是有不法分子就利用了这一“商机”，将数字投资变为新型找形式，并且利用洗脑话术，核心骗术仍然是高额返利，让人不知不觉掉进提前布局的“陷阱”
  • 《狂飙》剖析陈书婷的智慧（借势布局篇） 本初说剧
    《狂飙》里，陈书婷究竟有多聪明？出场虽不多，但一出手就能绝处逢生，转败为胜。看懂了大嫂的这几波操作，你才能真正体会到大哥的那句：没有你，我不行的。第一任老公白江波死后，陈书婷处于绝对不利的位置，靠山倒了台，仇家在追杀，但她并没有因为这些乱了阵脚，而是暗中调查清楚关键的人证，并利用这个消息获得了警方的保护。之后又借高家兄弟之手除掉了自己最大的威胁徐江。陈书婷借机会介绍高启强认干爹，那场戏很有看点，高
  • 2019-05-16 海牙kyogre
    前端优化动画性能之requestAnimationFrame@(技术分享)在前端做动画很多人第一人的反应是用定时器，比如setInterval、setTimeout，除此之外css3可以使用transition和animation来实现。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有
  • 低速信号设计之 RGMII 篇
    一、引言在服务器的信号接口设计中，高速信号固然是性能的核心，但中低速信号的稳定运行同样是保障系统可靠性的基础。RGMII（ReducedGigabitMediaIndependentInterface，简化的千兆媒体独立接口）作为一种兼顾速率与简化设计的以太网接口标准，在服务器的中低速千兆以太网通信场景中扮演着重要角色。本文将从RGMII总线在服务器中的应用场景、工作原理、关键参数、设计及布局布线
  • 2014年最具人气国外WORDPRESS主题 weixin_34355715 php前端uxViewUI
    在国外，WrodPress这个博客系统极为受欢迎，使用WordPress来建站可以降低很多成本，另外还能以十分便宜的价格获得一个漂亮的WP网站模板。今天向大家分享来自Themeforest2014年最具人气的高级WrodPress主题，这些主题无论是设计还是技术上，都是目前最新最流行的。比如CSS3、扁平化、响应式设计、全屏视频背景、视差滚动特效等等。本次分享的WP主题实用性非常不错，流行的设计+
  • 2023-03-22 小郭不会打篮球
    3.21笔记一、定位作用：显示定在所有其他元素之上、可以让元素在浏览器中任意位置。a标准流块级元素独占一行→垂直布局行内元素/行内块元素一行显示多个→水平布局b浮动可以让原本垂直布局的块级元素变成水平布局c定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况1、属性名：position静态定位：static相对定位：relative绝对定位：absolute固定定位：fixed向下移
  • 农夫山泉下注挂耳咖啡，即将上市的农夫能凭一杯咖啡推动上市吗？ 慕容随风
    在中国的消费市场上，有一家公司大家可谓是无人不知无人不晓，这就是大名鼎鼎的“农夫山泉”，那句”农夫山泉有点甜“的广告语早就深入人心了，除了那句以外还有“我们不生产水，我们就是大自然的搬运工”也是大多数人所熟知的一句，不过当前的农夫山泉似乎不再满足于只搬运水了，他们开始全面布局咖啡市场了。一、不满足于只搬运水的农夫山泉证监会官网披露，农夫山泉股份有限公司（下称“农夫山泉”）境外IPO审批已于3月17
  • 2024年番茄免费小说邀请码如何填写，番茄小说邀请码怎么填写呢（填写流程） 凌风导师
    2024年番茄免费小说的邀请码填写步骤相对简单，以下是详细的填写流程：番茄免费小说邀请码填写步骤打开应用：首先，确保你已经下载并安装了最新版本的番茄免费小说APP。进入相关页面：打开APP后，根据APP的界面布局，你可能需要点击底部导航栏中的【福利】、【我的】或【任务】等按钮，以找到填写邀请码的入口。不同版本的APP界面可能略有不同，但通常邀请码填写入口都在比较显眼的位置。寻找填写邀请码选项：在进
  • CSS实现前端响应式布局
    一、响应式布局概述响应式布局的定义与重要性响应式布局是一种能够使网页在不同设备上（如桌面电脑、平板电脑、手机等）都能呈现出良好视觉效果和用户体验的设计方法。它通过使用灵活的布局、可适应的图像和媒体查询等技术，确保网页能够根据设备的屏幕尺寸、分辨率和方向进行自动调整和优化。在当今数字化时代，响应式布局至关重要。随着移动设备的广泛使用，用户越来越多地通过各种设备访问网页。如果网页不能在不同设备上良好地
  • CSS样式中的布局、字体、响应式布局
    目录一、使用内联块级元素布局二、使用float布局三、使用弹性盒子布局四、服务器字体五、响应式布局相关文章积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius一、使用内联块级元素布局让想要横着的元素（left、mid、right）变成内联块级元素。示例leftmidr
  • 前端学习路线推荐 oldfifteen
    第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征：正则表达式、排序算
  • 2025前端面试题全攻略：高频考点解析与实战指南
    助力金三银四跳槽季，覆盖90%大厂核心考点，技术进阶+面试技巧双提升一、HTML/CSS核心篇1.语义化与布局实战问题1：如何用HTML5语义化标签优化新闻详情页？答案要点：使用包裹主体内容，划分章节标记发布时间，+处理图文SEO优势：提升关键内容权重，增强可访问性问题2：实现等间距三栏布局（中间自适应）.container{display:flex;gap:20px;/*关键：替代margin方
  • HTML5如何创建容器 paid槮 html5前端html
    为了让网页的布局更加美观，HTML提供了容器的概念，即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示，使得标签有了各自的容器，能在各自的区域内显示内容。标签在HTML中使用标签来建立一个容器。其使用形式如下!其他标签被标签所包含的标签都隶属于同一个容器,当使用标签设置属性样式(即style通用样式)时整个容器都会显示此样式。示例代码:我是标题1我纻蜞居是腭绠纩定标题
  • CSS 单位完全指南：掌握 em、rem、vh、vw 等响应式布局核心单位 编程随想▿ CSScss前端html网页布局
    目录一、绝对单位vs相对单位二、核心相对单位详解1.em单位2.rem单位（Rootem）3.vh与vw单位4.vmin与vmax单位三、实战应用场景对比五、专家建议与最佳实践六、总结一、绝对单位vs相对单位绝对单位（如px）固定不变，而相对单位则基于其他参考值动态计算，更适合响应式设计：/*绝对单位示例*/.fixed-size{width:300px;/*始终为300像素*/}/*相对单位示例
  • OracleERP云软件二次开发：业务流程管理与自定义教程 kkchenjj 工业软件二次开发全集工业软件ERP数据库开发语言
    OracleERP云软件二次开发：业务流程管理与自定义教程OracleERP云平台概览OracleERP云平台架构OracleERPCloud采用了一种多层架构设计，旨在提供高度可扩展、安全且灵活的云解决方案。其架构主要分为以下几个层次：用户界面层：提供直观的用户界面，支持多种设备访问，包括桌面、平板和手机。这一层利用了现代Web技术，如HTML5、CSS3和JavaScript，确保了良好的用户
  • [Android]在游戏的SurfaceView中获取输入与使用EditText,Spinner等控件的方法
    游戏中有时候需要玩家输入信息，选择信息。在普通的Android程序里面，可以使用EditText，Spinner等输入控件方便地实现这些功能。但是，一般游戏是使用SurfaceView，所有的东西都是自己绘制。所以加入控件有些不伦不类。而且SurfaceView属于View，本身是不能追加的控件的。我在网络上找了许多文件，一般来说提到了一个方法在外面使用布局。但说到底还是不伦不类。而且使游戏的UI
  • HTML之创建容器和表格 一百天成为python专家 java开发语言前端csshtmlhtml5
    创建容器为了让网页的布局更加美观，HTML提供了容器的概念，即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示，使得标签有了各自的容器，能在各自的区域内显示内容。标签在HTML中使用标签来建立一个容器。其使用形式如下:kdiv>其他标签被标签所包含的标签都隶属于同一个容器,当使用标签设置属性样式(即style通用样式)时整个容器都会显示此样式。示例代码:这里是标题我是
  • Python100个库分享第36个—python-pptx(办公篇) 小庄-Python办公 Python100个库分享python开发语言python办公python-pptxpython读取pptpython操作ppt
    目录专栏导读库简介主要特点️安装方法基础使用1.导入库和创建演示文稿2.基本幻灯片操作3.常用布局类型文本和格式设置1.文本框和段落2.文本对齐和样式表格操作1.创建基本表格2.高级表格格式️图片和形状1.插入图片2.添加形状图表功能1.创建柱状图2.创建饼图办公实用功能1.创建项目汇报PPT2.创建培训课件3.创建产品介绍PPT高级功能1.母版和主题2.动画和过渡效果3.批量生成幻灯片性能优化和
  • 对于页面适配，你应该使用px还是rem мо仙堡杠把子灬 css做一个有知识的流氓
    其实一切都还好，没有那么糟糕。css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了用%，其他单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。那本文说的页面适配，指的是同样的布局，在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式有很多：使
  • 【DICOM后处理】qt+vs 实现DICOM数据四视图显示 leafpipi 实战练习qtc++算法图像处理DICOM学习
    目录1、DICOM四视图2、vtkImageViewer2实现二维平面图显示3、vtkVolume实现三维体数据显示4、实现界面图1、DICOM四视图DICOM四视图通常指同时显示医学影像的四个不同平面或视角，用于全面分析三维数据（如CT、MRI等）。标准四视图布局：横截面（Axial）水平切面，从上向下观察（类似传统CT/MRI的横断面切片）。显示解剖结构的横向分布，常用于定位病变。矢状面（Sa
  • JAVA基础 灵静志远 位运算加载Date字符串池覆盖
    一、类的初始化顺序 1 （静态变量，静态代码块）-->（变量，初始化块）--> 构造器 同一括号里的，根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况，那就在父类到子类交替初始化。 二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象，根
  • keepalived实现redis主从高可用 bylijinnan redis
    方案说明 两台机器（称为A和B），以统一的VIP对外提供服务 1.正常情况下，A和B都启动，B会把A的数据同步过来（B is slave of A） 2.当A挂了后，VIP漂移到B；B的keepalived 通知redis 执行：slaveof no one，由B提供服务 3.当A起来后，VIP不切换，仍在B上面；而A的keepalived 通知redis 执行slaveof B，开始
  • java文件操作大全 0624chenhong java
    最近在博客园看到一篇比较全面的文件操作文章，转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息    &nbs
  • android学习任务 不懂事的小屁孩 工作
    任务 完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog，并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程，并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果，写一个实例 已完成 复习fragem
  • zoom.js 换个号韩国红果果 oom
    它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js  transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q
  • 详解Oracle云操作系统Solaris 11.2 蓝儿唯美 Solaris
    当Oracle发布Solaris 11时，它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是，这些说法没有告诉我们为什么Solaris是配得上云的。幸好，我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用：OpenStack、内核域、统一存档（UA）和弹性虚拟交换（EVS）。 
  • spring学习——springmvc（一） a-john springMVC
    Spring MVC基于模型-视图-控制器（Model-View-Controller，MVC）实现，能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。   1，跟踪Spring MVC的请求 请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样，Spring MVC所有的请求都会通过一个前端控制器Servlet。前
  • hdu4342 History repeat itself-------多校联合五 aijuans 数论
    水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
  • EJB和javabean的区别 asia007 beanejb
    EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了   1.EJB用于服务端应用开发, 而JavaBeans
  • Struts的action和Result总结 百合不是茶 strutsAction配置Result配置
        一:Action的配置详解:      下面是一个Struts中一个空的Struts.xml的配置文件     <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo
  • 如何带好自已的团队 bijian1013 项目管理团队管理团队
    在网上看到博客" 怎么才能让团队成员好好干活"的评论，觉得写的比较好。 原文如下： 我做团队管理有几年了吧，我和你分享一下我认为带好团队的几点： 1.诚信         对团队内成员，无论是技术研究、交流、问题探讨，要尽可能的保持一种诚信的态度，用心去做好，你的团队会感觉得到。 2.努力提
  • Java代码混淆工具 sunjing ProGuard
    Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
  • 【Redis三】基于Redis sentinel的自动failover主从复制 bit1129 redis
    在第二篇中使用2.8.17搭建了主从复制，但是它存在Master单点问题，为了解决这个问题，Redis从2.6开始引入sentinel，用于监控和管理Redis的主从复制环境，进行自动failover，即Master挂了后，sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作，如果Master醒来再次加入集群，只能以从服务器的形式工作。   什么是Sentine
  • 使用代理实现Hibernate Dao层自动事务 白糖_ DAOspringAOP框架Hibernate
    都说spring利用AOP实现自动事务处理机制非常好，但在只有hibernate这个框架情况下，我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try
  • maven3实战读书笔记 braveCS maven3
    Maven简介 是什么？ Is a software project management and comprehension tool.项目管理工具 是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复，maven最大化消除了构建的重复] [与XP：简单、交流与反馈；测试驱动开发、十分钟构建、持续集成、富有信息的工作区]     功能：
  • 编程之美-子数组的最大乘积 bylijinnan 编程之美
    public class MaxProduct { /** * 编程之美 子数组的最大乘积 * 题目: 给定一个长度为N的整数数组，只允许使用乘法，不能用除法，计算任意N-1个数的组合中乘积中最大的一组，并写出算法的时间复杂度。 * 以下程序对应书上两种方法，求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思，是要求得这个子数组，而不
  • 读书笔记-2 chengxuyuancsdn 读书笔记
    1、反射 2、oracle年-月-日 时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构 在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s
  • [求学与房地产]慎重选择IT培训学校 comsci it
          关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题       培训学校的教学楼和宿舍的环境和稳定性问题       我们大家都知道，房子是一个比较昂贵的东西，特别是那种能够当教室的房子... &nb
  • RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 daizj oraclermanfilespersetPARALLELISM
    RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道： RMAN > configure device type disk parallelism 3 ; 表示启动三个通道，可以加快备份恢复的速度。
  • 简单排序:冒泡排序 dieslrae 冒泡排序
    public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){
  • 初二上学期难记单词三 dcj3sjt126com sciet
    concert 音乐会 tonight 今晚 famous 有名的；著名的 song 歌曲 thousand 千 accident 事故；灾难 careless 粗心的，大意的 break 折断；断裂；破碎 heart 心（脏） happen  偶尔发生，碰巧 tourist 旅游者；观光者 science （自然）科学 marry 结婚 subject 题目；
  • I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码 dcj3sjt126com redis
    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make   前面3步应该没有问题，主要的问题是执行make的时候，出现了异常。 异常一： make[2]: cc: Command not found 异常原因：没有安装g
  • 并发容器 shuizhaosi888 并发容器
       通过并发容器来改善同步容器的性能，同步容器将所有对容器状态的访问都串行化，来实现线程安全，这种方式严重降低并发性，当多个线程访问时，吞吐量严重降低。    并发容器ConcurrentHashMap       替代同步基于散列的Map，通过Lock控制。   &nb
  • Spring Security（12）——Remember-Me功能 234390216 Spring SecurityRemember Me记住我
    Remember-Me功能   目录   1.1     概述 1.2     基于简单加密token的方法 1.3     基于持久化token的方法 1.4     Remember-Me相关接口和实现
  • 位运算 焦志广 位运算
    一、位运算符Ｃ语言提供了六种位运算符： & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。 例如：9&am
  • nodejs 数据库连接 mongodb mysql liguangsong mongodbmysqlnode数据库连接
    1.mysql 连接    package.json中dependencies加入     "mysql":"~2.7.0"    执行 npm install      在config 下创建文件 database.js    
  • java动态编译 olive6615 javaHotSpotjvm动态编译
        在HotSpot虚拟机中，有两个技术是至关重要的，即动态编译(Dynamic compilation)和Profiling。     HotSpot是如何动态编译Javad的bytecode呢？Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器，即Profile Monitor,专门监视
  • Storm0.9.5的集群部署配置优化 roadrunners 优化storm.yaml
    nimbus结点配置（storm.yaml）信息： # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf
  • 101个MySQL 的调节和优化的提示 tomcat_oracle mysql
    　1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。 　　2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的，它的速度很慢。 　　3. 使用电池供电的RAM（注：RAM即随机存储器）。 　　4. 使用高级的RAID（注：Redundant Arrays of Inexpensive Disks，即磁盘阵列
  • zoj 3829 Known Notation(贪心) 阿尔萨斯 ZOJ
    题目链接：zoj 3829 Known Notation 题目大意：给定一个不完整的后缀表达式，要求有2种不同操作，用尽量少的操作使得表达式完整。 解题思路：贪心，数字的个数要要保证比∗的个数多1，不够的话优先补在开头是最优的。然后遍历一遍字符串，碰到数字+1，碰到∗-1,保证数字的个数大于等1，如果不够减的话，可以和最后面的一个数字交换位置（用栈维护十分方便），因为添加和交换代价都是1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他