很简单的文档流布局

<!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. SQLserver 行变列。

    首先看看效果是不是想要的 变成 ok,我的效果达到了.那就记录下代码吧. create table temp1(count_ int,memo nvarchar(40))go insert into ...

  2. 设置datagridview隔行变色

    /// <summary> /// 设置datagridview隔行变色 /// </summary> /// <param name="e"> ...

  3. APC BK650 RJ50-USB数据线引脚定义

    WHY 群晖NAS配套购入APC BK650-CH UPS电源,一根线实现UPS-NAS通讯. 考虑到自带的USB连接线可能损坏,记录引脚定义供DIY之需. UPS BK650采用10芯RJ-50接口 ...

  4. JavaScript DOM–事件操作

    事件 注册事件 给元素添加事件,为注册事件或者绑定事件 注册事件两种方式 传统方式 监听事件方式 事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.ad ...

  5. TCP 与 UDP 浅谈

    TCP与UDP区别总结:1.TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接2.TCP提供可靠的服务.也就是说,通过TCP连接传送的数据,无差错,不丢失,不重 ...

  6. PAT (Basic Level) Practice （中文）1031 查验身份证 (15 分)

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  7. 【android】Parcelable的相关技术总结

    关于Parcelable的相关知识学习   进行Android开发的时候,无法将对象的引用传给Activities或者Fragments,我们需要将这些对象放到一个Intent或者Bundle里面,然 ...

  8. LeetCode subarray-sum-equals-k题解 前缀和+Hash表+枚举——线性做法

    文章目录 题意 思路 连续子数组的和sum[i,j] 源码 结果记录 题意 给定一个数组,求连续的子数组的和为k的子数组个数. 思路 连续子数组的和sum[i,j] sum[i,j]=∑k=ijAk( ...

  9. mac屏幕录制

    屏幕录制 shift+command+5 录制完成后将文件拖拽到要保存的文件中

  10. Python 高维数组“稀疏矩阵”scipy sparse学习笔记

    scipy 里面的sparse函数进行的矩阵存储 可以节省内存 主要是scipy包里面的 sparse 这里目前只用到两个 稀疏矩阵的读取 sparse.load() 转稀疏矩阵为普通矩阵 spars ...