Html 访问的链接不起作用。如何修复它
HTML似乎是有序的，但我似乎找不到我的错误在哪里。我无法使我的链接看起来被访问Html 访问的链接不起作用。如何修复它,html,Html,HTML似乎是有序的，但我似乎找不到我的错误在哪里。我无法使我的链接看起来被访问 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mornington Peninsula</title>
<!--Link to stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<main>
<!--Header Section In which the logo is placed-->
<header>
<div class="headingpic">
<img src="sorrento_by_the_sea_logo.jpg" alt="Sorrent by The Sea Logo">
</div>
</header>
<!--Navigation section-->
<nav>
<ul class="navigator">
<li ><a href="INDEX.html">HOME</a></li>
<li class="navigation"><a href="CONTACT.html">CONTACT & DIRECTIONS</a></li>
<li><a href="SEE&DO&EAT.html">SEE/DO & EAT</a></li>
<li><a href="ACCOMMODATION.html">ACCOMMODATION</a></li>
</ul>
</nav>
<!--Contact Info: MOBILE-->
<h2>Sorrento by the Sea Apartment - Luxury Self Contained Apartment </h2>
<section class="contact">
<div class="flexycontainer3">
<div>
<h3>Contact Details</h3>
</div>
<div>
<a class="button" href="mailto:wealthyness@wealthyness.com">Email: wealthyness@wealthyness.com</a>
</div>
<div>
<a class="button" href="tel:0435-123-456">PHONE: 0435-123-456</a>
</div>
</div>
</section>
<!--Directions to Destination-->
<h2>Getting here</h2>
<section>
<div class="flexycontainer">
<div>
<h3>Via Ferry</h3>
</div>
<div>
<p>If you choose to come across on the Queenscliff/Sorrento Ferry, it is only a 2 minute drive from the Ferry Depot.</p>
<h4>OR</h4>
<p>If you are a foot passenger we are happy to meet you at the Sorrento ferry at. Just phone us on <a class="phonelink" href="tel:0435-123-456">PHONE: 0435-123-456</a> as you arrive.</p>
<a href="https://www.google.com/maps/place/42+Holyrood+Ave,+Sorrento+VIC+3943/data=!4m2!3m1!1s0x6ad4357b0e516369:0xf1dce538da37e359?sa=X&ved=2ahUKEwitj9eTs7nqAhVY4jgGHenmA-gQ8gEwAHoECAsQAQ"><img src="Sorrento.png" alt="Sorrento Location" class="image"></a>
</div>
</div>
<div class="flexycontainer">
<div>
<h3>Scenic Land Route</h3>
</div>
<div>
<p>It is easy to find. From Melbourne, take the Monash Freeway, connect onto the Eastlink heading for Portsea, then onto the Peninsula link to Sorrento.</p>
<p>Another option is the scenic drive around the beach. Although longer, it allows you to experience the coastline from Port Melbourne to Sorrento. </p>
<a href="https://www.google.com/maps/place/42+Holyrood+Ave,+Sorrento+VIC+3943/@-38.3477012,144.7463679,16.36z/data=!4m5!3m4!1s0x6ad4357b0e516369:0xf1dce538da37e359!8m2!3d-38.3474225!4d144.7498093"><img src="Map_sorrent.png" alt="Directions To Sorrento By the See" class="image"></a>
</div>
</div>
</section>
<!--The link to social Medias conerning Mornington Peninsula-->
<footer>
<!--Photo Links for Social Medias due to them being widely known by their app icons-->
<ul class="contact-list">
<li class="linkimg"><a href="https://www.facebook.com/morningtonpeninsula"><img src="facebook_small.png" alt="Facebook Link">Facebook</a></li>
<li class="linkimg"><a href="https://www.instagram.com/explore/tags/mornigntonpeninsula/" target="_blank"><img src="instagram_small.png" alt="Instagram Link">Instagram</a></li>
<li class="linkimg"><a href="https://twitter.com/search?q=%23mornington%20penisula&src=typed_query" target="_blank"><img src="twitter_small.png" alt="Twitter Link">Twitter</a></li>
<li class="linkimg"><a href="https://www.youtube.com/results?search_query=mornington+peninsula" target="_blank"><img src="youtube-variation_small.png" alt="Youtube Link">YouTube</a></li>
</ul>
</footer>
</main>
</body>
</html>
a:focus{color:black；}-当您单击此链接时，将颜色更改为黑色您做得不对！您必须使用link标记将这些链接放在html的head部分。与样式表使用的链接标签相同。您观察到的问题是什么？我的链接在被单击后不会改变颜色页脚中的哪些链接？
/*Global Sizings*/
html
{
box-sizing: border-box;
}
/*Website Logo/Heading*/
/*-------------------------*/
header
{
display: block;
background-color: rgb(104, 39, 33); width: 100%;
}
.headingpic
{
background-image: image("sorrento_by_the_sea_logo.jpg");
margin-left: 25%;
margin-right: auto;
}
body
{
color: #343434;
margin: 0px;
padding: 0px;
font-family: 'Helvetica', 'Calibri', 'Times New Roman';
font-size: 15px;
line-height: 1.5;
background-color: #B8860B;
}
h3
{
font-size: 24px;
color: #4d1d18;
}
.heading3
{
font-size: 24px;
text-align: center;
background-position: center;
background-color: rgb(255,255,240);
margin-left: 0.265cm;
margin-right: 0.265cm;
margin-top: 0px;
margin-bottom: 0px;
border-bottom: solid;
font-size: 24px;
border-radius: 1px;
border-color: steelblue;
color: #4d1d18;
}
h2
{
text-align: center;
background-position: center;
background-color: rgb(255,255,240);
margin-left: 0.265cm;
margin-right: 0.265cm;
margin-top: 0px;
margin-bottom: 0px;
border-bottom: solid;
font-size: 36px;
border-radius: 1px;
border-color: steelblue;
color: #87423c;
}
.image
{
width: 550px;
height: 300px;
image-resolution: optimizequality;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
p
{
line-height: 150%;
font-size: 20px;
}
div
{
column-gap: 20px;
}
/*Navigation Section*/
/*--------------------------*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.navigator .navigation
{
background-color: blue;
}
/*Flex formatting*/
/*-------------------------*/
.flexycontainer
{
display: flex;
align-items: stretch;
width: auto;
display: grid;
grid-template-columns: 1fr 3fr;
column-gap: 20px;
margin-left: 10px;
margin-right: 10px;
/*
border-bottom: solid;
border-top: solid;
border-radius: 1px;
border-color: steelblue;
*/
}
.flexycontainer
{
background-color: #FAF0E6;
padding: 20px;
font-size: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.flexycontainer1
{
background-color: none;
margin: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
align-items: center;
}
.flexycontainer1
{
background-color: #FAF0E6;
margin: 10px;
padding: 20px;
font-size: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.flexycontainer2
{
background-color: none;
margin: none;
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 20px;
align-items: center;
}
.flexycontainer2
{
background-color: #FAF0E6;
margin: 10px;
padding: 20px;
font-size: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.flexycontainer3
{
display: flex;
align-items: stretch;
width: auto;
column-gap: 20px;
}
.flexycontainer3
{
background-color: #FAF0E6;
margin: 10px;
padding: 20px;
font-size: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
/*Div Styling*/
/*-------------------------*/
.divi1
{
width: 15cm;
margin-right: 0%;
}
.termsdiv
{
font-size: 12px;
line-height: 150%; px;
}
/*Contact Info Stylings*/
.contact
{
background-color: none;
}
.contact a
{
color: none;
}
.contact .button
{
color:#87423c;
background: skyblue;
text-decoration: none;
padding: 8px;
border-radius: 4px;
display: inline-block;
}
.contact .button:hover {
background: grey;
}
.contact .button:active
{
background-color: darkgoldenrod;
}
.contact .button:visited
{
background-color: black;
}
.button
{
margin-left: 20%;
margin-right: auto;
}
/*Footer formatting*/
footer
{
color: #F7FFF7;
text-align: center;
height: 80px;
}
.contact-list
{
list-style-type: none;
padding-bottom: 30px;
display: flex;
justify-content: center;
column-gap: 60px;
}
.contact-list a
{
padding: 15px;
display: inline-block;
color: #87423c;
}
/*Links*/
.contact-list:active
{
color: blue;
font-size: 30px;
}
.phonelink
{
text-decoration: none;
}
a:active
{
color: white;
}
.contact-list a:visited
{
color: red;
}