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. C#语法糖yield

    代码中经常遇到迭代数据集合的情况,当希望获取到一个IEnumerable<T>类型的集合,而又不想把数据一次性加载到内存中时, 可以考虑使用yield,yield关键字可实现用户的按需获取 ...

  2. JavaScript组成—— DOM、BOM、ECMAScript

    ECMAScript是JS的核心:提供核心语言功能 DOM(文档对象模型):提供访问和操作网页内容的方法和接口 BOM(浏览器对象模型):提供与浏览器交互的方法和接口 1. DOM(文档对象模型) 1 ...

  3. kafka0.8--0.11各个版本特性预览介绍

    kafka-0.8.2 新特性 producer不再区分同步(sync)和异步方式(async),所有的请求以异步方式发送,这样提升了客户端效率.producer请求会返回一个应答对象,包括偏移量或者 ...

  4. node.js学习笔记（四）——EventEmitter

    error 事件 EventEmitter 定义了一个特殊的事件 error,它包含了错误的语义,我们在遇到异常的时候通常会触发 error 事件.当 error 被触发时,EventEmitter ...

  5. FastDFS教程Ⅰ-文件服务器安装与Nginx配置

    1.简介     FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载 ...

  6. centos7 RabbitMQ部署

    一.RabbitMQ简单介绍在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务 ...

  7. Docker部署Zookeeper容器

    获取zookeeper镜像 docker pull zookeeper 创建zookeeper容器 docker run --name="zookeeper" -p 2181:21 ...

  8. GitHub 新手教程 一，GitHub 注册

    1,注册地址: https://github.com/ 2,输入账号.邮箱.密码: 3,选择 Free 免费账号: 4,选择一些基本信息(翻译后中文见下面的图): 翻译如下: 5,打开你注册用的邮箱, ...

  9. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 3 Statistics中的Introduction to SQL Server Statistics、Statistics and Execution Plans、Statistics Maintenance(译）

    <Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...

  10. CEPH LIO iSCSI Gateway

    参考文档: Ceph Block Device:http://docs.ceph.com/docs/master/rbd/ CEPH ISCSI GATEWAY:http://docs.ceph.co ...