很简单的文档流布局

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{

            margin:0;

        }

        /*头部开始*/

        #head{

            height:200px;

            background-color: pink;

        }

        #top{

            height:50px;

            background-color: blue;

        }

        #logo{

            height:100px;

            background-color: green;

        }

        #menu{

            height:50px;

            background-color: yellow;

        }

        #top_content_left{

            width:100px;

            height:100%;

            float:left;

            background-color: red;

        }

        #top_content_right{

            width:100px;

            height:100%;

            float:right;

            background-color: red;

        }

        #logo_content_left{

            height:100%;

            background-color: pink;

            width:250px;

            float:left;

        }

        #logo_content_right{

            height:100%;

            background-color: pink;

            width:400px;

            margin-left: 300px;

        }

        /*头部结束*/

        /* 内容开始 */

        #main{

            height:700px;

            background-color: gray;

        }

        #main_content_flash{

            height:200px;

            width:100%;

            background-color: green;

        }

        #main_content_iframe{

            height:500px;

            width:100%;

            background-color: yellow;

        }

        /* 内容结束 */

        /* 脚部开始 */

        #footer{

            height:100px;

            background-color: black;

        }

        #footer_content_link{

            height:20px;

            width:100px;

            background-color: red;

        }

        #footer_content_links{

            height:30px;

            width:800px;

            background-color: blue;

        }

        #footer_content_powered{

            height:50px;

            width:100px;

            margin: 0 auto;

            background-color: pink;

        }

        /* 脚部结束 */

        .auto{

            width:1000px;

            margin:0 auto;

            height:100%;

        }

    </style>

</head>

<body>

    <!--头部-->

    <div id="head">

        <div id="top">

            <div id="top_content" class="auto">

                <div id="top_content_left">网站简要说明</div>

                <div id="top_content_right">微信微博关注</div>

            </div>

        </div>

        <div id="logo">

            <div id="logo_content" class="auto">

                <div id="logo_content_left">网站logo</div>

                <div id="logo_content_right">搜索框</div>

            </div>

        </div>

        <div id="menu">

            <div id="menu_content" class="auto"></div>

        </div>

    </div>

    <!--头部-->

    <!--内容区-->

    <div id="main">

        <div id="main_content" class="auto">

            <div id="main_content_flash">flash或轮番图</div>

            <div id="main_content_iframe">商品iframe窗口，图片库的方式来完成剩余的工作即可</div>

        </div>

    </div>

    <!--内容区-->

    <!--脚部-->

    <div id="footer">

        <div id="footer_content" class="auto">

            <div id="footer_content_link">友情链接</div>

            <div id="footer_content_links">友情链接们</div>

            <div id="footer_content_powered" >版权+ICP 备案</div>

        </div>

    </div>

    <!--脚部-->

</body>

</html>

css div布局示例1（head-main-footer）的更多相关文章

  1. css div布局示例2（head-main-footer

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  3. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  4. 网站实战 从效果图开始CSS+DIV 布局华为网站

    经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...

  5. CSS：CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  6. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  7. 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  8. 十天学会DIV+CSS(DIV布局)

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

  9. CSS+DIV布局应用（2015年06月10日）

    Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...

随机推荐

  1. P1345 [USACO5.4]奶牛的电信Telecowmunication【最小割】【最大流】

    题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c),且a1与a2相 ...

  2. js打印前几天或后几天的日期

    <script language="JavaScript" type="text/javascript">function dater(sj){ v ...

  3. JN_0015：ping IP 地址

    1,打开命令窗口 2,ping www.baidu.com

  4. C# IO流与文件读写学习笔记

    本笔记摘抄自:https://www.cnblogs.com/liyangLife/p/4797583.html,记录一下学习过程以备后续查用. 一.文件系统 1.1文件系统类的介绍 文件操作类大都在 ...

  5. Pycharm的项目文件名是红色的原因及解决办法

    今天在继续学习Python时,打开Pycharm后,发现有一个项目下的项目文件名是红色的,如下图: 刚开始我以为是我升级 Pycharm导致的,但我并没有急着去解决,因为并不会影响我执行代码等.当我修 ...

  6. t-SNE and PCA

    1.t-SNE 知乎 t-分布领域嵌入算法 虽然主打非线性高维数据降维,但是很少用,因为 比较适合应用于可视化,测试模型的效果 保证在低维上数据的分布与原始特征空间分布的相似性高 因此用来查看分类器的 ...

  7. leetcode - 01

    只出现一次的数字 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: ...

  8. int long的数据范围

    java 整数型 byte 1字节   -128~127  -2^7~2^7-1 short 2字节 -32768~32767 int  4个字节 -2147483648~2147483647  -2 ...

  9. 【Unity|C#】基础篇(14)——预处理指令（#）

    [学习资料] <C#图解教程>(第23章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  10. IDAE打包WEB项目 WAR Eclipse转IDEA项目

    接下来这里只说WEB项目打包,相信大多数都是用的WEB项目吧,关于打包WAR,真的很头痛,网上说的试了好好次都不行. 后来懂了之后,真的很简单好么,分享给大家   不要多走弯路了. 注意:   如果你 ...