学步园

 

CSS Code

body {font: 10px;
}
.gboxtop { clear: both; height: 8px; background: #dedede url(../Image/gboxtop.gif) no-repeat; color: #000; }
.gbox { background: #dedede url(../Image/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}

.left { float: left; width: 650px; margin: 0 0 10px 0; }
/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
    .smallboxtop 
{
        background-image:url(../Image/smallboxtop.gif);}

    .smallbox { background: #fff url(../Image/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px;  }
    .smallbox p { padding: 0; margin: 0; font-size:15px; }


.right {
    float: right;
    width: 300px;
    margin: 10px 0 10px 0;
}
/* right side */    
.boxtop { height: 19px; background: #fff url(../Image/boxtop.gif) no-repeat; color: #000; }
.box { background: #fff url(../Image/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
    .box p { padding: 0; margin: 0;}
    .image { float: left; margin: 0 9px 3px 0; }
.buttons { text-align: right; padding: 4px 3px 0 0;}
.bluebtn { background: #fff url(../Image/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #fff url(../Image/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #fff url(../Image/hoverbtn.gif) no-repeat; color: #fff; }

 

html代码

 

 <div>
<div class="gboxtop">
<img src="Image/gboxtop.gif" /></div>
<div class="gbox">
<p>
                    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
                    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                    nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi
                    enim ad minim veniam, quis nostrud
</p>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<!-- 右侧栏目-->
<div class="right">
<div class="boxtop">
<img src="Image/boxtop.gif" /></div>
<div class="box">
<p>
<img class="image" src="Image/image.gif" />
<b>Lorem ipsum dolor sit amet</b>
<br />
                        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
                        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
                        tation ullamcorper suscipit lobortis.
<br />
</p>
<div class="buttons" />
<p>
<a class="bluebtn" href="#">Read </a><a class="greenbtn" href="#">Mark </a>
</p>
</div>


</div>

<div class="right">
<div class="boxtop">
<img src="Image/boxtop.gif" /></div>
<div class="box">
<p>
<img class="image" src="Image/image.gif" />
<b>Lorem ipsum dolor sit amet</b>
<br />
                        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
                        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
                        tation ullamcorper suscipit lobortis.
<br />
</p>
<div class="buttons" />
<p>
<a class="bluebtn" href="#">Read </a><a class="greenbtn" href="#">Mark </a>
</p>
</div>


</div>
</div>