div布局

<html>

<head>

<title>div布局 </title>

<meta charset="utf-8">

<style>

.toubu {width:100%;height:100px;background:aqua;}

.zhuti {width:80%;height:600px;background:red;float:left;}

.left  {width:20%;height:600px;background:green;float:left}

.dibu  {width:100%;height:200px;background:blue;clear:both}

</style>

</head>

<body style=margin:0px;>

<div class="toubu">头部</div>

<div class="left">左边</div>

<div class="zhuti">主题部分</div>

<div class="dibu">底部</div>

</body>

</html>

解释：

1.div标签属于块级元素,自己会独占一行,要想让多个div从左到右排列，需要用到     "浮动"属性。

2.最后一个div需要清除左浮动效果

clear:both;

属性意思为：不允许有浮动对象

3.设置div头部的时候，头部会离浏览器最上边默认或有8px的间距。我们可以通过外边距标签，将8px的空白缝隙取消。

style=margin:0px;

css基础-2 div布局的更多相关文章

  1. HTML基础 用div布局实现一个简单网页

    div布局如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  2. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  3. HTML与CSS绘制简单DIV布局

    HTML代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

  5. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  6. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  7. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  8. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  9. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

随机推荐

  1. Nodejs源码解析之module

    modulejs的导入 Require函数详解 module路径解析 module.js的导入 module.js是由node.js在Nodejs程序启动的时候导入的.module.js中使用的req ...

  2. 【力扣】剑指 Offer 25. 合并两个排序的链表

    输入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的. 示例1: 输入:1->2->4, 1->3->4输出:1->1->2->3-> ...

  3. Windows下搭建FFmpeg开发调试环境

    背景 如果你是一个FFmpeg的使用者,那么绝大部分情况下只需要在你的程序中引用FFmpeg的libav*相关的头文件,然后在编译阶段链接相关的库即可. 但是如果你想调试FFmpeg内部相关的逻辑,或 ...

  4. ASP.NET Web API路由解析

    前言 本篇文章比较长,仔细思考阅读下来大约需要15分钟,涉及类图有可能在手机显示不完整,可以切换电脑版阅读. 做.Net有好几年时间了从ASP.NET WebForm到ASP.NET MVC再到ASP ...

  5. 12月第二周bug总结

    1.bug总结 复制 别人的依赖和依赖指定类型 报错 解决:依赖还没加载完成,你就指定了版本型号,所以报错,所以先让他加载依赖,后指定该型号 eureka(优瑞卡) 注册服务 控制台没有显示出来的话 ...

  6. Containing ViewControllers

    Containing ViewControllers 转自:https://www.cocoanetics.com/2012/04/containing-viewcontrollers/ For a ...

  7. Mybatis环境搭建及测试

    1.新建java project,导入相应jar包 本次使用到的mybatis-3.2.7版本 mybatis需要jar包:mybatis-3.2.7.jar.lib文件下的依赖jar mysql驱动 ...

  8. git 基本命令及idea集成使用

    目录 git基本命令使用 设置签名 gitHub 服务配置秘钥 上传代码 更新代码 分支管理 bat脚本更新 idea集成git git基本命令使用 设置签名 签名和秘钥大多数是一起设置的,设置后一般 ...

  9. 其他（Excel函数集团）

    此处文章均为本妖原创,供下载.学习.探讨! 文章下载源是Office365国内版1Driver,如有链接问题请联系我. 请勿用于商业!谢谢 下载地址:https://officecommunity-m ...

  10. 论文翻译：2021_MetricGAN+: An Improved Version of MetricGAN for Speech Enhancement

    论文地址:MetricGAN+:用于语音增强的 MetricGAN 的改进版本 论文代码:https://github.com/JasonSWFu/MetricGAN 引用格式:Fu S W, Yu ...