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. Java虚拟机笔记（五）：JVM中对象的分代

    为什么要分代 为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我们要找到哪些对象没用, ...

  3. python编码你需要知道的编码风格

    此时你已经可以写一些更长更复杂的 Python 程序,是时候讨论一下 编码风格 了.大多数语言可以写(或者更明白的说, 格式化 )作几种不同的风格.有些比其它的更好读.让你的代码对别人更易读是个好想法 ...

  4. 使用DOS工具修复数据库

    当SQL Server 实例出现异常,无法远程链接时,数据库管理员需要登陆到SQL Server实例机器上,通过命令行工具,修复异常. 一,使用net命令行启动数据库 通过net start 命令启动 ...

  5. Execute SQL Task 如何返回结果数据集

    Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...

  6. RxJS v6 学习指南

    为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...

  7. stl源码剖析 详细学习笔记priority_queue slist

    // //  priority_queue.cpp //  笔记 // //  Created by fam on 15/3/16. // // //------------------------- ...

  8. nodejs 监控代码变动实现ftp上传

    被动模式下 //https://www.npmjs.com/package/watch //文件同步功能 var watch = require('watch'); var path = requir ...

  9. 机器学习之线性回归使用Python和tensorflow实现

    导入依赖包 import tensorflow as tf import numpy as np import matplotlib.pylab as plt from pylab import mp ...

  10. Scrum Meeting NO.5

    Scrum Meeting No.5 1.会议内容 暂时料理完了编译,可以写软工了.说多了都是泪T_T 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 修改url名.参数 √ 2 学习Jso ...