最終效果圖如下:
源代碼如下:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度產(chǎn)品更多側邊欄的實現(xiàn)</title>
<style>
/*內(nèi)部樣式表*/
#box{width:134px;
height:1015px;
background:#f9f9f9;}
/*總體盒子樣式包括像素以及背景顏色*/
#title{width:134px;
height:79px;
background:url(%E6%9B%B4%E5%A4%9A%E4%BA%A7%E5%93%81.gif) 16px 21px no-repeat ?;
border-bottom: 2px solid #f0f0f0;}
#div-02{width:134px;
height:152px;
background:url(2.gif) 27px 42px ?no-repeat ?;
border-bottom:solid #f0f0f0 2px}
#div-03{width:134px;
height:152px;
background:url(001.gif) 36px 27px no-repeat ?;
border-bottom:solid #f0f0f0 2px}
#div-04{width:134px;
height:152px;
background:url(3.gif) 31px 20px no-repeat ?;
border-bottom:solid #f0f0f0 2px}
#div-05{width:134px;
height:152px;
background:url(4.gif) 36px 20px no-repeat ?;
border-bottom:solid #f0f0f0 2px}
#div-06{width:134px;
height:152px;
background:url(5.gif) 31px 25px no-repeat ?;
border-bottom:solid #f0f0f0 2px}
#div-07{width:134px;
height:152px;
background:url(6.gif) 34px 23px no-repeat ?;
border-bottom:solid #f0f0f0 2px}
/*各個分塊樣式包括：背景圖片鏈接、圖片位置戴涝、是否重復止吁、以及邊框樣式*/
</style>
</head>
<body>
<div id="box">
<!--盒子div-->
<div id="title"></div>
<div id="div-02"></div>
<div id="div-03"></div>
<div id="div-04"></div>
<div id="div-05"></div>
<div id="div-06"></div>
<div id="div-07"></div>
<!--各個分塊div-->
</div>
</body>
</html>
