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】【SaaS】Docker+kubernetes（13. 部署Jenkins/Maven实现代码自动化发布）

    1. 简介 Jenkins: 官方网站:https://jenkins.io/ 下载地址:https://jenkins.io/download/ war包下载:http://mirrors.jenk ...

  2. idea开发环境搭建ssh

    idea2020完整web开发(struts2+spring+hibernate) idea破解 第一步: 下载最新的 IDEA 2020.3.2 版本安装包 https://www.jetbrain ...

  3. 在Eclipse中编写jQuery代码时产生的错误（连载）

    1.Error:启动Eclipse中的服务,显示错误,端口号被占用 解决方法: 方式一:修改对应的端口号(实际情况实际处理) 方式二:在进程中关闭Eclispe重新打开即可(截图说明) 2.Error ...

  4. ES6解构赋值的简单使用

    相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...

  5. 『忘了再学』Shell基础 — 2、Shell的作用与分类

    目录 1.Shell的作用 2.Shell的分类 1.Shell的作用 Shell除了能解释用户输入的命令,将它传递给内核,还可以: 调用其他程序,给其他程序传递数据或参数,并获取程序的处理结果. 在 ...

  6. 日历共享（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 为了某一个项目,我们建好了一整套的日历,除了标准日历里加上了所有的假期以外,其他来自火星的水星的金星的土星的木星的BT的不 ...

  7. windows（Linux）创建”内网穿透“工具（通过自定义域名访问部署于内网的 web 服务，可以用于调试微信支付，支付宝支付，微信公众号等开发项目）

    此方法需要自有服务器和域名,如果没有这些的开发者, 可以参考钉钉提供的内网穿透方式:https://www.cnblogs.com/pxblog/p/13862376.html 一.准备工作 1.域名 ...

  8. Linux(Centos)内存占用过高处理

    查看内存占用最大 ps aux| grep -v "USER" |sort -n -r -k 4 |awk 'NR==1{ print $0}' 命令查看占用内存最大的10个进程 ...

  9. Spring实现自定义注解并且配置拦截器进行拦截

    有时候我们会自定义注解,并且需要配置拦截器对请求方法含有该自定义注解的方法进行拦截操作 自定义注解类 NeedToken.java import java.lang.annotation.Docume ...

  10. JAVA获取当前日期的下周一到下周日的所有日期集合

    /** * 获取当前日期的下周一到下周日的所有日期集合 * @return */ public static List getNextWeekDateList(){ Calendar cal1 = C ...