<title>三个div变红</title>

    <style>

    *{margin: 0; padding: 0}

    body{

        text-align: center;

    }

    #outer{

        width: 330px;

        display: flex;

        margin: 0 auto;

    }

    #outer div{

        height: 100px;

        background-color: black;

        flex:1;

        margin: 5px;

        /* 平分3个div的方法，实例答案如下：

        #outer{width:330px;height:100px;margin:10px auto;}

        #outer div{float:left;width:100px;height:100px;margin:0 5px;background:black;}

        ！！！flex布局还不了解！！！

         */

        }

    button{

        margin-top: 10px;

        margin-bottom: 5px;

        /* 行内元素怎么设置居中？  除了给上级元素text-align: center;以外？ */

    }

    </style>

    <script>

    window.onload = function()

    {

        var oBtn = document.getElementsByTagName('button')[0];

        var oDiv = document.getElementById('outer');

        var aDiv = oDiv.getElementsByTagName('div');

        // var oDiv = document.getElementById("outer").getElementsByTagName("div");

        // 获取元素的方法：连写。

        oBtn.onclick = function()

        {

            for(var i=0; i<aDiv.length; i++)

            {

                aDiv[i].style.backgroundColor = 'red';

            }

        };

    };

    </script>

</head>

<body>

<button>点击div全部变色</button>

<div id="outer">

    <div></div>

    <div></div>

    <div></div>

</div>

</body>

CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局的更多相关文章

  1. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

  2. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  3. CSS笔记 - fgm练习 2-7 - 简易选项卡

    练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...

  4. CSS笔记 - fgm练习 2-9 - 播放列表收缩展开

    练习地址: http://www.fgm.cc/learn/lesson2/09.html <style> *{ margin: 0;padding: 0;font-size: 12px; ...

  5. CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

    CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...

  6. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  7. CSS笔记 - fgm练习 2-8 - 简易日历

    <style> *{margin: 0; padding: 0} .outer{ width: 240px; margin: 10px auto; background: #f0f0f0; ...

  8. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  9. 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）

    这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...

随机推荐

  1. ASP.NET通过JavaScript实现Button 的Enabled=false

    正常代码控制无法满足需求,所以记录一下方法: <input id="Button5" onclick=" CX()" type="button& ...

  2. ORACLE-016：ora-01720 授权选项对于&#39;xxxx&#39;不存在

    报错的情形例如以下. A用户:视图V_A B用户:视图V_B,而且用到了V_A C用户:须要用V_B, 授权过程, A用户下: grant select on V_A to B B用户下: grant ...

  3. hdoj-1421-搬寝室【DP】

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  4. Elasticsearch之源码分析（shard分片规则）

    前期博客是 Elasticsearch之源码编译 (1)elasticsearch在建立索引时,根据id或(id,类型)进行hash,得到hash值之后再与该索引的分片数量取模,取模的值即为存入的分片 ...

  5. Server.MapPath()的用法

    http://blog.csdn.net/qiuhaifeng_csu/article/details/19416407 Server.MapPath(string path)作用是返回与Web服务器 ...

  6. BZOJ1835: [ZJOI2010]base 基站选址(线段树优化Dp)

    Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距离第i个村庄 ...

  7. fg、bg、jobs、&、 ctrl+z---系统任务

    系统任务有关的命令   一.& 这个用在一个命令的最后,可以把这个命令放到后台执行   二.ctrl + z 可以将一个正在前台执行的命令放到后台,并且暂停   一和二的区别(&放入后 ...

  8. last---显示用户最近登录信息

    last命令用于显示用户最近登录信息.单独执行last命令,它会读取/var/log/wtmp的文件,并把该给文件的内容记录的登入系统的用户名单全部显示出来. 语法 last(选项)(参数) 选项 - ...

  9. .Net 程序在自定义位置查找托管/非托管 dll 的几种方法

    原文:.Net 程序在自定义位置查找托管/非托管 dll 的几种方法 一.自定义托管 dll 程序集的查找位置 目前(.Net4.7)能用的有2种: #define DEFAULT_IMPLEMENT ...

  10. jquery constructor

    function F(){ this.a = "aaa"; alert(111); } F.prototype = { constructor:F, } var f = new F ...