css制作一款相册

这个是看了鬼佬的一篇文章之后参考他的代码写的,终于感觉到鬼佬的创意了.而同时感觉我们缺少的只是创意,而并不是技术,也许这个就是国家之间的差异吧.

 
   

  
    
  
    body{font:12px Georgia, 'Times New Roman', Times, serif;    text-align:center;
background:#9c9a9c;}
img{border:0;}
h1{background:#638AAD;
font-size:14px;    color:#fff;
font-weight:bold;
padding:5px 0;}
#one{ margin:10px  auto;    list-style:none;    background:url(../images/photo_06.jpg) no-repeat;    width:595px;    height:300px;    overflow:auto;    }
#one li{        float:left;    display:block;    border-right:1px solid #000;    }
a{        display:block;    text-decoration:none;    cursor:default;    margin:0;    }
#one a:link,#one a:visited{        width:30px;    height:300px;    overflow:hidden; }
#one a:link img{        width:30px;    height:300px;    border:0;}
#one a:hover{        width:436px;    height:300px;          }
#one a:hover img{        width:436px;}
#two{        margin:10px auto;    width:436px;    height:425px;    list-style:none;    background:url(../images/photo_07.jpg);    display:block;}#two li{        display:block;    border-bottom:1px solid #000;    margin-top:0 !important;    margin-top:-3px;         }#two a:link,#two a:visited{        width:436px;    height:30px;    overflow:hidden;         }#two a:link img{    width:436px;        height:30px;    display:inline;         }#two a:hover{        height:300px;    width:436px;         }#two a:hover img{        height:300px;}#back{        margin:10px auto;}#back a{        width:40px;    cursor:pointer;    padding:5px 0;    margin: 0 0 0 480px !important;    margin:0;}#back a:link,#back a:visited{        background:#dedfce;    color:#4b648c;        }#back a:hover{       color:#cc3300;}
列型
  
    <
  
    ul 
  
    id
  
    ="one"
  
    ><
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    >
  
    

  
    <
  
    img 
  
    src
  
    ="../images/photo_01.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_02.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_03.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_04.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_05.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    ></
  
    ul
  
    >
  
    树型

  
    <
  
    ul 
  
    id
  
    ="two"
  
    ><
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_01.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_02.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_03.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_04.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    >
  
    

  
    <
  
    li
  
    ><
  
    a 
  
    href
  
    ="#"
  
    ><
  
    img 
  
    src
  
    ="../images/photo_05.jpg"
  
     alt
  
    =""
  
     
  
    /></
  
    a
  
    ></
  
    li
  
    ></
  
    ul
  
    >
  
    

 
   

从代码中可以看到,主要是a在起作用.

不过这里还有一个问题,就是树型在ie下有bug的,不知道为什么每张图片之间总是有那么几个象素的空隙,
因此在看图片的时候可以看到横向和竖向都有滚动条,想了很久,还是解决不了.

原始状态和鼠标经过的状态

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=646500