css制作一款相册 - CSS+DIV -

css制作一款相册

时间:2013-04-11 12:44:56   来源:   评论:加载中...   点击:加载中...
body{font:12pxGeorgia,'TimesNewRoman',Times,serif;text-align:center;background:#9c9a9c;}img{border:0;}h1{background:#638AAD;font-size:14px;color:#fff;font-weight:bold;padding:5px0;}#one{margin:10pxau...
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><href="#">
<img src="../images/photo_01.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>树型
<ul id="two"><li><href="#"><img src="../images/photo_01.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>


相关热词搜索:

 
上一篇:图片在已知大小容器中的水平垂直居中实例
下一篇:创建自定义代码片段 提高CSS布局开发效率
收藏 将此文推荐给朋友
分享到: