<!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. delphi加载ADOQUERY

    CxgridDBTableView3.ClearItems;//这里是cxgrid的表层,先清除之前的列再创建  for I:=0 to adoquery1.FieldCount-1 do  begi ...

  2. 转：Spring系列之beanFactory与ApplicationContext

    原文地址:Spring系列之beanFactory与ApplicationContext 一.BeanFactoryBeanFactory 是 Spring 的“心脏”.它就是 Spring IoC ...

  3. 终于解决“Git Windows客户端保存用户名与密码”的问题（转载）

    add by zhj:不建议用这种方法,建议用SSH,参见 TortoiseGit密钥的配置 http://www.cnblogs.com/ajianbeyourself/p/3817364.html ...

  4. knn/kmeans/kmeans++/Mini Batch K-means/Affinity Propagation/Mean Shift/层次聚类/DBSCAN 区别

    可以看出来除了KNN以外其他算法都是聚类算法 1.knn/kmeans/kmeans++区别 先给大家贴个简洁明了的图,好几个地方都看到过,我也不知道到底谁是原作者啦,如果侵权麻烦联系我咯~~~~ k ...

  5. objenesis

    1.objenesis About Objenesis is a small Java library that serves one purpose: To instantiate a new ob ...

  6. LeetCode-37.Sudok Solver

    Write a program to solve a Sudoku puzzle by filling the empty cells. A sudoku solution must satisfy  ...

  7. django基础-01：软件框架，MVC框架，MVT

    1. 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能,模 ...

  8. centos7.6删除重新安装python和yum

    最近在开发一个项目时出现了错误,需要重新安装python和yum,怎么安装呢?随ytkah一起来看看吧.ytkah用的linux分支的centos7.6,各位朋友在下载源的时候要注意版本的区分.现在开 ...

  9. 将 java 改写成 beanshell 的经验之谈

    下面经验仅仅针对 bsh for android 而谈, PC 上 beanshell 无需这样改. public class TimeTest  改写为闭包: TimeTest()  闭包末尾添加语 ...

  10. 关于ARMv8另外几个问题

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/qianlong4526888/article/details/27510675 问题1:支持ARMv ...