<!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;}

.right{height:500px; margin-left:210px; background:#906;}

.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="left">left</div>

</div>

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

</body>

</html>

网页main中左边固定宽度，右边自适应。的更多相关文章

  1. Beamer中左边画图, 右边文字解释

    \begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...

  2. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  3. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  4. css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应

    左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...

  5. css网页布局 --- 左边固定，右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  6. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  7. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  8. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. css布局：左边定宽、右边自适应

    方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

随机推荐

  1. 手把手教你学习DSP_硬件设计

    <<手把手教你学习DSP>>顾卫刚,感觉写的不错,将感兴趣的部分摘录下俩. 1.A/D保护及矫正电路 TMS320X2812 AD输入为0-3V,用上述电路可以起到钳位作用.当 ...

  2. Aix项目_shell_rsh_01

    rsh(remote shell) 功能说明:远端登入Shell. 语 法:rsh [-dn][-l <用户名称>][主机名称或IP地址][执行指令] 补充说明:rsh提供用户环境,也就是 ...

  3. this用法

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 1.纯粹函数调用. function test() { this. ...

  4. MySQL Workbench类型之MySQL客户端工具的下载、安装和使用

    本博文的主要内容有 .MySQL Workbench的下载 .MySQL Workbench的安装 .MySQL Workbench的使用 个人推荐,比较好的MySQL客户端工具 注意啊! 对于noi ...

  5. JavaWeb学习总结(1-53)

    本文转自孤傲苍狼 博客,JavaWeb学习总结 专题,一共53集,讲解简洁清晰,适合入门,链接和截图如下 http://www.cnblogs.com/xdp-gacl/category/574705 ...

  6. Unity3D 制作右上角小地图

     一个简单的方法, 首先先在俯视图视角截取一张图片,用作小地图的背景图片.然后新建一个Plane,把截图附到Plane上,然后把Plane与刚才截图的场景的相应位置重合,要尽量重合,当做地图.(见 ...

  7. 【javascript基础知识】javascript中的转义序列和特殊数值常量

    javascript的转义序列 \0 NUL字符(\u0000) \b 退格符(\u0008) \t 水平制表符(\u0009) \n 换行符(\u000A) \v 垂直制表符(\u000B) \f ...

  8. Bit data type

    mysql> create table t(a bit()); Query OK, rows affected (0.04 sec) mysql> insert into t '; Que ...

  9. AndroidStudyDemo之Android4.x介绍

    Android4.x 思维导图 作者:李旺成 时间:2016年4月7日 AndroidStudyDemo 系列篇章开始了!!! AndroidStudyDemo 你值得拥有AndroidStudyDe ...

  10. 关于URL 解码, 编码

    由于近期客户需要用到CA认证,此CA认证采用的是URL方式出传值 使用指定的编码对象将 URL 编码的字符串转换为已解码的字符串. 编码个人理解就是将某字符串以某种方式储存起来,而解码则以其编码格式得 ...