<!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. Java---网络编程(4)-C/S-B/S

    C/S 与 B/S ☆ C/S ( Client/Server ) 客户端和服务端的特点 1.客户端和服务端的软件都需要程序员进行编写. 2.客户端维护起来较为麻烦.(缺陷) 3.客户端的存在可以将一 ...

  2. Mathlab编程-微积分在Matlab中的解法

    这一章节将介绍一系列典型的微积分问题(求极限.级数.定积分.导数.重积分等)在Matlab中的求解. 首先关于极限: (1)    数列极限: 给出下面三段例程. 求解数列极限的limit函数参数说明 ...

  3. 京东集团副总裁李大学：像CEO一样思考 - Dancen的专栏 - 博客频道 - CSDN.NET

    京东集团副总裁李大学:像CEO一样思考 - Dancen的专栏 - 博客频道 - CSDN.NET 京东集团副总裁李大学:像CEO一样思考

  4. 324. Wiggle Sort II

    这个题真是做得我想打人了.我生起气来连自己都打. 一开始quick select没啥可说的.但是in place把老命拼了都没想出来.. 看网上的答案是3 partition,MAP式子一看就由衷地反 ...

  5. HDU 2191 (13.12.2)

    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  6. Asp.net网站后台代码不能访问-iis部署

    最近自己写了点东西,部署的时候确发生了点问题,后台代码访问不了,错误为:由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.   错误详细提示: HTTP 错误 404.3 -  ...

  7. SQL server数据库中的DateTime类型出现的问题

    我们知道这个SQL server数据库中的DateTime类型是数据库应用开发中经经常使用到的一种数据类型.而C#语言中也有DateTime类型,尽管二者都是用来描写叙述时间的,可是它们的默认值是不同 ...

  8. HDU 2069 Coin Change

    Coin Change Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. docker入门（一）

    docker安装 yum install -y docker-io [root@centos ~]# yum install -y docker-io 已加载插件:fastestmirror, lan ...

  10. AndroidManifest.xml中的application中的name属性 分类： android 学习笔记 2015-07-17 16:51 116人阅读 评论(0) 收藏

    被这个不起眼的属性折磨了一天,终于解决了. 由于项目需要,要合并两个android应用,于是拷代码,拷布局文件,拷values,所有的都搞定之后程序还是频频崩溃,一直没有找到原因,学android时间 ...