纯CSS实现的图片查看器——效果图:
1.demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>CSS Image Viewer</title>
<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: Arial, "MS Trebuchet", sans-serif;
background-color: #111;
color:#888;
}
a{
text-decoration:none;
color:#8ac;
}
/* Setup Tabs */
ul{
background:#000;
width:125px; /* Width of Tab Image */
float: left;
list-style: none;
border-right:8px solid black;
}
ul li{
height:75px; /* Height of Tab Image */
}
/* Setup Tab so normal opacity is 40 and rollover is 100 */
ul li a img{
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter:alpha(opacity=40);
/* CSS3 standard */
opacity:0.4;
}
ul li a:hover img{
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1.0;
}
#images{
width:500px;
height:300px;
overflow:hidden;
float:left;
}
#wrapper{
width:633px;
height:300px;
border:8px solid black;
margin:0px auto;
}
#credits{
width:633px;
margin: 0 auto;
text-align: right;
}
p{
margin-top:10px;
font-size:9pt;
}
h1#header{
width:633px;
margin:15px auto 5px;
font-size:14pt;
}
</style>
</head>
<body>
<h1 id="header">CSS Image Viewer</h1>
<div id="wrapper">
<ul>
<li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
<li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
<li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
<li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
</ul>
<div id="images">
<div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
<div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
<div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
<div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
</div>
</div>
<div id="credits">
Daniel
</div>
</body>
</html>
- 大小: 70 KB
分享到:
相关推荐
Beowulf集群的简要介绍,适合中小企业和资金不多又需要高速度运算的公司。做简单的搜索网站,在安排硬件和软件环境时也用得上。
### 量化交易:如何构建自己的算法交易业务 #### 核心知识点概述 本文将深入探讨《量化交易:如何构建自己的算法交易业务》一书中的核心知识点。本书由Ernest P. Chan撰写,作为一位在量化交易领域有着丰富经验的...
ASP.NET Core 1.1 Web API For Beginners How To Build a Web API ASP.NET Core 1.1 Web API For Beginners How To Build a Web API ASP.NET Core 1.1 Web API For Beginners How To Build a Web API
ASP.NET Core 1.1 For Beginners: How to Build a MVC Website by Jonas Fagerberg English | 19 May 2017 | ASIN: B071VX7KN4 | 411 Pages | PDF | 6.66 MB Want to learn how to build ASP.NET Core 1.1 MVC Web ...
藏经阁-How to Build a Successful Data Lake.pdf
How To Write A Dissertation
How to Build Blockchain App How to Build Blockchain App
Enterprise Cybersecurity Study Guide How to Build a Successful Cyberdefense Program Against Advanced Threats 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国...
Enterprise Cybersecurity Study Guide How to Build a Successful Cyberdefense Program Against Advanced Threats 英文无水印原版pdf 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请...
https://github.com/iBotPeaches/Apktool
How to build, access and use a MEV TPC for PoCs
How to read a book efficiently. Part one The dimensions of reading Part two The third level of reading Part three Approaches to different kinds of reading Part four The ultimate goals of reading
How to Build Big Data Pipelines for Hadoop
How to build compile server with virtualbox & samba
Microsoft-annie wang-How to build inclusive product
VTK 12 How to Write a Process__ Object.pdf VTK 12 How to Write a Process__ Object.pdf VTK 12 How to Write a Process__ Object.pdf
Chapter 2, Detecting Edges and Applying Image Filters, shows how to use fundamental image- processing operators and how we can use them to build bigger projects. We will discuss why we need edge ...