<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>混合布局编程挑战</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{width:100%; height:100px; background:#999;}

.main{width:100%;height:500px; background:#F00; position:relative;}

.left{width:200px; height:500px; background:#00F; position:absolute; top:0; left:0;}

.middle{height:500px; background:#F36; margin:0 200px;}

.right{width:200px;height:500px; background:#906; position:absolute; top:0; right:0;}

.foot{width:100%; height:100px; background:#F90;}

</style>

</head>

<body>

<div class="top">top</div>

<div class="main">

    <div class="right">right</div>

    <div class="middle">middle</div>

    <div class="left">left</div>

</div>

<div class="foot">foot</div>

</body>

</html>

网页布局只mian部分左右固定，中间部分自适应的更多相关文章

  1. css页面布局--三栏（两边固定中间自适应&两边自适应中间固定）

    http://www.cnblogs.com/zhanyishu/p/5656875.html

  2. vivo前端智能化实践：机器学习在自动网页布局中的应用

    作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  5. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  6. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  7. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  8. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  9. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

随机推荐

  1. 《University Calculus》-chape5-积分法-微积分基本定理

    定积分中值定理: 积分自身的定义是简单的,但是在教学过程中人们往往记得的只是它的计算方法,在引入积分的概念的时候,往往就将其与计算方法紧密的捆绑在一起,实际上,在积分简单的定义之下,微积分基本定理告诉 ...

  2. Python切割nginx日志_小组_ThinkSAAS

    Python切割nginx日志_小组_ThinkSAAS Python切割nginx日志

  3. java 判断是不是检查性异常

    /** * Return whether the given throwable is a checked exception: * that is, neither a RuntimeExcepti ...

  4. poj 1064 Cable master【浮点型二分查找】

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 29554   Accepted: 6247 Des ...

  5. PDO 提供了三种不同的错误处理模式

    PDO::ERRMODE_SILENT 此为默认模式. PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 PDO::errorInfo() 方法来检查语句和数据库对象.如果错 ...

  6. C#中的线程(下)-多线程

    1.  单元模式和Windows Forms 单元模式线程是一个自动线程安全机制, 非常贴近于COM——Microsoft的遗留下的组件对象模型.尽管.NET最大地放弃摆脱了遗留下的模型,但很多时候它 ...

  7. richTextBox1 转到行号

      private void button2_Click(object sender, EventArgs e) {     Win32CommonDialog.frm_GOTO frm = new  ...

  8. 创建文档和自定义的qt assistant

    利用qt制作帮助文档 1.         创建文档即是一些html文件,这里可以使用qt提供的工具像是qdoc 和Doxygen生成帮助的html文档. 2.         组织文档结构用于qt ...

  9. WCF - 绑定后续之自定义绑定

    自定义信道基类 WCF是一个极具扩展性的通信框架 无论在服务模型层还是信道层 都具有很多扩展点 而信道层的扩展点主要体现在实现自定义信道以增强信道栈处理信息的能力 比如我们可以扩展信道层 实现一个自定 ...

  10. [转] Express 4 中的变化

    http://www.cnblogs.com/haogj/p/3985438.html 概览 从 Express 3 到Express 4 是一个巨大的变化,这意味着现存的 Express 3 应用在 ...