<!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. unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果

    在之前的一篇(链接在此)文章中写了下关于真实模拟皮肤渲染,在此基础之上又想加上血液效果,在洗澡的时候(=  =:)又想在skin上加上水珠的效果,所以研究了下,做出来效果感觉还不错,放下效果图: 水珠 ...

  2. poj 1287 Networking【最小生成树prime】

    Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7321   Accepted: 3977 Descri ...

  3. 什么要缓存curl资源

    在看公司的代码框架底层时,发现了一个问题,如下: 代码中调用接口时,使用的是curl,框架将curl资源以IP :端口的形式缓存了下来,例如: 10.10.10.10:80     curl1 10. ...

  4. PDF模板报表导出（Java+Acrobat+itext）

    1. 首先要安装Adobe Acrobat,装好之后用Acrobat从一个word,excel或者pdf中转换一个pdf模板,我做的模板很简单,直接写一个简单的word再生成一个pdf表单,之后编辑文 ...

  5. Linux进程通信之System V共享内存

    前面已经介绍过了POSIX共享内存区,System V共享内存区在概念上类似POSIX共享内存区,POSIX共享内存区的使用是调用shm_open创建共享内存区后调用mmap进行内存区的映射,而Sys ...

  6. [Javascript] Modifying an Immutable.js Map()

    We will now look at five methods that modify an Immutable.Map(). set update delete clear merge //set ...

  7. Struts2和Struts1的不同

    转载(没看懂) Action 类 ◆Struts1要求Action类继承一个抽象基类org.apache.struts.action.Action.Struts1的一个普遍问题是使用抽象类编程而不是接 ...

  8. 十个最好的Java性能故障排除工具

    1.jconsole  是随着JDK 1.5而推出的.这是一个Java监测和管理控制台-JMX兼容的图形工具来监测Java虚拟机.它能够同时监测本地和远程的JVMs.详情可查看:jconsole工具介 ...

  9. C++ 进阶必备

    C++ 进阶要点(原理+熟练使用) 持续更新中 虚函数 虚继承 多继承 构造函数,拷贝构造函数,赋值构造函数,友元类,浅拷贝,深拷贝,运算符重载 class 类的基本使用,iostream获取屏幕输入 ...

  10. Linux sed命令常用方法

    sed也成stream editor,流编辑器,是Linux上常用的文本处理工具. 通用格式:sed  行范围  模式/RegExp/  文件 模式: d 删除 p 打印符合条件的行 a \strin ...