CSS布局欣賞：淘寶首頁布局效果_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　我們首先看最終的效果圖：

　　此效果應用的圖片共3張，應該說用3張或是2和是最優化了；假如就用一張就有點變態了；呵呵……
　　測試代碼，CSS和內容都沒有優化，但思路應該是對的！

　　CSS代碼：

示例代碼 [m.ghpqjb.com]

　　XTHML代碼：

示例代碼 [m.ghpqjb.com]

<div id="zishu">
<div class="list">
<a href="http://www.zishu.cn"><div id="r1" class="cd1"></div></a>
<div class="box">
<div id="t1" class="ce1"></div>
<div id="u1" class="cf1">
<div class="box2">這里是內容1</div>
</div>
<div id="y1" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r2" class="cd1"></div></a>
<div class="box">
<div id="t2" class="ce1"></div>
<div id="u2" class="cf1">
<div class="box2">這里是內容2</div>
</div>
<div id="y2" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r3" class="cd1"></div></a>
<div class="box">
<div id="t3" class="ce1"></div>
<div id="u3" class="cf1">
<div class="box2">這里是內容3</div>
</div>
<div id="y3" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r4" class="cd1"></div></a>
<div class="box">
<div id="t4" class="ce1"></div>
<div id="u4" class="cf1">
<div class="box2">這里是內容4</div>
</div>
<div id="y4" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r5" class="cd1"></div></a>
<div class="box">
<div id="t5" class="ce1"></div>
<div id="u5" class="cf1">
<div class="box2">這里是內容5</div>
</div>
<div id="y5" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r6" class="cd1"></div></a>
<div class="box">
<div id="t6" class="ce1"></div>
<div id="u6" class="cf1">
<div class="box2">這里是內容6</div>
</div>
<div id="y6" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r7" class="cd1"></div></a>
<div class="box">
<div id="t7" class="ce1"></div>
<div id="u7" class="cf1">
<div class="box2">這里是內容7</div>
</div>
<div id="y7" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r8" class="cd1"></div></a>
<div class="box">
<div id="t8" class="ce1"></div>
<div id="u8" class="cf1">
<div class="box2">這里是內容8</div>
</div>
<div id="y8" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

<div class="list">
<a href="http://www.zishu.cn"><div id="r9" class="cd1"></div></a>
<div class="box">
<div id="t9" class="ce1"></div>
<div id="u9" class="cf1">
<div class="box2">這里是內容9</div>
</div>
<div id="y9" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>

　　我們看下面最終的運行效果：

代碼調試框 [m.ghpqjb.com]

<!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>TAO BAO TEST</title>
<style>
/* 子鼠 www.zishu.cn */
body{ margin:10px; padding:10px; font-size:12px; line-height:1.7; text-align:center;}
#zishu{ width:780px; margin-left:auto; margin-right:auto;}
.list{width:260px; height:155px; float:left;}
.box{ float:left; width:225px;}
.box2{ padding:0 5px 0 5px; text-align:left;}
#r1{background-position: 0;}
#r2{background-position: -19px;}
#r3{background-position: -38px;}
#r4{background-position: -57px;}
#r5{background-position: -76px;}
#r6{background-position: -95px;}
#r7{background-position: -114px;}
#r8{background-position: -133px;}
#r9{background-position: -152px;}
#t1{background-position: 0px 0px;}
#t2{background-position: 0px -5px;}
#t3{background-position: 0px -10px;}
#t4{background-position: 0px -15px;}
#t5{background-position: 0px -20px;}
#t6{background-position: 0px -25px;}
#t7{background-position: 0px -30px;}
#t8{background-position: 0px -35px;}
#t9{background-position: 0px -40px;}
#y1{background-position: 0px 0px;}
#y2{background-position: 0px -18px;}
#y3{background-position: 0px -36px;}
#y4{background-position: 0px -54px;}
#y5{background-position: 0px -72px;}
#y6{background-position: 0px -90px;}
#y7{background-position: 0px -108px;}
#y8{background-position: 0px -126px;}
#y9{background-position: 0px -144px;}
#u1{border-right: 1px solid #8A8FA0;border-left: 1px solid #8A8FA0;}
#u2{border-right: 1px solid #DF4493;border-left: 1px solid #DF4493;}
#u3{border-right: 1px solid #3B6DA5;border-left: 1px solid #3B6DA5;}
#u4{border-right: 1px solid #AA86CE;border-left: 1px solid #AA86CE;}
#u5{border-right: 1px solid #6EA314;border-left: 1px solid #6EA314;}
#u6{border-right: 1px solid #C55936;border-left: 1px solid #C55936;}
#u7{border-right: 1px solid #FAAD2D;border-left: 1px solid #FAAD2D;}
#u8{border-right: 1px solid #86D500;border-left: 1px solid #86D500;}
#u9{border-right: 1px solid #2F8A8E;border-left: 1px solid #2F8A8E;}
.cd1{background-image:url(/uploads/divcss/f2006517215038.gif);background-repeat:no-repeat;cursor:pointer;float:left; width:19px;

height:142px;}
.ce1{background-image:url(/uploads/divcss/s2006517215046.gif);background-repeat:no-repeat;height:5px;overflow:hidden;}
.cf1{background:#fafafa;border-top: 0;border-bottom: 0; height:119px;}
.cg1{background-image:url(/uploads/divcss/32006517215056.gif);background-repeat:no-repeat;height:18px;overflow:hidden;}
.l1{width:40px;height:20px;cursor:pointer; margin-left:180px;}
</style>
</head>
<body>
<div   class="b5xdttr"   id="zishu">
<div   id="7f5xnl5"   class="list">
 <div   class="dxnf7dd"   id="r1" class="cd1"></div>
 <div   id="7pjx5hx"   class="box">
     <div   class="h5ld7hd"   id="t1" class="ce1"></div>
     <div   class="jfj7v5v"   id="u1" class="cf1">
        <div   id="jr5j7r5"   class="box2">這里是內容1</div>
     </div>
     <div   class="z5bdhfd"   id="y1" class="cg1">
   <div   id="hdv7jxx"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="7rjx5rr"   class="list">
 <div   class="p7p5npb"   id="r2" class="cd1"></div>
 <div   id="rldvz5v"   class="box">
     <div   class="75fvbxv"   id="t2" class="ce1"></div>
     <div   class="frtxhdd"   id="u2" class="cf1">
        <div   id="7nrtlhh"   class="box2">這里是內容2</div>
     </div>
     <div   class="dvj7t5b"   id="y2" class="cg1">
   <div   id="hfvlbrt"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="7tlzrft"   class="list">
 <div   class="7nrvxx5"   id="r3" class="cd1"></div>
 <div   id="zx755fb"   class="box">
     <div   class="dpfvvtr"   id="t3" class="ce1"></div>
     <div   class="j5l57fz"   id="u3" class="cf1">
        <div   id="fl5zvff"   class="box2">這里是內容3</div>
     </div>
     <div   class="b7d5zzj"   id="y3" class="cg1">
   <div   id="755xlzn"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="lhxzdn5"   class="list">
 <div   class="h5xbffr"   id="r4" class="cd1"></div>
 <div   id="rd7pfrn"   class="box">
     <div   class="x7drtd5"   id="t4" class="ce1"></div>
     <div   class="vbh7r5j"   id="u4" class="cf1">
        <div   id="vp7jnvh"   class="box2">這里是內容4</div>
     </div>
     <div   class="7vn7nb5"   id="y4" class="cg1">
   <div   id="jhlnpnl"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="t5z5jxv"   class="list">
 <div   class="v5b5v5v"   id="r5" class="cd1"></div>
 <div   id="v5hlddp"   class="box">
     <div   class="nndhxnb"   id="t5" class="ce1"></div>
     <div   class="p5jph5f"   id="u5" class="cf1">
        <div   id="tdvzdr5"   class="box2">這里是內容5</div>
     </div>
     <div   class="7j5tvrb"   id="y5" class="cg1">
   <div   id="x7vvd75"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="hh7hvhh"   class="list">
 <div   class="pj7z5x5"   id="r6" class="cd1"></div>
 <div   id="5r5jvd5"   class="box">
     <div   class="ptzphjx"   id="t6" class="ce1"></div>
     <div   class="zxlrdrn"   id="u6" class="cf1">
        <div   id="7jprhxv"   class="box2">這里是內容6</div>
     </div>
     <div   class="fftx5v5"   id="y6" class="cg1">
   <div   id="jjbrht7"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="nrvzn7v"   class="list">
 <div   class="zxlzdff"   id="r7" class="cd1"></div>
 <div   id="dzb5lvx"   class="box">
     <div   class="7h55blj"   id="t7" class="ce1"></div>
     <div   class="zj7php7"   id="u7" class="cf1">
        <div   id="lrxrv75"   class="box2">這里是內容7</div>
     </div>
     <div   class="jpjlprp"   id="y7" class="cg1">
   <div   id="d75zn57"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="j7rhjv7"   class="list">
 <div   class="t555z5p"   id="r8" class="cd1"></div>
 <div   id="xfjz755"   class="box">
     <div   class="bfndjt7"   id="t8" class="ce1"></div>
     <div   class="dbrvlv5"   id="u8" class="cf1">
        <div   id="bnh5tnl"   class="box2">這里是內容8</div>
     </div>
     <div   class="ff7lbzn"   id="y8" class="cg1">
   <div   id="x57ptrz"   class="l1"></div>
  </div>
   </div>
</div>

<div   id="z7jnl5z"   class="list">
 <div   class="bh7xd55"   id="r9" class="cd1"></div>
 <div   id="zjbtj7j"   class="box">
     <div   class="95r5fr5"   id="t9" class="ce1"></div>
     <div   class="7brrtff"   id="u9" class="cf1">
        <div   id="xhzbht7"   class="box2">這里是內容9</div>
     </div>
     <div   class="7j5ndz5"   id="y9" class="cg1">
   <div   id="xvzrf7n"   class="l1"></div>
  </div>
   </div>
</div>

<p>以上為測試代碼，CSS和內容都沒有優化，但思路應該是對的！子鼠 2006-05-17 晚</p>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　以下是應用到的三張圖片：