本文详细介绍了如何使用CSS为列表应用样式以创建专业的垂直和水平导航条，包括突出显示当前页面的方法。同时，通过CSS图像映射技术，展示了如何为网页元素添加交互式热点，实现精准的用户交互体验。示例代码涵盖浮动、定位、边框和背景图像等CSS关键概念，旨在提升网页设计的美观性和用户体验。
6.1基本样式用到list-style-type：none
6.2基本的垂直导航条
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple List</title>
<style type="text/css">
<!--
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
ul.nav {
margin: 0;
padding: 0;
width: 8em;
list-style-type: none;
float: left;
background-color: #8BD400;
border: 1px solid #486B02;
border-bottom: none;
}
ul.nav li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(img/arrow.gif) no-repeat 5% 50%;
padding: 0.3em 1em;
}
/*ul .last a {
border-bottom: 0;
}*/
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
-->
</style>
</head>
<body>
<ul class="nav">
<li class="selected"><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li class="last"><a href="contact.htm">Contact</a></li>
</ul>
</body>
</html>
不对列表应用样式，而是对其中包含的锚链接应用样式，由此提供更好的浏览器兼容性。为了创建与按钮相似的单机区域，需要将锚的display属性设置为block。
在理想的情况下，可以吧箭头定位在距离锚的左边缘10像素的地方，但是，Css规范不允许混合使用多种单位，所以我使用百分数，实际上，多数浏览器接受混合单位，所以也没什么错。
6.3在导航条中突出显示当前页面
这个真没啥
6.4创建简单的水平导航条
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Nav</title>
<style type="text/css">
<!--
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
margin-top: 4em;
}
ol.pagination {
margin: 0;
padding: 0;
list-style-type: none;
}
ol.pagination li {
float: left;
margin-right: 0.6em;
}
ol.pagination a,
ol.pagination li.selected {
display: block;
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none;
}
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
border: none;
}
ol.pagination a[rel="prev"]:before {
content: "\00AB";
padding-right: 0.5em;
}
ol.pagination a[rel="next"]:after {
content: "\00BB";
padding-left: 0.5em;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected {
background-color: blue;
color: white;
}
-->
</style>
</head>
<body>
<ol class="pagination">
<li><a href="search.htm?page=1" rel="prev">Prev</a></li>
<li><a href="search.htm?page=1">1</a></li>
<li class="selected">2</li>
<li><a href="search.htm?page=3">3</a></li>
<li><a href="search.htm?page=4">4</a></li>
<li><a href="search.htm?page=5">5</a></li>
<li><a href="search.htm?page=3" rel="next">Next</a></li>
</ol>
</body>
</html>
6.8 CSS图像映射
这个其实就是画个方框瞄着每个人的脸而已，利用top和left移动方框
没有什么
但如果我们想实现这样的效果，就值得研究研究
<ul>
<li class="rich">
<a href="http://www.clagnut.com/" title="Richard Rutter">
<span class="outer">
<span class="inner">
<span class="note">Richard Rutter</span>
</span>
</span>
</a>
</li>
body {
font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}
.imagemap {
width: 333;
height: 500;
position: relative;
}
.imagemap ul {
margin: 0;
padding: 0;
list-style: none;
}
.imagemap a {
position: absolute;
display: block;
background-image: url(img/shim.gif);
color: #000;
text-decoration: none;
border: 1px solid transparent;
}
.imagemap a .outer {
display: block;
border: 1px solid transparent; //outer专门负责边框
}
.imagemap a .inner {
display: block;
width: 50px;
height: 60px;
border: 1px solid transparent;
}
.imagemap a:hover,
.imagemap a:focus {
border-color: #d4d82d;
cursor: pointer; //变成手套
}
.imagemap:hover a .outer,
.imagemap:focus a .outer,
.imagemap a:hover .outer,
.imagemap a:focus .outer {
border-color: #000;
}
.imagemap:hover a .inner,
.imagemap:focus a .inner,
.imagemap a:hover .inner,
.imagemap a:focus .inner {
border-color: #fff;
}
.imagemap .rich a {
top: 50px;
left: 80px;
}
.imagemap .sophie a {
top: 90px;
left: 200px;
}
.imagemap .cath a {
top: 140px;
left: 55px;
}
.imagemap .cath a .inner {
width: 60px;
height: 80px;
}
.imagemap .james a {
top: 140px;
left: 145px;
}
.imagemap .paul a {
top: 165px;
left: 245px;
}
.imagemap .paul a .inner {
width: 60px;
height: 80px;
}
.imagemap a .note {
position: absolute;
bottom: -3em;
width: 7.4em;
padding: 0.2em 0.5em;
background-color:#ffc;
text-align: center;
left: -30000px;
margin-left: -4em;
white-space: nowrap;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em; //把这个note弄出来，然后left一下放到看不见的地方，然后后面再把东西放回来
}
.imagemap a:hover .note,
.imagemap a:focus .note {
left: 25px;
z-index: 1;
}
.imagemap .cath a:hover .note,
.imagemap .paul a:hover .note {
left: 30px;
z-index: 1;
}
6.9远距离翻转
<li class="sophie">
<a href="http://www.wellieswithwings.org/" title="Sophie Barrett">
<span class="hotspot"></span>
<span class="link">» Sophie Barrett</span>
</a>
</li>
主要就是这个link可以作为链接，然后这个hotspot就是人像
body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
//说明一下这个remote总体多大
.remote {
width: 333px;
height: 500px;
position: relative;
}
.remote ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 1.8em;
}
.remote a {
text-decoration: none;
color: #039;
}
//设定了hotspot还有link
.remote a .hotspot {
width: 50px;
height: 60px;
position: absolute;
background-image: url(img/shim.gif); //不知道放个图片有什么作用，好像不放也行
}
.remote a .link {
position: absolute;
display: block;
width: 10em;
right: -11em;
cursor: pointer;
}
//hover后就会有边框出现，才有显示的效果
.remote a:hover .hotspot,
.remote a:focus .hotspot {
border: 1px solid #fff;
}
.remote a:hover .link,
.remote a:focus .link {
color: #0066FF;
}
.remote .rich a .hotspot {
top: 50px;
left: 80px;
}
.remote .sophie a .hotspot {
top: 90px;
left: 200px;
}
.remote .cath a .hotspot {
top: 140px;
left: 55px;
width: 60px;
height: 80px;
}
.remote .james a .hotspot {
top: 140px;
left: 145px;
}
.remote .paul a .hotspot {
top: 165px;
left: 245px;
width: 60px;
height: 80px;
}
.remote .rich a .link {
top: 0;
}
.remote .sophie a .link {
top: 1.2em;
}
.remote .cath a .link {
top: 2.4em;
}
.remote .james a .link {
top: 3.6em;
}
.remote .paul a .link {
top: 4.8em;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
