HTML&CSS基础-简单布局

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>简单布局</title>

        <style type="text/css">

            /*清除默认样式*/

            *{

                margin: 0;

                padding: 0;

            }

            /*设置头部div*/

            .header{

                /*设置宽度*/

                width: 1000px;

                /*设置高度*/

                height: 100px;

                /*设置背景颜色*/

                background-color: red;

                /*设置居中*/

                margin: 0 auto;

            }

            .content{

                /*设置宽度*/

                width: 1000px;

                /*设置高度*/

                height: 300px;

                /*设置背景颜色*/

                background-color: yellow;

                /*设置居中*/

                margin: 10px auto;

            }

            /*设置content中小div的样式*/

            .news{

                width: 200px;

                height: 100%;

                background-color: blue;

                float: left;

            }

            .music{

                width: 580px;

                height: 100%;

                background-color: green;

                /*向左浮动*/

                float: left;

                /*设置边距*/

                margin: 0 10px;

            }

            .moive{

                width: 200px;

                height: 100%;

                background-color: red;

                float: left;

            }

            .footer{

                /*设置宽度*/

                width: 1000px;

                /*设置高度*/

                height: 200px;

                /*设置背景颜色*/

                background-color: deeppink;

                /*设置居中*/

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <!--头部div-->

        <div class="header"></div>

        <!--主体内容-->

        <div class="content">

            <div class="news"></div>

            <div class="music"></div>

            <div class="moive"></div>

        </div>

        <!--底部信息div-->

        <div class="footer"></div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

JavaScript基本数据类型介绍的更多相关文章

  1. JavaScript 的数据类型 相关知识点

    (1)基本数据类型介绍 JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type) 或者说是:可以拥有方法的类型和不能拥有方法的类型 或者说是 ...

  2. JavaScript判断数据类型总结

    最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断网页特效,在此做一个总结吧! 一.JS中的数据类型  1.数值型(Number):包 ...

  3. JavaScript基本数据类型

    JavaScript基本数据类型 在JavaScript种一共有6种数据类型:Null.Undefined.Boolean.String.Number.Object.其中Object是一种复杂数据类型 ...

  4. JavaScript的基本介绍

    JavaScript入门介绍 输出语句:document.write()   1.执行顺序:从上到下,每一天语句是要加分号的,如果不加的话,浏览器会默认帮你自动添加,分号.   2.注释:一行注释就是 ...

  5. （3）javascript的数据类型

    本篇学习资料主要讲解javascript中的数据类型 Javascript的数据类型 Javascript的数据类型:即一个数据不必首先做声明,可以在使用或赋值时再确定其数据的类型,当然也可以先声明该 ...

  6. JS-安全检测JavaScript基本数据类型和内置对象的方法

    前言:在前端开发中经常会需要用到检测变量数据类型的需求,比如:判断一个变量是否为undefined或者null来进行下一步的操作,今天在阅读“编写高质量代码-改善JavaScript程序的188个建议 ...

  7. Redis常用数据类型介绍、使用场景及其操作命令

    Redis常用数据类型介绍.使用场景及其操作命令 本文章同时也在cpper.info发布. Redis目前支持5种数据类型,分别是: 1.String(字符串) 2.List(列表) 3.Hash(字 ...

  8. JavaScript基础——数据类型

    JavaScript使用数据类型来确定如何处理被分配给一个变量的数据.变量的类型决定了你可以对变量进行什么操作,如循环或者执行.下面描述了最常用的变量类型. 字符串(String):此数据类型将字符数 ...

  9. Hadoop数据类型介绍

    我们知道hadoop是由Java 编程写的.因此我们使用Java开发环境来操作HDFS,编写mapreduce也是很自然的事情.但是这里面hadoop却对Java数据类型进行了包装,那么hadoop的 ...

随机推荐

  1. CCNode详解

    cocos2d的所有类都以CC开头,那么实际上这个类的名字就是Node,类如其名,这个类的实例就是一个节点.Cocos2d的类是树状继承的,而在内存中,各个实例之间也是以“树”这种数据结构相关联的., ...

  2. WebGL模型拾取——射线法

    今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转, ...

  3. 【容器魔方解读】AWS Re:Invent 2018大会

    每年云计算领域技术与商业风向标之一的AWS Re:Invent大会上周在美国拉斯维加斯召开,如往届一样,AWS密集发布了上百项的新产品或新技术.随着国内近两年云计算尤其是公有云的普及度越来越高,国内各 ...

  4. Python与rrdtool的结合模块

    rrdtool(round robin database)工具为环状数据库的存储格式,round robin是一种处理定量数据以及当前元素指针的技术.rrdtool主要用来跟踪对象的变化情况,生成这些 ...

  5. Alpha版本事后诸葛亮

    目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结: 本小组和其他组的评分 分工和贡献分 全组讨论的照片 问题 第一组提问回答:爸爸饿了队 第二组提问回答:拖 ...

  6. redisCluster数据持久化

    Redis的数据回写机制 Redis的数据回写机制分同步和异步两种, 同步回写即SAVE命令,主进程直接向磁盘回写数据.在数据大的情况下会导致系统假死很长时间,所以一般不是推荐的. 异步回写即BGSA ...

  7. WPF使用路径（URI）引用资源文件

    Uri uri = new Uri("pack://application:,,,/程序集名称;component/Resources/bj.png", UriKind.Absol ...

  8. DataGridView显示行号-RowPostPaint

    DataGridView控件在显示数据时,我们有时候需要显示行号,以便检索查看方便使用. 但DataGridView默认没有设置显示行号的属性. 此时我们只要在DataGridView的RowPost ...

  9. vue 跳转路由传参数用法

    // 组件 a <template> <button @click="sendParams">传递</button> </template ...

  10. Installing OpenSSH from the Settings UI on Windows Server 2019 or Windows 10 1809

    Installing OpenSSH from the Settings UI on Windows Server 2019 or Windows 10 1809 OpenSSH client and ...