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. Dubbo消费者异步调用Future使用

    Dubbo的四大组件工作原理图,其中消费者调用提供者采用的是同步调用方式.消费者对于提供者的调用,也可以采用异步方式进行调用.异步调用一般应用于提供者提供的是耗时性IO服务 一.Future异步执行原 ...

  2. Spring Batch Event Listeners

    Learn to create and configure Spring batch's JobExecutionListener (before and after job), StepExecut ...

  3. Spring组合注解与元注解

    目录 注解说明 源代码 使用范例 注解说明 元注解:可以注解到别的注解上的注解,所以元注解首先基于条件@Target({ElementType.TYPE}) ,目标使用在类文件上 . 组合注解:连个元 ...

  4. 【力扣】95. 不同的二叉搜索树 II

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...

  5. 论文翻译：2021_A Perceptually Motivated Approach for Low-complexity, Real-time Enhancement of Fullband Speech

    论文地址:一种低复杂度实时增强全频带语音的感知激励方法 论文代码 引用格式:A Perceptually Motivated Approach for Low-complexity, Real-tim ...

  6. 07-Spring5 WebFlux响应式编程

    SpringWebFlux介绍 简介 SpringWebFlux是Spring5添加的新模块,用于Web开发,功能和SpringMvc类似的,WebFlux使用当前一种比较流行的响应式编程框架 使用传 ...

  7. Gitlab Flow到容器

    一.简介 长话短说,本文全景呈现我司项目组gitlab flow && devops Git Flow定义了一个项目发布的分支模型,为管理具有预定发布周期的大型项目提供了一个健壮的框架 ...

  8. Nginx配置正向代理

    目录 一.简介 二.配置 三.参数 一.简介 场景: 用于内网机器访问外网,就需要正向代理,类似VPN. 原理: A机器可以访问外网,而B,C,D机器只能内网,便可以设立正向代理,将B,C,D机器的访 ...

  9. Log4j2再发新版本2.16.0，完全删除Message Lookups的支持，加固漏洞防御

    昨天,Apache Log4j 团队再次发布了新版本:2.16.0! 2.16.0 更新内容 默认禁用JNDI的访问,用户需要通过配置log4j2.enableJndi参数开启 默认允许协议限制为:j ...

  10. [BUUCTF]REVERSE——[WUSTCTF2020]Cr0ssfun

    [WUSTCTF2020]Cr0ssfun 附件 步骤: 例行检查,无壳儿,64位程序,直接ida载入,检索程序里的字符串,根据提示跳转 看一下check()函数 内嵌了几个检查的函数,简单粗暴,整理 ...