<!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. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  2. 自己写的运用bootstrap和angulajs框架写的demo

    登录html: <body ng-app="mainapp"> <div class="container"> <div clas ...

  3. iframe 和 父窗口传递

    iframe 向父窗口 window.parent.postMessage('向父窗口传递值',*); 父窗口向 iframe 内部子窗口传值 documnet.querySelector('ifra ...

  4. python解析VOC的xml文件并转成自己需要的txt格式

    在进行神经网络训练的时候,自己标注的数据集往往会有数据量不够大以及代表性不强等问题,因此我们会采用开源数据集作为训练,开源数据集往往具有特定的格式,如果我们想将开源数据集为我们所用的话,就需要对其格式 ...

  5. SC-FDM和OFDM的区别

    3GPP定义的LTE空中接口,在下行采用正交频分多址(OFDMA)技术,在上行采用的就是这个单载频频分多址(SC-FDMA)技术. SC-FDMA(Single-carrier Frequency-D ...

  6. 数据库文件MDF的空间占满了，没有自动增长是怎么回事？

    前提: (1)磁盘C盘.数据文件所在盘均有空间 (2)没有对数据文件设置maxSize   (3)做过数据库服务器重启,仍没有效果 (4)但是同一个实例上的其他数据库没问题 (5)配额也查了,没问题 ...

  7. wamp支持win10吗?怎么设置?

    上周ytkah总算把系统升级到win10了,可怎么设置wamp支持win10呢?启动wampwerver是处于黄色状态,打开本地页面是空白,应该是端口问题. 单击右下角wamp图标,点Apache,修 ...

  8. docker+redis安装与配置,主从+哨兵模式

    docker+redis安装与配置 docker安装redis并且使用redis挂载的配置启动 1.拉取镜像 docker pull redis:3.2 2.准备准备挂载的目录和配置文件 首先在/do ...

  9. 火币网API文档——REST 行情、交易API简介

    REST API 简介 火币为用户提供了一套全新的API,可以帮用户快速接入火币PRO站及HADAX站的交易系统,实现程序化交易. 访问地址 适用站点 适用功能 适用交易对 https://api.h ...

  10. 003-JSR303校验

    一.JSR303校验 1.1.概述 JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是Hibernate Validator. 此实现与 Hi ...