0
我很新的HTML和CSS編碼，我想知道是否有一種方法，使底部4個圖像的可點擊區域只適用於圖像的大小。圖片周圍的可點擊區域太大
這裏的網站鏈接：http://web.acd.ccac.edu/~amcma1b/
是的，我知道有大量的冗餘代碼，我最終會乾淨所有陷入困境的，但我在尋找一種方式來解決我的問題。
CSS代碼在這裏：
body {
background-color:#E6E6FA;
\t margin:0;
\t padding:0;
}
p {
text-indent: 10px;
\t font-family:MySecondFont;
\t padding: 10px;
\t text-indent:15px;
\t text-align:center;
\t font-size:120%;
\t width:960px;
}
h1 {
display: block;
background-color:#85E0FF;
color:#4747A3;
\t height:60px;
\t width: 960px;
\t text-align:center;
\t line-height:60px;
\t font-family:MyFirstFont;
\t margin: 0 auto 0 auto;
}
h2 {
color:#4747A3;
\t height:50px;
\t text-align:center;
}
nav{
\t display: block;
\t width:960px;
\t margin: 20px auto 0 auto;
\t height: 40px;
\t background:#85E0FF;
\t text-align:center;
}
nav ul{
\t
\t text-align:center;
\t margin:1px;
\t padding:0;
\t
}
nav ul li{
\t list-style: none;
\t float:left;
\t margin: 0px 4px;
\t
\t
}
nav ul li a{
\t
\t display:block;
\t text-align:center;
\t text-decoration:none;
\t float: left; \t
\t padding: 10px 20px;
\t color:black;
\t width:100px;
\t font-family:serif;
\t font-style:italic; \t
\t font-weight:normal;
\t transition-property:all;
\t transition-duration:0.4s;
\t transition-timing-function:linear;
\t margin: 0 45px;
\t
\t
}
nav ul li a:hover{
\t color: #85E0FF;
\t background-color:white;
\t border-radius:8px;
}
@font-face{
\t font-family:MyFirstFont;
\t src:url(Parisienne-Regular.ttf)
}
@font-face{
\t font-family:MySecondFont;
\t src:url(RobotoCondensed-Regular.ttf)
}
\t
#montreal img{
\t display: block;
\t margin: 0 auto 0 auto;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
\t float:center;
}這裏html代碼：
<!DOCTYPE html>
<html lang = "en">
<html>
\t <head>
\t \t <title>Traveling To Montreal</title>
\t \t <meta charset="utf-8">
\t \t <meta name="description" content="Topic:Traveling to Montreal">
\t \t <meta name="keywords" content="HTML5,CSS3, Montreal, Traveling, Canada">
\t \t <meta name="author" content="Alex McMahon">
\t \t <link href="Style.css" rel="stylesheet">
\t </head>
<div class="headerBreak"></div>
<nav>
\t <ul>
\t
\t \t <li><a href="index.html">Home</a></li>
\t \t <li><a href="about.html">About</a></li>
\t \t <li><a href="contact.html">Contact</a></li>
\t \t <li><a href="info.html">Info</a></li>
\t </ul>
</nav>
<br></br>
<div id="montreal">
<img src="montreal.png" alt="Montreal Skyline" align="middle";>
</div>
<br></br>
\t <body>
\t \t <h1> <strong>Traveling to Montreal From Pittsburgh</strong>!</h1>
\t \t <h2><em>Student Website by Alex McMahon</em></h2>
\t \t <DIV align="center">
\t
\t \t <p>Hello, on this website I will be discussing 4 different ways of traveling to Montreal from Pittsburgh!</font></p>
\t \t <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
\t \t do in the city while you are visiting and some of the more interesting places to check out whilst you are visiting!</font></p>
\t \t
\t \t
\t \t <iframe width="700" height="500" src="https://www.youtube.com/embed/poe2cLKw9ko" frameborder="0" allowfullscreen></iframe>
\t \t <p> Click on an image below to learn more about your preferred way of traveling to Montreal!</p>
\t \t <ol>
\t \t \t
\t \t \t \t \t <a href="plane.html"><li><img src="plane.png"></li></a>
\t \t \t \t
\t \t \t \t \t <a href="car.html"><li><img src="car.png"></li></a>
\t \t \t \t \t <a href="bus.html"><li><img src="bus.png"></li></a>
\t \t \t \t \t <a href="train.html"><li><img src="train.png"></li></a>
\t \t \t
\t \t </ol> \t
<br></br> \t \t
\t \t <br></br>
<br></br>
\t \t
\t <footer>
<i><small> Copyright © Alex McMahon<br>
<a href="mailto:[email protected]">[email protected]</a></small></i>
</footer>
\t \t
\t </body>
</html>感謝您的時間。
非常感謝。真的很感激它！ –
將其標記爲答案，如果這是什麼尋找 –