很简单的文档流布局

<!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. 简单java web制作思路

    经过俩天的摸索,和学姐的帮助下终于做出来一个简单地网页版的学生信息添加的系统.接下来说一下答题的思路: 首先我个人习惯先做网页界面,创建3个jsp文件分别是添加界面,成功界面,失败界面.这件看起来更加 ...

  2. ex03

    1. a heuristic function h(n): a heuristic value of n, that is the estimated cost of reaching goal fr ...

  3. 【Debian学徒记事】记一次解决Debian开机1min30s

    记一次解决Debian开机1min30s 打开我亲爱的Debian 欸,好像有点慢 [* * * * ] A start job is running for....(*/1min30s) [TIME ...

  4. C#浅拷贝与深拷贝测试

    1.浅拷贝与深拷贝 浅拷贝:只复制对象的基本类型,对象类型,仍属于原来的引用.       深拷贝:不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的. 2.浅拷贝与深拷贝的区别 ...

  5. C# WPF发票打印

    微信公众号:Dotnet9,网站:Dotnet9.问题或建议,请网站留言: 如果您觉得Dotnet9对您有帮助,欢迎赞赏 C# WPF发票打印 内容目录 实现效果 业务场景 编码实现 本文参考 源码下 ...

  6. gulp常用插件之gulp-inject使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件 ...

  7. P1268 树的重量【构造】

    题目描述 树可以用来表示物种之间的进化关系.一棵“进化树”是一个带边权的树,其叶节点表示一个物种,两个叶节点之间的距离表示两个物种的差异.现在,一个重要的问题是,根据物种之间的距离,重构相应的“进化树 ...

  8. NPOI 生成Excel

    private void btnSave_Click(object sender, EventArgs e) { ) != ".xls") { MessageBox.Show(&q ...

  9. C++->二进制文件流的输入输出

    C++->文件流的输入输出 1.书本里以“简单事务处理”为例子,解析二进制输入输出文件流的read和write函数的使用,以及输入输出文件流 过程中指针的捕获.定位,文件流位置的判断,二进制文件 ...

  10. git配置多仓库

    git配置多仓库 github , gitee , coding , gitlab , gitlab.company ..... 真TM多 . 真TM多 . 真TM多 . 生成ssh 生成ssh 密钥 ...