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. 【Linux】【Services】【MessageQueue】搭建高可用rabbitMQ

    1. 简介 1.1. 官方网站: https://www.rabbitmq.com/ 1.2. 配置文档:https://docs.openstack.org/ha-guide/shared-mess ...

  2. 【Linux】【Services】【Disks】bftfs

    1. 简介 1.1 Btrfs(B-tree,Butter FS,Better FS) 1.2. 遵循GPL,由oracle在2007年研发,支持CoW 1.3. 主要为了替代早期的ext3/ext4 ...

  3. spring boot springMVC扩展配置 。WebMvcConfigurer ，WebMvcConfigurerAdapter

    摘要: 在spring boot中 MVC这部分也有默认自动配置,也就是说我们不用做任何配置,那么也是OK的,这个配置类就是 WebMvcAutoConfiguration,但是也时候我们想设置自己的 ...

  4. 使用Spring JDBC连接数据库（以SQL Server为例）

    一.配置Spring JDBC 1.导入相关jar包 (略) 2.配置文件applicationContext.xml <?xml version="1.0" encodin ...

  5. 【力扣】122. 买卖股票的最佳时机 II

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...

  6. 【Vulfocus解题系列】手把手教你使用Vulfocus公开靶场对Apache Log4j2远程命令执行漏洞复现

    前言 关于这个漏洞,啥都不用说了,直接发车. 工具下载 JNDIExploit:https://github.com/0x727/JNDIExploit 复现过程 启动靶场环境 直接用vulfocus ...

  7. [源码解析] PyTorch 分布式(17) --- 结合DDP和分布式 RPC 框架

    [源码解析] PyTorch 分布式(17) --- 结合DDP和分布式 RPC 框架 目录 [源码解析] PyTorch 分布式(17) --- 结合DDP和分布式 RPC 框架 0x00 摘要 0 ...

  8. python selenium 多账户自动登入163邮箱

    pycharm一些快捷键: ' ctrl ' +' / ' :注释 ' Tab ' :同时缩进 ' shift ' +' Tab ' :左移 一次缩进 本文webinfo.txt路径:C:\Pytho ...

  9. CF615A Bulbs 题解

    Content 有 \(n\) 个灯,一开始它们都是关着的.有 \(m\) 个按钮,每个按钮可以开 \(k\) 盏灯.求能否通过这 \(m\) 个按钮使得所有灯全部都开着. 数据范围:\(1\leqs ...

  10. java 多线程：线程通信-等待通知机制wait和notify方法;(同步代码块synchronized和while循环相互嵌套的差异);管道通信：PipedInputStream;PipedOutputStream;PipedWriter; PipedReader

    1.等待通知机制: 等待通知机制的原理和厨师与服务员的关系很相似: 1,厨师做完一道菜的时间不确定,所以厨师将菜品放到"菜品传递台"上的时间不确定 2,服务员什么时候可以取到菜,必 ...