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. wind的R接口、况客RSDK学习,双冒号以及quantmod主题

    本文主要参考:来自segmentfault上的FinanceR的专栏 https://segmentfault.com/a/1190000004580610 并自己对生疏不解之处做了补充和注释. 当然 ...

  2. 【原创】Kakfa cluster包源代码分析

    kafka.cluster包定义了Kafka的基本逻辑概念:broker.cluster.partition和replica——这些是最基本的概念.只有弄懂了这些概念,你才真正地使用kakfa来帮助完 ...

  3. JAVA中的聚集和组合的区别和联系

    选自<JAVA语言程序设计-基础篇(原书第8版)> 定义:一个对象可以包含另一个对象.这两个对象之间的关系称为组合(composition). 组合实际上是聚集关系的一种特殊形式.聚集模拟 ...

  4. 第三十四章 metrics(2)- 搭建metrics平台

    一.基本架构图 1.整个架构组件: java客户端 dropwizard-metrics:springboot.hystrix的metric体层使用了这个,所以我们需要自己封装向statsd发包的方法 ...

  5. C++访问权限

    1.C++类本身没有访问权限的概念,就是class Base. 2.类成员的访问权限有:public.protected.private 3.类的继承方式有:public.protected.priv ...

  6. mongodb使用问题记录

    findOneAndUpdate(条件,更新,function(err,data){....}) 更新后返回的data值一直都是没有更新的数据状态, 原因:需要设置{new:true},这时返回的才是 ...

  7. 每日质量NPM包-classnames

    一.classnames 现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能 ...

  8. dex2jar 和 jd-gui 的安装与使用(转)

    出处:https://blog.csdn.net/katrinawj/article/details/80016315 将APK直接解压(修改后缀名为.zip,然后解压)后,可以看到目录下包含一个cl ...

  9. ajax返回填充的数据不显示

    原因:样式与id引用了其他的css或者js,删除其他样式,改变id就可以了

  10. UNIX网络编程 第1章:简介和TCP/IP

    1.1 按1.9节未尾的步骤找出你自己的网络拓扑的信息. 1.2 获取本书示例的源代码(见前言),编译并测试图1-5所示的TCP时间获取客户程序.运行这个程序若干次,每次以不同IP地址作为命令行参数. ...