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. Grid布局20行代码快速生成瀑布流

    网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...

  2. 推荐一个MacOS苹果电脑系统解压缩软件

    废话少说,直入主题: 连接:https://www.keka.io/en/ 开源免费好用(个人觉得比betterzip好用哈),附一张这货的图标:

  3. A星寻路算法入门(Unity实现)

    最近简单学习了一下A星寻路算法,来记录一下.还是个萌新,如果写的不好,请谅解.Unity版本:2018.3.2f1 A星寻路算法是什么 游戏开发中往往有这样的需求,让玩家控制的角色自动寻路到目标地点, ...

  4. 177. Convert Sorted Array to Binary Search Tree With Minimal Height【LintCode by java】

    Description Given a sorted (increasing order) array, Convert it to create a binary tree with minimal ...

  5. 给VMware下的Linux扩展磁盘空间(以CentOS6.3为例)

    参照这篇文章进行的,但是和作者的步骤有些不一样. #查看挂载点:df -h#显示: 文件系统 容量 已用 可用 已用%% 挂载点/dev/mapper/vg_dc01-lv_root 47G 12G ...

  6. 使用Arduino驱动基于ST7533芯片的TFT屏

    在合宙通信买了一个1.8寸的TFT屏,驱动芯片是ST7533,本来打算使用Air800直接驱动,但由于其他原因,放弃了.于是尝试使用arduino驱动,为了屏幕刷新速度更快,采用硬件SPI. 硬件连接 ...

  7. Linux命令(六) 查看文件 cat tac more less tail

    如果要查看文件,使用 cat  less  tac   tail  和 more 中的任意一个即可. 1.cat 使用 cat 命令查看文件时会显示整个文件的内容,注意cat只能查看文本文件的内容,如 ...

  8. json-server(copy)

    https://blog.csdn.net/wangle_style/article/details/79455508(原文章地址) 新版vue-cli如何使用json-server来mork 原创  ...

  9. PSP(3.13——3.15)以及周记录

    3.13 0:00 4:00 10 230 Cordova插件1,的尝试 N min 10:50 11:30 10 30 英语百词斩 N min 18:00 22:55 20 275 写博客 Y mi ...

  10. 窗体的构造函数和OnCreate事件

    窗体的构造函数和创建事件和OldCreateOrder属性有很大的关系. 情况1: 如果窗体继承自TForm,且有如下形式: 1.      constructor TForm1.Create(AOw ...