纯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
分享到:
相关推荐
How to Build a Web Dynpro Application
Quantitative Trading - How to Build Your Own Algorithmic Trading Business.
How to build up a high performance team, experts will give you much instructions..
ASP.NET Core 1.1 For Beginners How to Build a MVC Website 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载...
Beowulf集群的简要介绍,适合中小企业和资金不多又需要高速度运算的公司。做简单的搜索网站,在安排硬件和软件环境时也用得上。
Basic Concepts – What’s control in WPF? – Control Principles? – ContentModel – ContentPresenter & ItemsPresenter Build a ColorPicker control
本书是互联网产品经理必读刊物,讲述了如何打造让用户上瘾的产品。
A key feature of RFID-based systems is their very short range: Typical systems are designed to operate at a range of 5-10cm. Despite this very short nominal range, K r and Wool predicted that a rogue...
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
使用Haskell和Monad技术实现一个解释器。又学Monad也学解释器。
How to build a DNA search engine like Google?
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 Ubuntu Linux host under VirtualBox
藏经阁-How to Build a Successful Data Lake.pdf
How to Build a FreeBSD-STABLE firewall with IPFILTER.pdf
How to Build Blockchain App How to Build Blockchain App
如何从头开始构建autoML,Bridging WebML to model-driven engineering: From document type definitions to meta object facility,Meta-models are a prerequisite for model-driven engineering (MDE) in general...
高清彩版 ASP.NET Core 2.0 MVC & Razor Pages for Beginners How to Build a Website
Do you like to build things? Are you ever frustrated at having to compromise your designs to fit whatever parts happen to be available? Would you like to fabricate your own parts? Build Your Own CNC ...