<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. react-native-swiper苹果正常显示，Android不显示

    在使用react-native-swiper时,最好不要放到(FlatList , SectionList,ListView,ScrollView 等)组件中,否则Android 可能不会正常显示图片 ...

  2. UESTC 360 Another LCIS

    Another LCIS Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on UESTC. Original ...

  3. HDU 5375 Gray code（DP）

    题意:给一串字符串,里面可能出现0,1,?,当中问号可能为0或1,将这个二进制转换为格雷码后,格雷码的每位有一个权值,当格雷码位取1时.加上该位权值,求最大权值和为多少. 分析:比赛的时候愚了.竟然以 ...

  4. Json技术

    JSON语法是一种用于传输和生成数据的协定,很类似于C家族的语言,所以很容易被C家族的语言所解析.对象:对象包含再{}之间属性:采用Key-Value对来表示.属性之间使用逗号分开.  string ...

  5. 阅读笔记—JSP

    JSP页面概述 JSP(JavaServer Page)是一种动态页面技术,它在java web应用中主要实现表现逻辑.JSP页面是在HTML页面中嵌入JSP元素的动态Web页面,一般来说JSP页面中 ...

  6. Flume的Storage&Master

    storage是存储系统,可以是一个普通file,也可以是HDFS,HIVE,HBase,分布式存储等. Master是管理协调Agent和Collector的配置等信息,是flume集群的控制器.

  7. 开源性能测试工具——jemeter介绍+安装说明

    一. Apache JMeter介绍 1. Apache JMeter是什么 Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量. ...

  8. Maven学习笔记5

    Web项目的部署: web部署 配置步骤 生成项目方式不是quickstart,而是webapp. 默认目录结构,需要修改配置. 重新配置project facets和java compiler.并重 ...

  9. Vue的学习--怎么在vue-cli中写网页

    vue.min.js和vue-cli的区别和联系我现在还是没有太清楚,大概是还没搞清楚export default和new Vue的区别,先浅浅记录一下怎么“用vue-cli来写网页”. “vue-c ...

  10. BZOJ3514: Codechef MARCH14 GERALD07加强版(LCT，主席树)

    Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M ...