<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. 研究一些复杂java开源软件代码的体会（转）

    原文地址:http://herman-liu76.iteye.com/blog/2349026     有时候看源代码是非常有趣的事情,象是思考游戏,象是思考棋局...     平时做J2EE项目中, ...

  2. RHEL7.1安装VNC

    1.安装包 yum install vnc* -y 2.创建password vncserver 3.创建參数文件 [root@single ~]# cp /lib/systemd/system/vn ...

  3. [Javascript] Specify this using .call() or .apply()

    A function's this argument is usually set implicitly, depending on how the function is called. Ordin ...

  4. Icomparer和Icomparable集合排序

    c#中实现对象集合的排序可以使用ArrayList中的Sort()方法,而有比较才能谈排序,因为不是基本类型(如string ,int.double......等)所以.NET Framework不可 ...

  5. HTTP基础知识整理

    http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...

  6. SpringMVC-@RequestMapping的参数和用法

    RequestMapping里面的注解包含的参数如图: RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. ...

  7. readonly&&declare&&unset &&export&&env环境变量

    readonly命令用于定义只读shell变量和shell函数.readonly命令的选项-p可以输出显示系统中所有定义的只读变量. 选项 -f:定义只读函数: -a:定义只读数组变量: -p:显示系 ...

  8. HDFS简单介绍及用C语言訪问HDFS接口操作实践

    一.概述 近年来,大数据技术如火如荼,怎样存储海量数据也成了当今的热点和难点问题,而HDFS分布式文件系统作为Hadoop项目的分布式存储基础,也为HBASE提供数据持久化功能,它在大数据项目中有很广 ...

  9. 8lession-基础类型转化

    Python数据类型转换 有时候,我们需要对数据内置的类型进行转换,数据类型的转换,你只需要将数据类型作为函数名即可. 以下几个内置的函数可以执行数据类型之间的转换.这些函数返回一个新的对象,表示转换 ...

  10. JavaScript--数据结构之队列

    5.1 队列的操作 队列是特殊的列表,只能一端入队(队尾)插入操作,一端出队(队头)删除操作.底层用数组,利用javascript数组优于其它语言的数组的方法,shift();删除第一个元素,push ...