<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. CodeForcesGym 100502K Train Passengers

    Train Passengers Time Limit: 1000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  2. CCF模拟题 有趣的数

    有趣的数 时间限制: 1.0s 内存限制: 256.0MB   问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, 2, 3,且这四个数字都出现过至少一次. 2. 所有的0都 ...

  3. 洛谷 P1244 青蛙过河

    P1244 青蛙过河 题目描述 有一条河,左边一个石墩(A区)上有编号为1,2,3,4,…,n的n只青蛙,河中有k个荷叶(C区),还有h个石墩(D区),右边有一个石墩(B区),如下图所示.n只青蛙要过 ...

  4. Windows 操作系统与 .NET Framework

    Windos 2000 在单位的机房里好不easy才找到一台安装 Windows 2000 Server SP4 操作系统的server.这台硕果仅存的server到本月底也要退役了. Windows ...

  5. PostgreSQL递归查询实现树状结构查询

    在Postgresql的使用过程中发现了一个非常有意思的功能,就是对于须要相似于树状结构的结果能够使用递归查询实现.比方说我们经常使用的公司部门这样的数据结构.一般我们设计表结构的时候都是相似以下的S ...

  6. JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  7. 聊聊高并发（十九）理解并发编程的几种&quot;性&quot; -- 可见性，有序性，原子性

    这篇的主题本应该放在最初的几篇.讨论的是并发编程最基础的几个核心概念.可是这几个概念又牵扯到非常多的实际技术.比方Java内存模型.各种锁的实现,volatile的实现.原子变量等等,每个都可以展开写 ...

  8. 如何覆盖GCE的DHCP MTU选项

     如何覆盖GCE的DHCP MTU选项 在GCE上托管的Linux IPSec隧道不能打开谷歌,这与MTU有关.谷歌管理员认为"改变这个值是一件困难的事情"https://cl ...

  9. css+ js 实现圆环时钟

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. centos 6.7下安装rabbitmq 3.6.6过程

    准备,请确保有root权限或者sudo权限,不然不用继续看下去了. 1.erland的安装 首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 若没有安装,则 y ...