Html 如何使用css usemap？
我有一个有5张图片的网站 我正在尝试使用“usemap”作为我的5号图像，其中有两个带有两个链接的图标 我不知道我必须使用哪种代码，以及在哪里放置此代码 我发现了很多解决方案，但它们并不合适，而且我没有足够的CSS知识来应用 谢谢Html 如何使用css usemap？,html,css,image,dictionary,Html,Css,Image,Dictionary,我有一个有5张图片的网站 我正在尝试使用“usemap”作为我的5号图像，其中有两个带有两个链接的图标 我不知道我必须使用哪种代码，以及在哪里放置此代码 我发现了很多解决方案，但它们并不合适，而且我没有足够的CSS知识来应用 谢谢 <!DOCTYPE html> <html> <head> <style> body{ overflow: hidden;
<!DOCTYPE html>
<html>
<head>
<style>
body{
overflow: hidden;
background: url(bg.png) repeat;
}
nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
}
nav ul{
list-style: none;
}
.link-1{
background: url('ico_1.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-1.link-active{
background: url('ico_1_active.png') no-repeat top left;
}
.link-2{
background: url('ico_2.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-2.link-active{
background: url('ico_2_active.png') no-repeat top left;
}
.link-3{
background: url('ico_3.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-3.link-active{
background: url('ico_3_active.png') no-repeat top left;
}
.link-4{
background: url('ico_4.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-4.link-active{
background: url('ico_4_active.png') no-repeat top left;
}
.link-5{
background: url('i-contact-hover.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-5.link-active{
background: url('i-contact-active.png') no-repeat top left;
}
.container{
width: 100%;
height: 100%;
}
/*@media screen and (max-width: 640px) {
.section{
width: 600px;
}
}
@media screen and (max-width: 800px) {
.section{
width: 700px;
}
}
@media screen and (max-width: 1024px) {
.section{
width: 900px;
}
}
@media screen and (max-width: 1200px) {
.section{
width: 1100px;
}
}
@media screen and (min-width: 1600px) {
.section{
width: 1500px;
}
}*/
.section{
width: 900px;
}
.section-1{
position: absolute;
top: 0px;
left: 0px;
height: 640px;
background: url(section_1.png) no-repeat top center;
}
.section-2{
position: absolute;
top: -900px;
left: 1800px;
height: 640px;
background: url(section_2.png) no-repeat top center;
}
.section-3{
position: absolute;
top: -1200px;
left: 300px;
height: 640px;
background: url(section_3.png) no-repeat top center;
}
.section-4{
position: absolute;
top: 250px;
left: 1800px;
height: 640px;
background: url(section_4.png) no-repeat top center;
}
.section-5{
position: absolute;
top: 900px;
left: -300px;
height: 640px;
background: url(section_5.png) no-repeat top center;
}
.sp-canvas{
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section-1"><div class="link-1 link-active"></div></a></li>
<li><a href="#section-2"><div class="link-2"></div></a></li>
<li><a href="#section-3"><div class="link-3"></div></a></li>
<li><a href="#section-4"><div class="link-4"></div></a></li>
<li><a href="#section-5"><div class="link-5"></div></a></li>
</ul>
</nav>
<div class="container">
<section class="section section-1">
</section>
<section class="section section-2">
</section>
<section class="section section-3">
</section>
<section class="section section-4">
</section>
<section class="section section-5">
</section>
</div>
身体{
溢出：隐藏；
背景：url（bg.png）重复；
}
导航{
位置：绝对位置；
顶部：20px；
左：20px；
z指数：100；
}
导航ul{
列表样式：无；
}
.link-1{
背景：url（'ico_1.png'）不重复左上角；
宽度：32px；
高度：32px；
}
.link-1.link-active{
背景：url（'ico_1_active.png'）不重复左上角；
}
.link-2{
背景：url（'ico_2.png'）不重复左上角；
宽度：32px；
高度：32px；
}
.link-2.link-active{
背景：url（'ico_2_active.png'）不重复左上角；
}
.link-3{
背景：url（'ico_3.png'）不重复左上角；
宽度：32px；
高度：32px；
}
.link-3.link-active{
背景：url（'ico_3_active.png'）不重复左上角；
}
.link-4{
背景：url（'ico_4.png'）不重复左上角；
宽度：32px；
高度：32px；
}
.link-4.link-active{
背景：url（'ico_4_active.png'）不重复左上角；
}
.link-5{
背景：url（'i-contact-hover.png'）不重复左上角；
宽度：32px；
高度：32px；
}
.link-5.link-active{
背景：url（'i-contact-active.png'）不重复左上角；
}
.集装箱{
宽度：100%；
身高：100%；
}
/*@媒体屏幕和屏幕（最大宽度：640像素）{
.科{
宽度：600px；
}
}
@媒体屏幕和屏幕（最大宽度：800px）{
.科{
宽度：700px；
}
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.科{
宽度：900px；
}
}
@媒体屏幕和屏幕（最大宽度：1200px）{
.科{
宽度：1100px；
}
}
@媒体屏幕和屏幕（最小宽度：1600px）{
.科{
宽度：1500px；
}
}*/
.科{
宽度：900px；
}
.第1节{
位置：绝对位置；
顶部：0px；
左：0px；
高度：640px；
背景：url（section_1.png）没有重复的顶部中心；
}
.第2节{
位置：绝对位置；
顶部：-900px；
左：1800像素；
高度：640px；
背景：url（section_2.png）没有重复的顶部中心；
}
.第3节{
位置：绝对位置；
顶部：-1200px；
左：300px；
高度：640px；
背景：url（section_3.png）没有重复的顶部中心；
}
.第4节{
位置：绝对位置；
顶部：250px；
左：1800像素；
高度：640px；
背景：url（section_4.png）没有重复的顶部中心；
}
.第5节{
位置：绝对位置；
顶部：900px；
左：-300px；
高度：640px；
背景：url（section_5.png）没有重复的顶部中心；
}
.sp画布{
显示：无；
}
usemap