页面代码：

<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />

  <title>div布局要点</title>

  <script src="./qrcodejs/jquery.min.js" type="text/javascript" charset="utf-8"></script>

  <style>

    *{

        margin:0px;

        padding:0px;

    }

    </style>

 </head>

 <body>

  <div id="wrapper">

   <div id="header" style="width:100%; background-color: #333333; float:left; position: relative;">

    <div id="left" style="width:70%; background-color:yellow; float:left;word-wrap:break-word;word-break:break-all;">

      头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div

    </div>

    <div style="clear:both;visibility:hidden;display:none"></div>

    <div id="right" style="width:30%; background-color:green; float:right; position: absolute;  top: 0; bottom: 0; right: 0;">

     <table style="height:100%; width:100%;table-layout:fixed;">

      <tbody>

       <tr>

        <td style="word-wrap:break-word; vertical-align: center; text-align: right;"> 头部右边div头部右边div头部右边div头部右边div</td>

       </tr>

      </tbody>

     </table>

    </div>

   </div>

   <div style="clear:both;visibility:hidden;display:none"></div>

   <div id="content" style="width:100%; background-color: red; float:left;word-wrap:break-word;word-break:break-all;text-align: left;">

     主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div

   </div>

   <div style="clear:both;visibility:hidden;display:none"></div>

   <div id="footer" style="width:100%; background-color: #989898; float:left;word-wrap:break-word;word-break:break-all;text-align: center;">

    页脚页脚页脚页脚页脚页脚页脚

   </div>

  </div>

 </body>

</html>

页面效果：

div页面布局基本布局知识的更多相关文章

  1. DIV页面布局，开局代码

    DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  3. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  7. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  8. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  10. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

随机推荐

  1. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第6节 static静态_11_静态static关键字概述

    static静态关键字的基本含义 红色教室都划掉 一份数据分给三个人用,而不是三个人相同的数据,三个对象写三遍没有必要. 只写一遍教室,写在学生的类当中.这样还就可以省内存.如果要换教室的话 ,只需要 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_6_Map集合遍历键值对方式

    增强for

  3. TensorFlow学习笔记4-线性代数基础

    TensorFlow学习笔记4-线性代数基础 本笔记内容为"AI深度学习".内容主要参考<Deep Learning>中文版. \(X\)表示训练集的设计矩阵,其大小为 ...

  4. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  5. python基础-5 冒泡排序、递归

    上节总结 一.上节内容补充回顾 1.lambda func = lambda x,y: 9+x 参数: x,y 函数体:9+x ==> return 9+x func: 函数名 def func ...

  6. AcWing 802. 区间和

    (https://www.acwing.com/problem/content/804/) 假定有一个无限长的数轴,数轴上每个坐标上的数都是0. 现在,我们首先进行 n 次操作,每次操作将某一位置x上 ...

  7. Python 3实现网页爬虫

    1 什么是网页爬虫 网络爬虫( 网页蜘蛛,网络机器人,网页追逐者,自动索引,模拟程序)是一种按照一定的规则自动地抓取互联网信息的程序或者脚本,从互联网上抓取对于我们有价值的信息.Tips:自动提取网页 ...

  8. javascript中无法将string转化为json对象

    在一次项目之中,我要对请求的相应做一些处理,得到的响应差不多是这中格式'{total:1,result:[{"age":1}]}'.可以看到我拿到的这个相应和JSON的格式是非常相 ...

  9. JavaScript基础2——下拉列表左右选择

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. vue主动刷新页面及列表数据删除后的刷新方法

    在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...