<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. XML解析——DOM解析

    XML:可扩展性标记语言,主要用来传输和存储数据,相对于HTML的各种标签规范,XML的标签可以让用户根据语义自己进行定义,适用于web传输. JSON和XML的区别: (1).XML定义 扩展标记语 ...

  2. Activiti工作流（3）：activiti核心API

    ProcessEngine 说明: 1)     在Activiti中最核心的类,其他的类都是由他而来. 2) 产生方式:ProcessEngine defaultProcessEngine = Pr ...

  3. COGS——T 7. 通信线路

    http://www.cogs.pro/cogs/problem/problem.php?pid=7 ★★   输入文件:mcst.in   输出文件:mcst.out   简单对比时间限制:1.5 ...

  4. 什么是string interning(字符串驻留)以及python中字符串的intern机制

    Incomputer science, string interning is a method of storing only onecopy of each distinct string val ...

  5. 使用Gmail邮箱

    由于国内不能直接访问google,所以其相关产品也不能直接使用.因为Gmail简洁,使用方便,国际上用的人很多.最近发现网易邮箱大师可以直接访问Gmail,所以将方法介绍给大家,如果大家只有访问Gma ...

  6. 跨域使用onmessage实现方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. MATLAB 最优化计算 （一）

    1,令多行命 —— 逗号 VS 分号 2,管理工作空间 —— who , whos , clear , save , load , length (向量显示其长度,矩阵显示行数与列数中的较大数)  s ...

  8. python 中文文档地址总结

    sqlalchemy: https://www.imooc.com/article/details/id/22343

  9. 今日SGU 5.9

    SGU 297 题意:就是求余数 收获:无 #include<bits/stdc++.h> #define de(x) cout<<#x<<"=" ...

  10. 【CS Round #39 (Div. 2 only) B】Circle Elimination

    [Link]:https://csacademy.com/contest/round-39/task/circle-elimination/ [Description] [Solution] 把n个点 ...