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. 【第七课】Nginx反向代理和负载均衡

    目录 一.Nginx负载均衡集群 介绍 二.实现一个简单的负载均衡 三.Nginx负载均衡组件介绍 四.Nginx负载均衡实际应用 一.Nginx负载均衡集群 介绍 负载均衡(Load Balance ...

  2. ElasticSearch入门 第四篇：使用C#添加和更新文档

    这是ElasticSearch 2.4 版本系列的第四篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  3. 浅谈 iOS 中的 Activity Indicator

    Activity Indicator 是iOS开发中必不可少的一个视图.本文就简单地总结一下这个Activity Indicator 的使用方法. 默认 Activity Indicator 以下的函 ...

  4. python list的一个面试题

    面试题''' 一个list,里面的数字偶数在左边,奇数在右边,不借助其他列表 ''' def userlist(add_list): if type(add_list)==list: if len(a ...

  5. jersey2 整合 spring + hibernate + log4j2

    整合 spring jersey2 官方还未正式支持 spring4, 但网上有好多支持方案,折腾了一圈后,还是用了 spring3; pom 添加以下依赖配置 <!-- Spring --&g ...

  6. Redis简介与Memcached的比较

    Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...

  7. idea使用actiBPM插件中文乱码

    idea 安转activiti插件后,编辑流程图发现保存后中文乱码,并且idea的字符集(Settings—>Editor—>File Encodings)已经设置为UTF-8,流程图中中 ...

  8. Cloud Native Weekly | KubeCon首登中国，华为云亮相KubeCon 2018，微软云服务又罢工

    1.KubeCon首登中国,Kubernetes将如何再演进? 11月14日,由CNCF发起的云原生领域全球最大的峰会之一KubeCon+CloudNativeCon首次登陆中国,中国已经成为云原生领 ...

  9. 区块链--Bitcoin共识机制

    目录 中心化和去中心化 比特币共识机制 拜占庭将军共识机制 比特币成功解决了拜占庭问题 中心化和去中心化 中心化模式: 优点:效率高 缺点:中间层次太多(组织层次连接) 去中心化模式: 缺点:效率低 ...

  10. SCRUM 12.03

    第二轮迭代从今天起正式开始了.12月3日,我们举行了一次组会. 第一轮迭代结束时,我们意识到第二轮迭代需要实现的功能主要如下: 在下次迭代的时候实现对多个网站的信息进行比较取最优惠的选择,目前我们劲针 ...