恩，幫你用Firefox的firebug查看了一下，主要代碼如下：
十年專注成都網(wǎng)站制作，成都定制網(wǎng)站，個人網(wǎng)站制作服務，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設計流程、步驟,成功服務上千家企業(yè)。為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制高端網(wǎng)站建設服務,專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對集裝箱等多個領域，擁有多年的網(wǎng)站運維經(jīng)驗。
這是頁面的HTML代碼，包括其中的CSS樣式調(diào)用：
ul class="hoverbox"
li
a href="#"
img alt="description" src="img/photo01.jpg"/
img class="preview" alt="description" src="img/photo01.jpg"/
/a
/li
/ul
以下是關于圖片相冊的CSS代碼：
//////CSS代碼////
.hoverbox {
cursor:default;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.hoverbox a {
cursor:default;
}
.hoverbox a .preview {
display:none;
}
.hoverbox a:hover .preview {
display:block;
left:-30px;
position:absolute;
top:-33px;
z-index:1;
}
.hoverbox img {
background:#FFFFFF none repeat scroll 0% 0%;
border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187);
border-style:solid;
border-width:1px;
color:inherit;
height:75px;
padding:2px;
vertical-align:top;
width:100px;
}
.hoverbox li {
background:#EEEEEE none repeat scroll 0% 0%;
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204);
border-style:solid;
border-width:1px;
color:inherit;
display:inline;
float:left;
margin:3px;
padding:5px;
position:relative;
}
.hoverbox .preview {
border-color:#000000;
height:150px;
width:200px;
}
你去試試看哦，就是這樣的。
那不系CSS能做到滴- -
你到高級設置中添加模塊,有展覽相冊的模塊,例如"最新照片",
"我的照片秀"啦,還有"關于我"模塊中也可以添加相冊展覽...
那個特效都是百度自帶的設置,你可以選擇自己喜歡的效果和相框....
設置了float為left之后，必須要定義寬度，否則即使float，也會獨占一行。即你看到的豎排的了。
如果你想每行2張，就設置width:49.5%;
3張 width:32.5%;
……
依此類推，只要比 1/每行個數(shù) 少一點即可。
#m_track a img{FILTER: Alpha(Opacity=100, FinishOpacity=5, Style=2, StartX=0, StartY=0, FinishX=0, FinishY=0) gray;}
這是一個濾鏡效果
如果想把相冊弄成這樣，找到相冊主體的對應代碼，加上以上括號內(nèi)屬性就可以了
用css3制作紙張效果
一、中規(guī)中矩的效果
所謂“中規(guī)中矩的效果”就是加個投影，貼個膠帶什么的。效果如下：
CSS3的box-shadow投影效果，相關代碼如下：
代碼如下:
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
反而是上面的膠帶紙效果有點說頭，這些微微傾斜的膠帶是CSS寫出來的，大部分效果源自CSS3，主要有RGBA顯示半透明背景色，box-shadow顯示淡淡的投影，transform做旋轉(zhuǎn)效果；元素使用after偽類生成，完整代碼如下：
代碼如下:
.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }
老外似乎很喜歡使用before和after偽類，國外最近的些教程，技術點等經(jīng)常見到此玩意。我個人感覺有跟風之嫌，就像是狂熱的經(jīng)濟泡沫，不需 要太久，大家會冷靜下來重新審視這些曾經(jīng)上手簡單，自我感覺不錯的方法。由于目前IE6/7不支持before/after類，所以，某種意義上來說，偽 類的使用少了些兼顧IE下顯示的煩惱。
二、外翻卷角紙張效果
紙張一般都是有卷角的，所以，我們可以更近一步，模擬卷角效果來使得紙張的感覺更逼真，這里就要借助于投影了，且是曲線投影。
我們還可以給紙張增加漸變(gradient)效果，以模擬紙張的曲度。
同時，可以給文字增加投影，可以讓文字有書寫的凹陷感，可以進一步讓紙張效果更逼真。
于是，在“中規(guī)中矩”紙張基礎上，我們做點小手術，結(jié)果得到下面的效果：
您可以狠狠地點擊這里：漸變卷邊紙張效果demo
目前貌似opera瀏覽器還不支持CSS3漸變，同時webkit核心下瀏覽器下的gradient漸變的寫法已經(jīng)開始向FireFox瀏覽器靠攏了。確實，都是CSS3，有必要搞得五花八門嗎？
相關漸變CSS代碼如下：
代碼如下:
background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41));
在60%的位置有個顏色拐點。
關于弧形的投影，也是使用:before/:after偽類實現(xiàn)的，相關代碼如下：
代碼如下:
.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: ' '; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; }
要想查看效果的完整代碼，demo頁面查看源文件即可，脫光光，一覽無遺。
這里的曲線投影卷角效果支持Opera瀏覽器，如下截圖：
三、帶分隔線的卷紙紙張效果
上面的紙張卷角效果是通過曲線投影效果來模擬的，而這里，紙張的卷邊效果是紙張真的“曲線化”了，而且，還是帶隔線的紙張效果哦，您可以參見下面的效果截圖(Chrome 9)：
這里，F(xiàn)irefox瀏覽器下的紙張隔線使用的是重復漸變(Repeating Gradients)實現(xiàn)的，對于webkit瀏覽器，使用的是background-size實現(xiàn)的。實際上，F(xiàn)irefox3.6+已經(jīng)支持background-size屬性了(-moz-background-size)， 所以，對于Firefox瀏覽器，這里使用重復漸變與漸變+background-size是等效的。在FireFox4以及IE9瀏覽器中 background-size屬性已經(jīng)沒有私有屬性了，Opera瀏覽器在9.5版本時候就已經(jīng)支持background-size屬性了，但是存在一 些bug。
這里分隔線實現(xiàn)的相關CSS如下：
代碼如下:
background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px;
而對于曲邊的實現(xiàn)，使用的是border-radius圓角，這里展示下示意的代碼：
代碼如下:
border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px;
當然，F(xiàn)ireFox瀏覽器下的寫法不是如此，其bottom, left是連起來的，而不是”-”分隔，這里僅僅是示意，這里的微曲線是如何實現(xiàn)的。相信看到上面的代碼就知道意思了，這里就不啰嗦了。
還有其他些細節(jié)，如如何控制行高讓文字與隔線一一對應，這些您要是有興趣可以去demo頁面，通過查看元素等方法一看究竟。
四、最后點老生常談
難免的，本文的重點在于CSS3，所以就本文而言，IE6/IE7/IE8瀏覽器就是過來打醬油的，且三個紙張效果從一而終，都是下面這副模樣：
雖然沒有透明膠效果，沒有投影，沒有卷邊，更沒有分隔線，但是，就功能上來講，一點都不影響使用。所以，無論你是漸進增強還是退求其次，紙張投影效果在實際項目中的應該也不是不可以的，這就要看個人和團隊的抉擇了
相冊管理，一般是一個小圖縮列表，一個大圖展示框。大體可以寫個布局如下：
div class="photo_viewer"
div class="photo_show"
img src="圖片地址" alt="xx" /
/div
div class="photo_list"
ul
liimg src="圖片地址" alt="" //li
liimg src="圖片地址" alt="" //li
liimg src="圖片地址" alt="" //li
liimg src="圖片地址" alt="" //li
/ul
/div
/div
style type="text/css"
.photo_viewer{overflow:hidden;width:480px;height:480px;}
.photo_show{width:480px;height:320px;}
.photo_show img {width:300px;height:300px;border:1px solid #ddd;}
.photo_list{width:480px;height:150px;overflow:auto;margin-top:10px;}
.photo_list ul{margin:0;padding:0;width:100%;}
.photo_list li{width:25%;float:left;height:120px;}
.photo_list img{width:100px;height:100px;margin:10px;}
/style
重慶分公司
重慶分公司
