CSS应用——相册V3.0

1. CSS应用——相册V1.0

2. CSS应用——相册V2.0

请看效果图，此样例有两个页面，第一页为相册首页，第二页才是相册，此样例不支持多页面。先请看效果图，具体效果请下载样例：

样例下载： 点击下载

CSS部分：

/* Example Source Code */
/* 初始化几个要用的标签 */
* {     margin :  0px ;     padding :  0px ;     list-style :  none ; }
body  {     font-family :  Verdana, Arial, "宋体" ;     font-size :  12px ;     line-height :  1.7em ;     color :  #6F9C21 ;      }
h1,h3 {     font-family :  "黑体" ;     font-size :  14px ;     color :  #517317 ; }
h1  {     line-height :  45px ;     color :  #517317 ;     background-color :  #84B726 ;     padding-left :  14px ; }
h2  {     font-size :  12px ;     color :  #fff ;     background-color :  #95CC2D ;     text-align :  center ;     border :  1px solid #84B726 ; }
img  {     display :  block ;  border : none ; }

/* 全局链接样式 */
a:link,a:visited {     color :  #6D9C1F ;     text-decoration :  none ; }
a:active,a:hover {     color :  #fff ;     text-decoration :  none ; }

/* 常用的三个样式 */
.l {     float :  left ; }
.r {     float :  right ; }
.c {     clear :  both ;     height :  0px ;     overflow :  hidden ; }

/* 全局框架用 */
#wrap {  margin : 0 auto ;  width : 800px ;  height : 490px ;  background : #ccc }
#info {     margin :  0px auto ;  padding : 10px ;  width : 600px ;  height : 460px ; }
#pic {     background :  #B5DF63 ;     height :  450px ;     width :  600px ;     border-left :  3px solid #3B8C54 ;     border-right : 3px solid #8CC128 ;     overflow :  hidden ; }

.main {     width :  365px ; }
.sidebar {     float :  right ;     height :  360px ;     width :  210px ;     overflow :  hidden ; }
.pager {     clear :  both ; }
.pager p {  padding-left : 15px ;  line-height : 2.5em ; }

/* 第一页的特殊处理 */
#yan {     padding :  160px 0 0 50px ; }
#kai {     background-color :  #3B8C54 ;     width :  150px ;     margin :  160px 0 0 70px ;     padding-left :  10px ;     overflow :  hidden ; }
#kai img {     display :  block ;     padding :  20px ;     border-left :  2px solid #B5DF63 ; }

/* 相册正式开始 */
.pic {     height :  450px ; }
.main li {     text-align :  center ;     float :  left ;     width :  120px ;     margin-top :  10px ; }
.main li span {     display :  block ;     margin :  auto ;     padding :  5px ; }
.main li img {     display :  block ;     height :  65px ;     width :  90px ;     border :  1px solid #A5D845 ;     margin :  0 auto ;     padding :  5px ;     background :  #fff ; }

/* 照片上的链接样式 */
a:link span,a:visited span {     background :  #B5DF63 ;     border :  1px solid #B5DF63 ; }
a:active span,a:hover span {     background :  #95CC2D ;     border :  1px solid #84B726  ;     border-top :  1px solid #FFF ;     border-left :  1px solid #FFF ; }

.sidebar img {     padding :  5px ; }
.sidebar p {     padding :  5px 15px ; }
.sidebar span {     background :  #95CC2D ;     display :  block ;     border-top :  1px solid #95CC2D ; }
.sidebar li {     height :  360px ; }
.sidebar {     background :  #fff ;     margin :  15px 5px ;     padding :  0 1px 1px 1px ;     border :  1px solid #A5D845 ;     border-top : none ; }

 

样例下载： 点击下载

来源： http://www.zishu.cn/blogview.asp?logID=628