首页 | 教程 | 人才 | 资源 | 视频 | 外包 | 培训 | 论坛  
游戏教程 美术基础 3D设计 平面软件 影视后期 建筑效果 网站设计 精选教程
 
网络学堂   Flash   Dreamweaver   Firework   Freehand   理论   其它
 您现在的位置:首页 > 教程频道 > 网站设计 > 其它
     网站设计_垂直三栏布局拥有相同高度的方法

网站设计_垂直三栏布局拥有相同高度的方法
编辑:残恋 发布时间:2012-05-28 查看:1614 次   

我们都了解拥有相同高度的布局是很麻烦的事,有很多相关资料提到过相关设计方法,所以在这我就不多做解释了。

最近在研究一个两个栏目的动态布局,每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns,但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout,但是有很多bug,需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度,但是不行。绝望之余,几乎要用table布局,不,一定还有更好的方法。我想着一个问题“盒子外面是什么”,border!如果我可以使“sidebar”(或"rail")的div相对与“content”的div浮动,就可以实现多栏目相同高度。这个方法在很多地方介绍过:Douglas Livingstone的introduced ,Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来,用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码:

HTML:

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

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右加border,颜色宽度和rail一样,并相对与rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变的比rail div 高,border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样,如果rail div达到最高,container随之变高,这样就给我们content变高的效果。
看看效果。See it in action 。试改变字体大小,布局随之变化。

3个栏目:3个颜色
3个栏目的布局有点不同:直接给container div加border.

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>

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

中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动,使旁边栏目在真确的位置显示。还有一些方法可以实现,但这个方法最好,更易实现流动布局(动态布局)。

因为边栏在container div外,浮动在border上。使用overflow: hidden使之隐藏:IE不支持,Firefox可以实现。边栏不需要设置颜色,它会于container div的颜色保持一致。

相关文章:
·ImageReady制作漂亮的流光吊坠动态效果  [2012-11-28]
·logo设计中的点线面  [2012-11-17]
·网页视觉设计小技巧  [2012-08-30]
·精选30个优秀的CSS技术和实例  [2012-08-30]
·如何制作实用美观的设计文档  [2012-07-18]
·企业网站英文版制作几个关键注意事项  [2012-05-28]
·网站设计_做好网站运营的九条法则  [2012-04-10]
·网页设计_四种方法实现动画SWF文件全屏效果  [2012-03-21]
·网站设计_谈如何避免网站规划四大误区  [2012-03-18]
·建站理论_编程入门经验教训分享  [2012-03-02]
本月教程排行
全部教程热点 全部推荐教程
· 老外的经典(少女贞德)从.
· Zbrush的行业应用之游戏篇.
· 3DMAX汽车三视图建立到使用.
· ZBrush3官方中文教程
· 3ds MAX基础教程:碗和杯子.
· MAYA材质教程:制作天鹅绒.
· 经典简单室内建模方法(新手.
· 用3ds max结合photoshop制.
· 【painter 8 手绘教程】《.
· Maya教程_3D制作足球模型教.
· Painter 8实例:时尚插画绘.
· 3ds MAX教程:室内空间夜景.
· 3D MAX教程:楼梯间的立体.
· 3dsMAX基础教程 直筒水杯的.
· 《山海经》奢比兽的制作
· PS 绘画 性感美女(国外)教.
· 美术基础--原画底稿上色篇.
· [分享]结构素描
· 原动画运动规律基础教程(翻.
· 贴图教程_PS滤镜快速制作草.
DOGAME游戏兵工厂 | 交流论坛 |关于我们| 广告联系 | 联系我们
DOGAME游戏兵工厂2009-2014HNYU GAME 京ICP备13045305号