出处: 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;

- 大小: 140.6 KB

- 大小: 4.9 KB

- 大小: 49 Bytes

- 大小: 1.4 KB

- 大小: 53 Bytes

- 大小: 19.2 KB
分享到:
相关推荐
在这个例子中,`:hover`伪类被用来触发折角效果,当鼠标移到分页项上时,对应的CSS规则会被应用。 在项目文件中,我们可以看到以下几个关键文件: - `index.html`:这是项目的主页面,包含HTML结构,包括分页元素...
在鼠标悬停时,我们可以动态改变`transform`值,实现元素的动态效果,例如,鼠标悬停在按钮上时,按钮可以缓缓旋转或放大。 3. **过渡(Transitions)**: `transition`属性让我们可以平滑地从一个样式过渡到另一...
106 <br>0175 如何检索指定条件数组中的元素 107 <br>0176 如何动态改变数组长度 108 <br>0177 如何反转数组中元素的顺序 108 <br>0178 如何排序数组中的元素的顺序 109 <br>0179 如何创建...
1.计算机的常用输入设备有键盘和鼠标器。( Y ) 2.软盘要远离如电话、录音设备等热源、磁源。( Y ) 3.硬盘格式化分二个阶段,低级格式化和高级格式化。( N ) 4.硬盘格式化分三个阶段,其先后顺序为低级格式化、...