室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
設計作品經歷:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  逸通房屋拆除工程 . 房屋拆除 . 台中拆除
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科 新竹室內設計 台中室內設計 台中室內設計

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學與網頁製作技巧. arrow css Clickbox Gallery (盒子畫廊) >>原檔分享 (Original File Sharing)   
css Clickbox Gallery (盒子畫廊) >>原檔分享 (Original File Sharing) E-mail
2010/03/05, 週五

網頁製作 css 橫式下拉式選單 

網頁設計製作教學分享 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> 即可。

37.jpg

 

 

 

 

 

 

 



 以下貼於<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>之間:

<a class="clickbox" href="#url">Clickbox Gallery</a>
        <b class="lightbox">
            <b class="light"></b>
            <b class="box">
                <div id="gallery">
                    <div id="fullsize">

                        <div id="pic1" class="vt"><a class="left" href="#pic10"></a><img src="clickbox/pic1.jpg" alt="pic1" /><a class="right" href="#pic2"></a><p>Some descriptive text</p></div>
                        <div id="pic2" class="vt"><a class="left" href="#pic1"></a><img src="clickbox/pic2.jpg" alt="pic2" /><a class="right" href="#pic3"></a><p>Some more descriptive text</p></div>
                        <div id="pic3" class="hz"><a class="left" href="#pic2"></a><img src="clickbox/pic3.jpg" alt="pic3" /><a class="right" href="#pic4"></a><p>Another line of descriptive text</p></div>
                        <div id="pic4" class="vt"><a class="left" href="#pic3"></a><img src="clickbox/pic4.jpg" alt="pic4" /><a class="right" href="#pic5"></a><p>Some more descriptive text</p></div>
                        <div id="pic5" class="hz"><a class="left" href="#pic4"></a><img src="clickbox/pic5.jpg" alt="pic5" /><a class="right" href="#pic6"></a><p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p></div>
                        <div id="pic6" class="vt"><a class="left" href="#pic5"></a><img src="clickbox/pic6.jpg" alt="pic5" /><a class="right" href="#pic7"></a><p>Further descriptive text</p></div>

                        <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>
                        <div id="pic8" class="hz"><a class="left" href="#pic7"></a><img src="clickbox/pic8.jpg" alt="pic5" /><a class="right" href="#pic9"></a><p>Yet more descriptive text</p></div>
                        <div id="pic9" class="hz"><a class="left" href="#pic8"></a><img src="clickbox/pic9.jpg" alt="pic5" /><a class="right" href="#pic10"></a><p>Some more descriptive text</p></div>
                        <div id="pic10" class="hz"><a class="left" href="#pic9"></a><img src="clickbox/pic10.jpg" alt="pic5" /><a class="right" href="#pic1"></a><p>Some more descriptive text</p></div>
                    </div>
                </div>
                <i>CLOSE</i>

            </b>
        </b>

最後更新 ( 2010/03/05, 週五 )
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie