|
網頁設計製作教學分享 css Clickbox Gallery (盒子畫廊) |
|
|
2010/03/05, Friday |
|
網頁設計製作教學分享 css Clickbox Gallery (盒子畫廊)
我們在網站上常常會看到照片的呈現方式，當然照片的呈現方式有非常多的製作方式，而最近比較常看到的方式則是 Clickbox Gallery (盒子畫廊)，這種照片的呈現方式最主要是它的呈現質感比較誘人。以上貼於<head>與</head>之間的css程式碼則是此程式的定義。<body>與</body>則是圖片的放置，如果要增加圖片則增加 <div id="pic7" class="hz"><a class="left" href="#pic6"></a><img src="clickbox/pic7.jpg" alt="pic5" /><a class="right" href="#pic8"></a><p>Some more descriptive text</p></div> 即可。
We
are on the site often to see the presentation of photos, of course, the
presentation of photos there are very many production methods, and
recently more often see the way it is Clickbox Gallery (box gallery), a
photo presentation of the most important texture rendering it more attractive. Affixed to the above <head> and </ head> between the css code is the definition of this program. <body>
with the </ body> is the image of the place, if you want to
increase the image increased <div id="pic7" class="hz"> <a
class="left" href="#pic6"> </ a >
<img src="clickbox/pic7.jpg" alt="pic5" /> <a class="right" href="#pic8"> </ a> <p> Some more descriptive text </
p> </ div> you can.
以下貼於<head>與</head>之間：
<style type="text/css">
a, a:visited, a:hover, a:active, a:focus {}
a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none; padding-left:10px; font:bold 20px/40px georgia, sans-serif; color:#00c;}
a.clickbox:hover {text-decoration:underline;}
a.clickbox img {display:block; border:0;}
a.clickbox + b {display:block;}
a.clickbox {float:left; display:inline;}
a.clickbox + .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}
a.clickbox .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}
a.clickbox + .lightbox .light {position:absolute; left:0; top:0; width:100%;}
a.clickbox + .lightbox .box {position:absolute; left:0; width:100%; text-align:center; height:300px; top:20px;}
/* trigger for IE6 */
a.clickbox:active, a.clickbox:focus {color:red}
a.clickbox:active + .lightbox {left:0; width:100%; height:100%;}
a.clickbox + .lightbox:hover,
a.clickbox:focus + .lightbox {position:fixed; left:0; width:100%; height:100%;}
a.clickbox + .lightbox:hover .light,
a.clickbox:active + .lightbox .light,
a.clickbox:focus + .lightbox .light {background:#000; width:100%; height:100%; filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); opacity:0.75;
}
.clear {clear:left;}
a.clickbox + .lightbox i {display:block; width:100px; height:20px; position:fixed; right:-100px; top:0; z-index:500; color:#000; font:normal normal 14px/20px arial, sans-serif; text-align:center; background:#fff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
a.clickbox + .lightbox:hover i,
a.clickbox:active + .lightbox i,
a.clickbox:focus + .lightbox i {right:50%; margin-right:-50px; top:5px;}
a.clickbox + .lightbox + #close {display:block; position:fixed; width:100px; height:20px; overflow:hidden; right:-100px; top:10px; z-index:1000; background:url(clickbox/trans.gif); cursor:pointer;}
a.clickbox + .lightbox:hover + #close,
a.clickbox:active + .lightbox + #close,
a.clickbox:focus + .lightbox + #close {right:50%; margin-right:-50px; top:5px;}
#gallery {
display:inline-block;
position:relative;
overflow:hidden;
}
#gallery #fullsize {
width:480px;
height:480px;
overflow:scroll;
overflow-y:hidden;
margin-bottom:-18px;
}
#gallery #fullsize div {width:480px; height:480px; position:relative;}
#gallery #fullsize div img {display:block; margin:0 auto; border:0; padding:10px 10px 0 10px; background:#fff; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery #fullsize div a {display:block; top:20px; position:absolute; outline:0; z-index:500; background:url(clickbox/trans.gif);}
#gallery #fullsize div.vt a.left {height:360px; width:135px; position:absolute; left:105px;}
#gallery #fullsize div.vt a.right {height:360px; width:135px; position:absolute; left:240px;}
#gallery #fullsize div.hz a.left {height:270px; width:180px; position:absolute; left:60px;}
#gallery #fullsize div.hz a.right {height:270px; width:180px; position:absolute; left:240px;}
#gallery #fullsize div a.left:hover {background:url(clickbox/prev.png) no-repeat left 20px;}
#gallery #fullsize div a.right:hover {background:url(clickbox/next.png) no-repeat right 20px;}
#gallery #fullsize div p {background:#fff; margin:0 auto; padding:10px; border:1px solid #000; border-width:0 1px 1px 1px; font-weight:normal; color:#444;}
#gallery #fullsize div.vt p {width:270px;}
#gallery #fullsize div.hz p {width:360px;}
</style>
以下貼於<body>與</body>之間：
前往讀取完整原檔 (Going to read the full original file) >>
|
|
最後更新 ( 2010/03/05, Friday )
|
