设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
12
返回列表 发新帖
楼主: 事在人为

[转帖] [教程] web标准常见问题集合

[复制链接]
发表于 2007-6-15 21:58:24 | 显示全部楼层
解决了很多我百思不得其解的难题。
发表于 2007-8-8 20:09:06 | 显示全部楼层

左右分栏同高,一边多,一边少

<!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=gb2312" />
<title>无标题文档</title>
<style>
.main{
      width:200px;
          background:#cccccc;}
.right{
      position:relative;
          width:200px;
          float:right;
          margin-right:-200px;
          background:#333333;
          color:#ffffff;}
.left{
     float:left;
         width:200px;
         margin-left:-200px;
         background:#cccccc;
         position:relative;
         color:000000;}
.clear{
     clear:both;}

</style>
</head>

<body style="margin:0px;">

<div class="main">
<div class="right">
        <div class="left">使用负边界的元素部分<br />
        使用负边界的元素部分<br />
        使用负边界的元素部分<br />
        </div>
    <div>这是一个高度自适应的示例;<br />
这是一个高度自适应的示例;<br />
这是一个高度自适应的示例;<br />
这是一个高度自适应的示例;</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
发表于 2007-8-8 20:09:55 | 显示全部楼层

但是我想,左边为200,右边为500

但是我想,左边为200,右边为500
怎么实现呀?
发表于 2007-9-5 10:41:24 | 显示全部楼层
谢谢了
发表于 2007-11-3 03:41:54 | 显示全部楼层
楼主辛苦,好贴
发表于 2007-11-7 22:34:34 | 显示全部楼层

各位哥哥姐姐你们好!

谢谢楼主,我是一初学者.以后请大家给于帮助!
发表于 2007-11-19 08:06:31 | 显示全部楼层
谢楼主你幸苦了!
发表于 2008-5-12 17:30:07 | 显示全部楼层
学习了,很不错啊.城
发表于 2008-6-3 09:37:35 | 显示全部楼层

针对分栏等高问题

前几天看见很多人研究分栏等高的问题,今早看见了一篇这样的文章,很不错,推荐给大家
文章如下:
跳出盒子思考


多栏,等栏高,固定或者是液体的中间栏,简洁的HTML和CSS。不需要任何图片。

原文链接:Multi-Column Layouts Climb Out of the Box
翻译链接:跳出盒子思考

当试图建立一个等高的多栏布局的时候会产生许多问题,我们都知道这一点。这在其它的地方已经有很好的、详细的文档记录了,在这里就不详细叙述了。

我最近做的一个项目需要一个两栏的弹性布局,而且两栏的高度必须保持一致,却又使用不同的背景颜色。通常情况下,我们是没有办法区分哪一栏更高的。我马上想到了Dan Cederholm的Faux Columns,但是我需要一个弹性的布局。我也看了One True Layout,不过这个看起来有bug,并且对我的口味来说,它需要太多的多于标签和hack。我甚至想到了使用Javascript来确保两栏有同样的高度,但是那让人感觉不爽。情急之下,我差点用了table(唉!)。

不,一定有更好的方法。我只是需要“跳出盒子(outside the box)思考”。什么是跳出盒子呢?边框(Borders)。如果我可以让 “sidebar”(或者叫“rail”) div浮动到“content” div 的边框上,我就可以模拟出等高栏,无论哪一栏更高。

如果听起来耳熟,可能是因为这种方法的另一个版本曾被 Douglas Livingstone 提到,并且被Position Is Everything的 Holly 和 John Bergevin 进一步扩展。尽管以相同的核心理论为基础,这里阐述的方法使用更简洁的,更少嵌套层次的代码,包含了几种弹性的双栏布局,而且因为在后 One-True-Layout 时代开发,我们也从中得到了一些好处。代码如下:
The HTML:

<div id="container">
  <div id="content">This is<br />some content</div>
  <div id="rail">This is the rail</div>
</div>

The CSS:

#container{
  background-color:#0ff;
  overflow:hidden;
  width:750px;
}
#content{
  background-color:#0ff;
  width:600px;
  border-right:150px solid #f00; &raquo;
  /* The width and color of the rail */
  margin-right:-150px; /* Hat tip to Ryan Brill */
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
}

我在 content div 上创建了一个和rail颜色相同,宽度相同的右边框,然后再把rail div 浮动到上面。 content div 的 "margin-right:-150px"使得 rail div 可以移动到新产生的空白上。如果 content div 比 rail div高,那么随着它增长的边框使得我们感觉好像rail在增长。我把 container 的背景色设置为与content一致,所以如果 rail div 更高,container 就会随着它增长,看起来好像 content 栏在增长。 只需要改变一点点CSS代码就可以让 rail 左对齐,无论 content 和 rail 哪一个高。

看看使用中的例子或者是弹性版本;试着改变你的字体大小,观察布局是如何改变的。

三栏:三色

三栏的布局需要采取一点不一样的措施:直接设置 container 的边框属性。(其实我在两栏的时候就可以使用这种方法,只是当时没想到)
The HTML:

<div id="container">
  <div id="center">CENTER<br />COLUMN CENTER</div>
  <div id="leftRail">LEFT RAIL</div>
  <div id="rightRail">RIGHT RAIL</div>
</div>

The CSS:

#container{
  background-color:#0ff;
  float:left;
  width:500px;
  border-left:150px solid #0f0; &raquo;
  /* The width and color of the left rail */
  border-right:200px solid #f00; &raquo;
  /* The width and color of the right rail */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:500px;
  margin-right:-500px;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 columns, fixed width, content tallest</title>
<style type="text/css">
#container{
        background-color:#9cc;
        float:left;
        width:500px;
        border-left:150px solid #cf9; /* The width and color of the left rail */
        border-right:200px solid #c33; /* The width and color of the right rail */
}
#leftRail{
        float:left;
        width:150px;
        margin-left:-150px;
        position:relative;
}
#center{
        float:left;
        width:500px;
        margin-right:-500px;
}
#rightRail{
        float:right;
        width:200px;
        margin-right:-200px;
        position:relative;
}
</style>
</head>
<body>
        <div id="container">
                <div id="center">CENTER<br />COLUMN CONTENT</div>
                <div id="leftRail">LEFT RAIL</div>
                <div id="rightRail">RIGHT RAIL</div>
        </div>
</body>
</html>
    提示:您可以先修改部分代码再运行


中间栏的 right margin 设置为 -500px。这使得左侧的 rail div 浮动到紧挨中间栏的的左侧。负的margin让侧边栏移动到正确的位置。有几种方式来实现这种效果,不过这种方法在我们一会儿实现液体布局的时候表现的最出色。

我让 container div 浮动以实现栏高,而不是设置 overflow:hidden。这是因为侧边栏 divs 在 container 的外侧,浮动到它的边框上,所以他们会被overflow设置隐藏:IE并不隐藏它们,但是Firefox,准确无误地,隐藏它们。

分栏不需要设置背景色,因为颜色设置由 container div 来设置,它随着最高的分栏增长,等高的假象就这样实现了。

液体布局

制作完了固定宽度的布局,我决定尝试用同样的技巧做一个液体的布局。侧边栏仍然需要是固定宽度的,因为浏览器并不能处理一个百分比宽度的边框设置,但是我们可以让中间栏变成液体的。
The CSS:

#container{
  background-color:#0ff;
  overflow:hidden;
  margin:0 100px;
  padding-right:150px; /* The width of the rail */
}
* html #container{
  height:1%; /* So IE plays nice */
}
#content{
  background-color:#0ff;
  width:100%;
  border-right:150px solid #f00;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
  margin-right:-150px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>2 columns, liquid, right rail, rail tallest</title>
<style type="text/css">
#container{
        background-color:#9cc;
        overflow:hidden;
        margin:0 100px;
        padding-right:150px; /* The width of the rail */
}
* html #container{
        height:1%; /* So IE plays nice */
}
#content{
        background-color:#9cc;
        width:100%;
        border-right:150px solid #c33; /* The width and color of the rail */
        margin-right:-150px; /* Hat tip to Ryan Brill */
        float:left;
}
#rail{
        background-color:#c33;
        width:150px;
        float:left;
        margin-right:-150px;
}
</style>
</head>
<body>
        <div id="container">
                <div id="content">This is some content This is some content This is some content</div>
                <div id="rail">This is<br />the rail</div>
        </div>
</body>
</html>
    提示:您可以先修改部分代码再运行
代码与两栏,固定宽度的版本是一样的,只是添加了一些额外的内容来看看换行之后会有什么效果。CSS代码改变不多:固定宽度版本的container不再有width属性,我添加了“height:1%”以使得IE正确地处理“overflow:hidden”。(我使用了星号* html hack,其实也可以使用条件注释 conditional comments 为IE包含专门的样式表)

我还添加了 margin 好在边上创建一些空白区域。“padding-right”属性减小了content div占据的空间:既然 content div 的width设置为100%,如果没有 container 没有 padding 属性,sidebar div 就会拍到 container 的外部并且被隐藏起来。最后,content div 从固定宽度变为100%,再给 sidebar div 添加“margin-right:-150px”属性。

就像两栏,固定宽度的布局一样,左侧侧边栏版本只需要对CSS做一点点修改。我添加了简单的 header 和 footer,你可以看看源代码。

三栏液体布局

一个有三个分栏,各分栏等高的布局有许过多名号:“Holy Grail”, “One True Layout”, “pain in the @$$”...下面的技巧相比之下没有什么损失,用合适的内容顺序,不需要使用图片,而且看起来没有bug。
The HTML:

<div id="container">
  <div id="center">Center Column Content</div>
  <div id="leftRail">Left<br /> Sidebar</div>
  <div id="rightRail">Right Sidebar</div>
</div>

The CSS:

body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;
  width:100%;   
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* So IE plays nice */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

这次 margin 和 padding属性被设置在 body 上。margin 把布局从屏幕边缘推离一些,padding 则恰恰是sidebar的宽度。剩下的区域就是 container 可以占据的宽度:浏览器宽度的100%再剪掉 margin 和 padding。我给 container div 设置了边框以及与边框宽度相同的负margin。这样边框就被移动到 body 的 padding 上,一切布局都到了正确的位置。之后我们就可以为div定位了。

下面的例子显示了一个嵌套的两栏液体布局,包括基本的 header 和 footer。查看源代码就可以发现把内容放到合适的位置,然后添加样式是多么的简单。嵌套的两栏布局使用了 container 的边框技巧。这让我可以给 content 添加一个2px的左边框,然后再给边栏设置一个2px的右边框,再让他们重叠起来,在他们之间创建一个同等高度的 divider 。divider 会随着最高栏的高度增长。

如果你做事太专心了,你可以把分栏的div删除,仍然保持一切内容处在正确的位置上。因为分栏实际上就是container div的边框,它们仍然可以正常工作。如果你还是不太满意,你甚至完全可以把container也删除,直接把边框设置给body,不使用 container div 就实现等高的三栏液体布局!唯一的缺点就是中间栏的背景颜色不可以和body的其它部分设置不同的背景颜色——而且删除cantainer让定位和设置样式变得更有难度……但是还是可以做得到的。

我需要再次提一下,这些技巧只适应于固定宽度的边框,因为只有Opera允许你把边框设置为百分比。而且,边框不能用图片做背景,但是CSS的border-image property可能会改变这种局面。

现在它就属于你了:多栏,等栏高,固定或者是液体的中间栏,简洁的HTML和CSS。只需要一点盒子之外的思考。
发表于 2008-6-3 19:16:09 | 显示全部楼层
真是受易非浅呀,呵呵
发表于 2009-10-20 09:41:13 | 显示全部楼层
做个记号先,有空再细看看:victory:
发表于 2009-11-12 09:19:19 | 显示全部楼层
学习了!
发表于 2011-4-6 10:35:09 | 显示全部楼层
好帖  楼主  辛苦 。。。
发表于 2011-8-10 14:20:18 | 显示全部楼层
欢迎访问甲骨文(济南历下)授权学习中心http://www.oracle-wdp.com/
发表于 2012-7-3 19:28:32 | 显示全部楼层
本帖最后由 fangxiao9159 于 2012-7-3 19:28 编辑

顶一个
发表于 2012-8-30 11:06:01 | 显示全部楼层
研究研究,发点支持,
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2018-4-19 17:26 , Processed in 0.089889 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表