最终效果图如下:
关于百度产品更多侧边栏的实现
源代码如下:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度产品更多侧边栏的实现</title>
<style>
/*内部样式表*/
#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>
网友评论