<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=Edge" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0; border:0px; font-size:12px; color:#000;}
.wrap{width:950px; margin:0 auto;}
#nav{ margin:35px 0;}
#nav ul{ float: right; list-style:none; display:inline;}
#nav ul li{ float:left; line-height:19px;}
#nav ul li a{ text-decoration:none; word-spacing:3px;}
#content{float:left;}
#content .col{float:left; margin-left:10px; }
#content .col.first{margin-left:0px;}
#content .col .rc{width:230px; height:38px; border-bottom:15px solid #000; height:115px;}
#content .col .rh{border-top:15px solid #000; height:38px; line-height:38px; font-size:25px; font-weight:bolder;}
#foot{margin-top:28px;margin-left:240px; }
#foot ul{}
#foot li{ float:left; width:134px; margin-left:26px; }
#foot li em{ font-weight:bold; font-size:13px;}
#foot li span{ display:block;}
.clear{ clear:both;}
</style>
</head>
<!--原稿地址：http://72rivingtonstreet.com/-->
<body>
<div class="wrap">
<div id="nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NOW ,THEN & NEXT</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">LIBRARY</a></li>
<li><a href="#">LOCATION & OPENING TIMES</a></li>
<li><a href="#">PRESS</a></li>
<li><a href="#">MAIN YCN WEBSITE</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div class="col first">
<div class="rc rh"></div>
<div class="rc"><a href="#"><img src="logo.gif" width="230" height="115" /></a></div>
<div class="rc"></div>
<div class="rc"></div>
</div>
<div class="col">
<div class="rc rh">NOW</div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
</div>
<div class="col">
<div class="rc rh">SHOP</div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
</div>
<div class="col">
<div class="rc rh">LIBRARY</div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
<div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
</div>
</div>
<div class="clear"></div>
<div id="foot">
<div>
<ul>
<li>
<em>location & Opening Times</em>
<p>
<span>YCN.72 Rivington Street </span>
<span>London, EC2A 3AY </span>
<span> United Kingdom</span>
<span> t. +44 (0) 207 033 2140</span>
<span>e. info@ycnonline.com</span>
</p>
</li>
<li>
<em>Now, Then & Next</em>
<p>
<span>YCN.72 Rivington Street </span>
<span>London, EC2A 3AY </span>
<span> United Kingdom</span>
<span> t. +44 (0) 207 033 2140</span>
<span>e. info@ycnonline.com</span>
</p>
</li>
<li>
<em>Library</em>
<p>
<span>YCN.72 Rivington Street </span>
<span>London, EC2A 3AY </span>
<span> United Kingdom</span>
<span> t. +44 (0) 207 033 2140</span>
<span>e. info@ycnonline.com</span>
</p>
</li>
<li>
<em>Shop</em>
<p>
<span>YCN.72 Rivington Street </span>
<span>London, EC2A 3AY </span>
<span> United Kingdom</span>
<span> t. +44 (0) 207 033 2140</span>
<span>e. info@ycnonline.com</span>
</p>
</li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
[img]http://dl.iteye.com/upload/attachment/193742/055f69b3-591f-3da3-95d1-a20b96c142dc.jpg[/img]
在页面的最后测试中出现问题，就是，margin出现问题，间距增加。一开始认为是由于IE6的bug空白叠加，最后发现时因为浮动没有清除，导致这种情况的出现，
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
