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

 

 

 

 

 

 

 

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

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學與網頁製作技巧. arrow 網頁設計製作教學分享 css Clickbox Gallery (盒子畫廊)   
網頁設計製作教學分享 css Clickbox Gallery (盒子畫廊) 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> 即可。


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.

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>之間:

 前往讀取完整原檔 (Going to read the full original file) >>

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