<!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. n个灯，k个人的开灯问题

    /**有n个灯,编号为1-n.第一个人把所以灯打开,第二个人按下 所有编号为2的倍数的开关,第三个人按下3的倍数的开关,依次类推, 一共有k个人,问最后有哪些灯开着? 样例输入: 7 3 样例输出: ...

  2. msql修改字符

    我申请了一个jsp空间,把数据库传上去,编码如下mysql> show variables like '%char%';+--------------------------+--------- ...

  3. bzoj3673 bzoj3674可持久化并查集

    并查集都写不来了qwq 之前写的是错的 sz的初值都是0,这样怎么加就都是0了,水这道题还是可以,但是加强版就过不了了 #include<cstdio> #include<cstri ...

  4. Datagridview 实现二维表头和行合并【转载】

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  5. android 01

    安卓开源(就是免费),谷歌收购后推出,可以山寨(小米,三星都是安卓的山寨),ios不是开源(苹果应用要商用就要交钱).安卓3.0是平板,现在安卓至少是4.0以上,否则out了. 微软主要是系统和off ...

  6. ES6的let命令实现猜想

    今天看了看阮一峰的<ECMAScript 6入门>的let和const命令,看完let之后自己测试了一把,仿佛处在云里雾里之中.代码如下: "use strict"; ...

  7. svn 树冲突

    情况类似如下:(其中 removed_directory 是你工作的某个目录)  代码如下 复制代码 $svn statusD     C removed_directory>   local ...

  8. 安装jdk后出现bash: ./java: /lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录

    用sudo yum install glibc.i686命令安装好glibc之后问题就解决了

  9. windows下apache+php+mysql配置

    Apache 2.4.10(文件:httpd-2.4.10-win64-VC11.zip) php 5.6.26 (文件:php-5.6.25-Win32-VC11-x64.zip) mysql 5. ...

  10. Html5新增的语义化标签（部分）

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...