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. ES6 箭头函数易出错细节

    箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target. 箭头函数基本语法 (参数1, 参数2, -, 参数N) => { 函数声明 ...

  2. 移动端H5页面上传图片或多张图片

    传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要 ...

  3. c语言连接mysql数据库的实现方法

    C语言连接mysql数据库,需要相应的头文件和lib文件,如果你安装Mysql数据库,会在安装目录下找到这些库文件,如果没有安装,也可以在网上找到 我这里也有一份网上找到的:/201205/other ...

  4. [转载]windows下PHP + Nginx curl访问本地地址超时卡死问题的解决方案

    原因: windows 下 nginx+php环境,不支持并发. 解决方案: 1.在配置nginx vhost时,需要同时运行的网站设置不同的fastcgi_pass的端口号 server { ser ...

  5. idea创建web项目教程

    官网下载idea,安装配置好后,双击进来,第一次创建项目时新建是这样的 第一步:   第二步:创建项目名和项目存放的路径 点finish进入这里   第三步: 第二步点OK进入这个页面,点上面那个加号 ...

  6. C++：多态浅析

    1.多态 在C++中由两种多态性: • 编译时的多态性:通过函数的重载和运算符的重载来实现的 • 运行时的多态性:通过类继承关系和虚函数来实现的 特别注意: a.运行时的多态性是指程序执行前,无法根据 ...

  7. vs2013的安装与使用 测试

    vs2013软件我去年已经用过,可是当时只是鉴于对于c语言的编程,并没有觉得好用,况且好多的功能自并没有去深入研究,所以当时对于这个软件还是排斥的.安装的时候是别人帮我装的,所以并没有在安装的过程有问 ...

  8. Alpha冲刺第4天

    Alpha第四天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  9. PAT 1063 计算谱半径

    https://pintia.cn/problem-sets/994805260223102976/problems/994805267860930560 在数学中,矩阵的“谱半径”是指其特征值的模集 ...

  10. Linux命令(二十七) 用户组管理命令

    Linux提供了一系列的命令管理用户组.用户组就是具有相同特征的用户集合.每个用户都有一个用户组,系统能对一个用户组中所有用户进行集中管理,通过把相同属性的用户定义到同一用户组,并赋予该用户自一定的操 ...