1 鼠标移入,背景图片改变显示,制造动态效果

ap0406708

浏览: 277187 次
性别:
来自: 深圳

最近访客更多访客>>

yuanyu113

姜子鸭

sxzheng96

helloworld_i_android

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css案例

制造 XHTML HTML

出处: http://www.alistapart.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>

* {margin: 0; padding: 0;}
body {font: 0.8125em Verdana, sans-serif; line-height: 1; color: #333; background: #FFF;}

a
{
text-align:center;
color:#FFFFFF;
text-decoration:none;
}
img
{
border:none;
}

#ish {position: relative; z-index: 10; border-top: 1px solid #666;
  font: bold 10px Arial, sans-serif; letter-spacing: 1px;}
#ish a:link, #ish a:visited {position: absolute; top: -33px; left: 150px;
  width: 65px; height: 52px; padding-top: 13px; text-align: center;
  background: url("ishbug.gif"/*tpa=http://www.alistapart.com/pix/ishbug.gif*/) top left no-repeat;
  color: #FFF;}
#ish a:hover {background-position: bottom right;}
#ish a em {display: block; margin-top: -0.2em;
  font: 2.33em Georgia, Times, serif; letter-spacing: 0;}

ul, ol {list-style: none;}
#navbar {height: 2.4em;
  padding: 0 0 0 215px;
  background: #FBFAF4;
  border-top: 5px solid #4997B5;
  font: 18px Georgia, Times, serif; overflow: hidden;
  min-width: 750px;}
#navbar li {float: left; padding: 0 23px 0 13px; margin-right: 5px;
  background: url("diamond-black.gif"/*tpa=http://www.alistapart.com/pix/diamond-black.gif*/) 100% 66% no-repeat;}
#navbar li a {display: block; padding: 0.75em 0 0.25em;
  text-transform: uppercase; color: #000;}
#navbar #feed {background: none;}
#navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url("navbarlinkbg.gif"/*tpa=http://www.alistapart.com/pix/navbarlinkbg.gif*/) top left repeat-x; color: #555;
}

#masthead {position: absolute; z-index: 5; top: 0; left: 22px;}
#masthead a {display: block; background: #81817C; width: 156px;}
#masthead a:hover {background: #000;}

</style>
</head>

<body>
<ul id="navbar">
  <li id="articles"><a href="index-1.htm" tppabs="http://www.alistapart.com/articles/" title="Articles">Articles</a></li>
  <li id="topics"><a href="index-2.htm" tppabs="http://www.alistapart.com/topics/" title="Topics">Topics</a></li>
  <li id="about"><a href="index-3.htm" tppabs="http://www.alistapart.com/about/" title="About">About</a></li>
  <li id="contact"><a href="index-4.htm" tppabs="http://www.alistapart.com/contact/" title="Contact">Contact</a></li>
  <li id="contribute"><a href="index-5.htm" tppabs="http://www.alistapart.com/contribute/" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="index-6.htm" tppabs="http://www.alistapart.com/feed/" title="Feed">Feed</a></li>
</ul>

<h1 id="masthead"><a href="index.htm" tppabs="http://www.alistapart.com/"><img src="alalogo.gif" tppabs="http://www.alistapart.com/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a></h1>

<div id="ish">
	<a title="Issue 285" tppabs="http://www.alistapart.com/issues/285" href="285.htm">No. <em>285</em></a>
</div>
</body>
</html>

用到的图片:
alalogo.gif

diamond-black.gif

ishbug.gif

navbarlinkbg.gif

看点1:
同一背景图片,#ish a:link, #ish a:visited 和#ish a:hover 中显示不同的部分,从而达到动态的效果,
background: url("ishbug.gif"/*tpa=http://www.alistapart.com/pix/ishbug.gif*/) top left no-repeat;
到
background-position: bottom right
top left ------> bottom right

看点2:
#ish 和 #masthead的 z-index属性

看点3:
#ish a em 和 #navbar li a 的 display: block;

看点4:
那条在标题栏下面,穿过no.285和a list apart 两张图片的水平黑线~~~
原来只是#ish 的 border-top: 1px solid #666;