网页布局实例分享：一道搜狐的WEB前端工程师面试题
本人是一名WEB前端的培训讲师，长期从事理论方面的研究和授课，以下是一个知名网络公司WEB前端工程师的一道面试题：完成以下布局：
1. 三列布局， 自适应整个屏幕；
2. 其中左右固定宽度，中列自适应其余宽度；
3. 无论三列内容多少，三列高度等高；
如下图所示，请写出代码。
[attach]100[/attach]
下面我跟大家一起来完成这道面试题：
1. 根据结构、表现和行为的顺序，我们先来完成结构部分——HTML代码，如下：
<body>
<div class="wrap">
<div class="left">
<h3>左侧边栏</h3>
<ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
</div>
<div class="right">
<h3>右侧边栏</h3>
<ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
</div>
<div class="center">
<h3>中间边栏</h3>
<ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
<span style="float:right; position:relative;"> </span> <!--for ie6-->
</div>
</div>
</body>
2. 然后再完成表现部分——CSS样式代码：
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:13px;padding:0 10px;}
a{color:#333; text-decoration:none;}
.wrap{overflow:hidden;}
.wrap ul{list-style:none;padding:0 0 0 25px;}
.left{width:240px;background:#F1f1f1;float:left; }
.left h3,.right h3,.center h3{line-height:35px;font-size:13px;padding-left:10px;}
.right{width:240px;background:#F1f1f1;float:right;}
.center{background:#e8e8e8;margin:0 10px;_float:left;/*ie6 hack*/overflow:hidden;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
完成以下步骤两部之后的效果如下：
[attach]101[/attach]
3. 现在我们只要完成最后一个问题，就是三栏登高，其解决方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。
在样式表中添加此代码：.row{margin-bottom:-10000px;padding-bottom:10000px;}，而后，将此选择器分别添加到left、right、center中，而后便完成了本题。
[attach]102[/attach]
WEB前端技术交流群：51985527
资料来源参看：http://elearning.5myworld.com/lesson/2010/1021/lesson_33.html 没人看么？
页:
[1]