<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局-div与css搭配，不建议内部style方式</title>
</head>
<body>
<div style="width: 100%;height: 708px">
    <div style="background: green;width: 100%;height: 10%">头部</div>
    <div style="background: #f8f8f8;width: 20%;height: 80%;float: left;">导航栏</div>
    <div style="background: #f0f0f0;width: 80%;height: 80%;float: left;">我是ifrmae框架</div>
    <div style="background: red;width: 100%;height: 10%;clear: left">尾部</div>
    </div>
</body>
</html>

html5-div布局的更多相关文章

  1. html5 基本布局+新标签+新选择器 + 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  3. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  4. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  5. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  6. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  7. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  8. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  9. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  10. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

随机推荐

  1. 存储过程收集统计信息ORA-20000报错解决记录

    存储过程如下: create or replace procedure ad.table_analyse_bill( p_BillMonth in number,--bill_month p_tail ...

  2. JavaScript, DOM查找元素

    1.document.getElementById("id"); => IE8 及较低版本不区分ID的大小写 => IE7及较低版本中表单元素的name特性和ID都会被 ...

  3. sql server误删数据恢复delete（低效版）

    关键词:sql server误删数据恢复,mssql误删数据恢复,delete --切换数据库 use master --构建函数 Create PROCEDURE Recover_Deleted_D ...

  4. 【生产问题】记还原一个很小的BAK文件，但却花了很长时间，分析过程

    [生产问题]还原一个很小的BAK文件,但却花了很长时间? 关键词:备份时事务日志太大会发生什么?还原时,事务日志太大会怎么办? 1.前提: [1.1]原库数据已经丢失,只有这个bak了 [1.2]ba ...

  5. dedecms批量删除文档关键词可以吗

    这几天在重新整服务器,几个站点都是用dedecms搭建的,版本相对比较早,虽然都已经打了补丁,但客户还是在纠结,所以就下载了新的系统进行搭建(注意编码要和原来的一样),导入数据,一切安好,可发现后台有 ...

  6. RN全局的变量，方法，全局类，全局类方法

    为了方便学习,很简单的小Demo,不懂可以下方留言,百分百原创,相互学习,相互进步 全局的方法 创建一个js文件,命名OvallAll //全局的方法 //这里export default 只能输出一 ...

  7. Python3学习之路~6.5 私有属性和私有方法

    属性分为静态属性和动态属性,静态属性就是变量,动态属性就是方法.但是一般我们说的属性就是变量,方法就是方法.私有属性/方法就是外面访问不了,只有自己能够访问的属性/方法.如何将属性和方法分别变成私有属 ...

  8. 002-pro ant design-Unexpected end of JSON input while parsing near '...错误解决方案

    解决方法:先清除缓存,再重新安装 清除缓存 npm cache clean --force 重新安装 npm install

  9. docker知识点

    1  安装 http://www.runoob.com/docker/centos-docker-install.html 2  dockerhub官网找到 emqttd 执行 docker pull ...

  10. （转）redis分布式锁-SETNX实现

    Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXists.这系列的命令非常有用,这里讲使用SETNX来实现分布式锁 ...