很简单的文档流布局

<!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. 转载 selenium_对浏览器操作、鼠标操作等总结

    https://www.jianshu.com/p/7a4414082ce2 查看环境conda info --env 激活环境conda activate machine 路径改成H:cd H:\p ...

  2. Reg文件操作

    注册表REG脚本文件测试 1.新建主键 例如,想在主键［HKEY_CURRENT_USER\Software］下新建一个名叫“新建主键名称”的主键. 可以打开记事本,写入如下内容: Windows R ...

  3. 小白的java学习之路 “ 变量、数据类型和运算符”

    一.变量: 1.什么是变量? 变量是一个数据存储空间的表示 变量由:变量名  变量类型  变量的值 2.创造变量的两种方法: 1.声明-->赋值-->取值 //声明变量 int money ...

  4. Anroid Studio 教程干货

    常见设置 a)在Setting中,修改主题.修改工程目录的字体大小.  b)在Setting中,显示行号:  c)设置注释模板,File–>Other Setting –> Default ...

  5. UVA12716-连续区间内反向寻因子法

    在涉及的题目中如果需要使用连续区间内的数据的因数,可以放弃使用%这种低效的方案,从因数的角度进行,UVA12716中对于代码的优化就利用了这个小技巧. 原题:https://vjudge.net/pr ...

  6. super().__init__()方法

    class first(object): def __init__(self,age,name): self.age = age self.name = name class second(first ...

  7. 【Vue2.x笔记2】从源码看computed对象

    computed 初始化函数 const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, c ...

  8. kindle怎么导入电子书

    参考网址:https://jingyan.baidu.com/article/59a015e342a165f795886545.html

  9. double加减乘除

    //四舍五入 public static double toDecimal(Double num){ if(Double.isNaN(num) || num == null){ return 0; } ...

  10. IntelliJ IDEA Ultimate 6.2 版本免费试用期过期后如何破解

    今天早上一打开IntelliJ IDEA时弹出“InteliJ IDEA License Activation”界面,需要激活新的license才可以使用.下面直接使用Activation code进 ...