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. sqlserver 各种判断是否存在（表、视图、函数、存储过程等）

    1.判断表是否存在 select * from sysobjects where id = object_id(表名) and OBJECTPROPERTY(id, N'IsUserTable') = ...

  2. FindUserByPageServlet

    package com.hopetesting.web.servlet;import com.hopetesting.domain.PageBean;import com.hopetesting.do ...

  3. 2.使用Lucene开发自己的搜索引擎–indexer索引程序中基本类介绍

    (1)Directory:Directory类描述了Lucene索引的存放位置,它是一个抽象,其子类负责具体制定索引的存储路径.FSDirectory.open方法来获取真实文件在文件系统中的存储路径 ...

  4. Java高精度基础+开根

    在焦作站的acm网络赛中遇到了一个高精度开根的水题--但是那时候WA了 后面学写java补题还T了orz 所以写一篇文章来记录一下java的大整数类型的基础和开根还有一点心得体会吧 首先给那一题的题面 ...

  5. <转>C++继承中虚函数的使用

      转自:http://blog.csdn.net/itolfn/article/details/7412364 一:继承中的指针问题. 1． 指向基类的指针可以指向派生类对象,当基类指针指向派生类对 ...

  6. Latex-安装_第一天

    LaTex安装 Windows 小知识: \(Tex\)来源technology,希腊词根是\(tex\),Latex应该读成"拉泰赫". https://miktex.org/ ...

  7. SWPUCTF_2019_login(格式字符串偏移bss段）

    题目的例行检查我就不放了,将程序放入ida中 很明显的值放入了bss段的格式字符串,所以我们动态调试一下程序 可以看到ebp这个地方0xffd0dd17-->0xffd0dd38-->0x ...

  8. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

  9. ubuntu查系统信息及系统服务

    系统信息 uname -a               # 查看内核/操作系统/CPU信息 cat /etc/issue           # 查看操作系统版本 cat /proc/version ...

  10. iOS越狱插件源查找及避免插件劫持

    1.关于 iOS越狱插件源查找地址:https://www.ios-repo-updates.com/ 2.注意 不要使用不可靠的第三方源,其可能存在劫持,而你却茫然不知. 使用上面的网站查找你需要的 ...