Question

我对html和css编码很新，我想知道是否有办法让底部4个图像周围的可点击区域仅适用于图像的大小。

以下是网站链接：http://web.acd.ccac.edu/~amcma1b/

是的，我知道有很多冗余代码，我最终会清除所有这些混乱，但我正在寻找解决问题的方法。

Css代码：

body {
    background-color:#E6E6FA;
	margin:0;
	padding:0;
}
p {
    text-indent: 10px;
	font-family:MySecondFont;
	padding: 10px;
	text-indent:15px;
	text-align:center;
	font-size:120%;
	width:960px;
} 
h1 { 
display: block;
background-color:#85E0FF;  
     color:#4747A3;
	 height:60px;
	 width: 960px;
	 text-align:center;
	 line-height:60px;
	 font-family:MyFirstFont;
	 margin: 0 auto 0 auto;
}
 h2 {  
     color:#4747A3;
	 height:50px;
	 text-align:center;
} 



nav{
	display: block;
	width:960px;
	margin: 20px auto 0 auto;
	height: 40px;
	background:#85E0FF;
	text-align:center;
}

nav ul{
	
	text-align:center;
	margin:1px;
	padding:0;
	
}

nav ul li{
	list-style: none;
	float:left;
	margin: 0px 4px;
	
	
}

nav ul li a{
	
	display:block;
	text-align:center;
	text-decoration:none;
	float: left;	
	padding: 10px 20px;
	color:black;
	width:100px;
	font-family:serif;
	font-style:italic;	
	font-weight:normal;
	transition-property:all;
	transition-duration:0.4s;
	transition-timing-function:linear;
	margin: 0 45px;
	
	
}

nav ul li a:hover{
	color: #85E0FF;
	background-color:white;
	border-radius:8px;
}

@font-face{
	font-family:MyFirstFont;
	src:url(Parisienne-Regular.ttf)
}
@font-face{
	font-family:MySecondFont;
	src:url(RobotoCondensed-Regular.ttf)
}
	
#montreal img{
	display: block;
	margin: 0 auto 0 auto;
}

li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
	float:center;
}

和html代码：

<!DOCTYPE html>
<html lang = "en">
<html>
	<head>
		<title>Traveling To Montreal</title>
		<meta charset="utf-8">
		<meta name="description" content="Topic:Traveling to Montreal">
		<meta name="keywords" content="HTML5,CSS3, Montreal, Traveling, Canada">
		<meta name="author" content="Alex McMahon">
		<link href="Style.css" rel="stylesheet">
	</head>
<div class="headerBreak"></div>
  
<nav>
	<ul>
	
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="info.html">Info</a></li>
	</ul>

</nav>
<br></br>
<div id="montreal">
<img src="montreal.png" alt="Montreal Skyline" align="middle";>
</div>
<br></br>
	<body>
		<h1> <strong>Traveling to Montreal From Pittsburgh</strong>!</h1>

		<h2><em>Student Website by Alex McMahon</em></h2>

		<DIV align="center">

	
		<p>Hello, on this website I will be discussing 4 different ways of traveling to Montreal from Pittsburgh!</font></p>
		<p>I will be discussing different ways in which to travel to the largest French speaking city in North America. I will be explaining the cost of each mode of transportation, along with the pros and cons of each mode of transportation. I will also be explaining what there is to
		do in the city while you are visiting and some of the more interesting places to check out whilst you are visiting!</font></p>
		
		
		<iframe width="700" height="500" src="https://www.youtube.com/embed/poe2cLKw9ko" frameborder="0" allowfullscreen></iframe>
		<p> Click on an image below to learn more about your preferred way of traveling to Montreal!</p>
		<ol>
			
					<a href="plane.html"><li><img src="plane.png"></li></a>
				
					<a href="car.html"><li><img src="car.png"></li></a>

					<a href="bus.html"><li><img src="bus.png"></li></a>

					<a href="train.html"><li><img src="train.png"></li></a>
			
		</ol>	
<br></br>		
		<br></br>
<br></br>
		
	<footer>
<i><small> Copyright &copy; Alex McMahon<br>
<a href="mailto:imalintroller@gmail.com">imalintroller@gmail.com</a></small></i>
</footer>
		
	</body>

</html>

感谢您的时间。

Answer 1

你正在制作整个＆＃39; li＆＃39;适用于href。所以只需按照4张图片进行操作..

而不是

<a href="plane.html"><li><img src="plane.png"></li></a>

这样做

<li><a href="plane.html"><img src="plane.png"></a></li>

图像周围的可点击区域太大

1 个答案: