純CSS的相簿圖片展示(書籤應用)

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　國慶節回來，這回著實是踏踏實實的休息了一次，感覺精神好多了。活是幹了一點，不過睡得放心多了。尤其是昨晚的颱風影響，感覺好涼爽，一覺居然睡了10個小時。

　　今天上班把以前寫的一個東東整理了一下，不過還是有不少的缺憾在裡面，感興趣的朋友看看就可以了：）

　　其實這個東東已經有很多人寫過了，不過還是把自己整理的貼出來大家瞧瞧，看還可以怎麼改進。

　　先看看Demo吧：

　　［效果示範：http://www.doyoe.com/model/xhtmlcss/style/imgview/1.htm］

CSS部分：

a {
font:bold 12px/20px "宋體",sans-serif;
text-decoration:none;
}
#dyimgview {
width:260px;
}
#dyimgview h3 {
width:100%;
margin:10px 0;
overflow:hidden;
}
#dyimgview h3 a {
display:block;
width:20px;
height:20px;
margin:2px;
color:#fff;
text-align:center;
background-color:#aaa;
float:left;
}
#dyimgview h3 a:hover {
color:#f00;
background-color:#000;
}
#dyimgview ul {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
height:170px;
voice-family:"/"}/"";voice-family:inherit;
height:150px;
}
#dyimgview ul li {
height:150px;
}
#dyimgview ul img {
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span {
display:none;
cursor:pointer;
}
.tips:link,a.tips:hover {
display:block;
}
.tips:hover span {
display:block;
width:100%;
text-align:center;
position:relative;
z-index:99;
margin-top:-32px;
color:#fff;
background-color:#840606;
padding:0.2em 0;
filter:alpha(opacity=70);
opacity:0.7;
}　

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飄零霧雨, edzmaster@gmail.com" />
<title>純CSS構造圖片展示</title>
</head>
<body>
<div id="dyimgview">
<h3><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></h3>
<ul>
<li id="a"><a href="" class="tips"><img src="1.jpg" alt="" /><span>哇塞，美女耶！</span></a></li>
<li id="b"><a href="" class="tips"><img src="2.jpg" alt="" /><span>喔，還是美女！</span></a></li>
<li id="c"><a href="" class="tips"><img src="3.jpg" alt="" /><span>作者本人</span></a></li>
</ul>
</div>
</body>
</html>　

　　看Demo可以發現，這是通過書籤來實現顯示不同圖片的效果，目前貌似只有IE，FF等瀏覽器支援，Opera下毫無效果（遺憾一）；而且不能為“1，2，3”指定“當前”效果樣式（遺憾二），很難知道當前顯示的是哪個部分的內容，不過應該有變通的方法，如果同學們有好的方法，不妨交流一下。　

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More