/*MULTI PAGE*/
.navhead{
width: 100%;
padding: 0;
background-color: #333;
border-bottom: 1px solid #ccc;
top: 0;
left: 0;
box-shadow: 0 10px 6px -6px #333;
margin-top: 0px;
margin: 0 0 1em 0;
position: absolute;
}
.navid {
width: 100%;
padding: 0;
background-color: #fffaf0;
border-bottom: 1px solid #ccc;
float: left;
margin: 0 0 1em 0;
box-shadow: 0 10px 6px -6px #333;
top: 89;
left: 0;
position: absolute;
}
.navid ul {
margin: 0 auto;
width: 800px;
list-style: none;
display:inline-block;text-align:center;
text-shadow: 2px 2px 4px #000000;
margin-left: 725;
}
.navid li:first-of-type a {
border-left: 1px solid #333; }
.navid li a:hover {
color: #fffaf0;
background-color: #ffdd99; }
.navid li {
float: left; }
.navid li a {
display: block;
padding: 8px 15px;
text-decoration: underline;
font-weight: bold;
color: #333;
border-right: 1px solid #333; }
body {
min-width: 720px;
background-color: #ffdd99;
font-family: monospace;
}
.container {
width: 100%;
margin: 0px auto; /* Auto adjust margin */
margin-top: 150
}
h1 { color: #fffaf0;
text-align: center;
font-family: monospace;
font-size: 35;
text-shadow: 2px 2px 4px #000000;
}
/*HOME PAGE*/
.images{
display: block;
margin-left: 647;
margin-top: 50;
}
.images1{
display: block;
margin-left: 545;
margin-top: 25;
}
.images2{
display: block;
margin-left: 647;
margin-top: 25;
}
.images3{
display: block;
margin-left: 545;
margin-top: 25;
}
.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px solid #333;
}
.drop:hover .drop-content {
display: block;
} <html>
<link rel="stylesheet" type="text/css" href="homepage.css">
<div class="container">
<div class="contain">
<head>
<div class="navhead"><h1>Meadow Manor</h1> </div>
</head>
<nav>
<div class="navid">
<ul>
<li> <a class="active" href="index.html">Home</a></li>
<li> <a class="active" href="about.html">About</a> </li>
<li> <a class="active" class="active" href="local.html">Nearby</a></li>
<li> <a class="active" href="owner.html">Directions</a> </li>
<li> <a class="active" href="reviews.html">Reviews</a> </li>
</ul>
</div>
</nav>
</div>
<body>
<div class="images">
<div class="drop">
<img src="livingroom3.jpg" alt="living room" width="200" height="150">
<div class="drop-content">
<img src="livingroom3.jpg" alt="living room" width="400" height="300">
<div class="desc">Living room with patio doors</div>
</div>
</div>
<div class="drop">
<img src="house.jpg" alt="house" width="200" height="150">
<div class="drop-content">
<img src="house.jpg" alt="house" width="400" height="300">
<div class="desc">Street view of the property</div>
</div>
</div>
<div class="drop">
<img src="livingroom1.jpg" alt="living room" width="200" height="150">
<div class="drop-content">
<img src="livingroom1.jpg" alt="living room" width="400" height="300">
<div class="desc">Living room with fireplace</div>
</div>
</div>
</div>
<div class="images1">
<div class="drop">
<img src="Kitchen.jpg" alt="kitchen" width="200" height="150">
<div class="drop-content">
<img src="Kitchen.jpg" alt="kitchen" width="400" height="300">
<div class="desc">Kitchen area</div>
</div>
</div>
<div class="drop">
<img src="sink.jpg" alt="sink" width="200" height="150">
<div class="drop-content">
<img src="sink.jpg" alt="sink" width="400" height="300">
<div class="desc">Washing-up sink</div>
</div>
</div>
<div class="drop">
<img src="diningroom1.jpg" alt="dining room" width="200" height="150">
<div class="drop-content">
<img src="diningroom1.jpg" alt="dining room" width="400" height="300">
<div class="desc">Dining area with door view</div>
</div>
</div>
<div class="drop">
<img src="diningroom2.jpg" alt="dining room" width="200" height="150">
<div class="drop-content">
<img src="diningroom2.jpg" alt="dining room" width="400" height="300">
<div class="desc">Dining area with window view</div>
</div>
</div>
</div>
<div class="images2">
<div class="drop">
<img src="bedroom1.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom1.jpg" alt="bedroom" width="400" height="300">
<div class="desc">Queen-size double bedroom</div>
</div>
</div>
<div class="drop">
<img src="bedroom2.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom2.jpg" alt="bedroom" width="400" height="300">
<div class="desc">Wardrobe and desk space</div>
</div>
</div>
<div class="drop">
<img src="bathroom1.jpg" alt="bathroom" width="200" height="150">
<div class="drop-content">
<img src="bathroom1.jpg" alt="bathroom" width="400" height="300">
<div class="desc">Ensuite bathroom</div>
</div>
</div>
</div>
<div class="images3">
<div class="drop">
<img src="bedroom3.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom3.jpg" alt="bedroom" width="400" height="300">
<div class="desc">King-size double bedroom</div>
</div>
</div>
<div class="drop">
<img src="shower.jpg" alt="shower" width="200" height="150">
<div class="drop-content">
<img src="shower.jpg" alt="shower" width="400" height="300">
<div class="desc">Ensuite shower</div>
</div>
</div>
<div class="drop">
<img src="storage.jpg" alt="storage" width="200" height="150">
<div class="drop-content">
<img src="storage.jpg" alt="storage" width="400" height="300">
<div class="desc">Large storage space</div>
</div>
</div>
<div class="drop">
<img src="garden1.jpg" alt="garden" width="200" height="150">
<div class="drop-content">
<img src="garden1.jpg" alt="garden" width="400" height="300">
<div class="desc">The garden area</div>
</div>
</div>
</div>
</body>
<footer> </footer>
</div>
</html>
最小化导致导航的Web浏览器。如果您在浏览器中打开网页然后最小化屏幕，您将能够看到导航中的更改。酒吧。 谢谢您的帮助！ 我的homepage.css文件
.navhead{
width: 100%;
padding: 0;
background-color: #333;
border-bottom: 1px solid #ccc;
top: 0;
left: 0;
box-shadow: 0 10px 6px -6px #333;
margin-top: 0px;
margin: 0 0 1em 0;
position: absolute
}
.navid {
width: 100%;
padding: 0;
background-color: #fffaf0;
border-bottom: 1px solid #ccc;
float: left;
margin: 0 0 1em 0;
box-shadow: 0 10px 6px -6px #333;
top: 89;
left: 0;
position: absolute;
}
.navid ul {
margin: 0 auto;
width: 800px;
list-style: none;
display:inline-block;
text-align:center;
text-shadow: 2px 2px 4px #000000;
margin-left: 725;
}
.navid li:first-of-type a {
border-left: 1px solid #333; }
.navid li a:hover {
color: #fffaf0;
background-color: #ffdd99; }
.navid li {
float: left; }
.navid li a {
display: block;
padding: 8px 15px;
text-decoration: underline;
font-weight: bold;
color: #333;
border-right: 1px solid #333; }
body {
min-width: 1200px;
background-color: #ffdd99;
font-family: monospace;
}
.container {
width: 100%;
margin: 0px auto; /* Auto adjust margin */
margin-top: 150
}
我的index.html文件
<html>
<link rel="stylesheet" type="text/css" href="homepage.css">
<div class="container">
<head>
<div class="navhead"><h1>Meadow Manor</h1> </div>
</head>
<nav>
<div class="navid">
<ul>
<li> <a class="active" href="index.html">Home</a></li>
<li> <a class="active" href="about.html">About</a> </li>
<li> <a class="active" class="active" href="local.html">Nearby</a></li>
<li> <a class="active" href="owner.html">Directions</a> </li>
<li> <a class="active" href="reviews.html">Reviews</a> </li>
</ul>
</div>
</nav>
<body>
<div class="images">
<div class="drop">
<img src="livingroom3.jpg" alt="living room" width="200" height="150">
<div class="drop-content">
<img src="livingroom3.jpg" alt="living room" width="400" height="300">
<div class="desc">Living room with patio doors</div>
</div>
</div>
<div class="drop">
<img src="house.jpg" alt="house" width="200" height="150">
<div class="drop-content">
<img src="house.jpg" alt="house" width="400" height="300">
<div class="desc">Street view of the property</div>
</div>
</div>
<div class="drop">
<img src="livingroom1.jpg" alt="living room" width="200" height="150">
<div class="drop-content">
<img src="livingroom1.jpg" alt="living room" width="400" height="300">
<div class="desc">Living room with fireplace</div>
</div>
</div>
</div>
<div class="images1">
<div class="drop">
<img src="Kitchen.jpg" alt="kitchen" width="200" height="150">
<div class="drop-content">
<img src="Kitchen.jpg" alt="kitchen" width="400" height="300">
<div class="desc">Kitchen area</div>
</div>
</div>
<div class="drop">
<img src="sink.jpg" alt="sink" width="200" height="150">
<div class="drop-content">
<img src="sink.jpg" alt="sink" width="400" height="300">
<div class="desc">Washing-up sink</div>
</div>
</div>
<div class="drop">
<img src="diningroom1.jpg" alt="dining room" width="200" height="150">
<div class="drop-content">
<img src="diningroom1.jpg" alt="dining room" width="400" height="300">
<div class="desc">Dining area with door view</div>
</div>
</div>
<div class="drop">
<img src="diningroom2.jpg" alt="dining room" width="200" height="150">
<div class="drop-content">
<img src="diningroom2.jpg" alt="dining room" width="400" height="300">
<div class="desc">Dining area with window view</div>
</div>
</div>
</div>
<div class="images2">
<div class="drop">
<img src="bedroom1.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom1.jpg" alt="bedroom" width="400" height="300">
<div class="desc">Queen-size double bedroom</div>
</div>
</div>
<div class="drop">
<img src="bedroom2.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom2.jpg" alt="bedroom" width="400" height="300">
<div class="desc">Wardrobe and desk space</div>
</div>
</div>
<div class="drop">
<img src="bathroom1.jpg" alt="bathroom" width="200" height="150">
<div class="drop-content">
<img src="bathroom1.jpg" alt="bathroom" width="400" height="300">
<div class="desc">Ensuite bathroom</div>
</div>
</div>
</div>
<div class="images3">
<div class="drop">
<img src="bedroom3.jpg" alt="bedroom" width="200" height="150">
<div class="drop-content">
<img src="bedroom3.jpg" alt="bedroom" width="400" height="300">
<div class="desc">King-size double bedroom</div>
</div>
</div>
<div class="drop">
<img src="shower.jpg" alt="shower" width="200" height="150">
<div class="drop-content">
<img src="shower.jpg" alt="shower" width="400" height="300">
<div class="desc">Ensuite shower</div>
</div>
</div>
<div class="drop">
<img src="storage.jpg" alt="storage" width="200" height="150">
<div class="drop-content">
<img src="storage.jpg" alt="storage" width="400" height="300">
<div class="desc">Large storage space</div>
</div>
</div>
<div class="drop">
<img src="garden1.jpg" alt="garden" width="200" height="150">
<div class="drop-content">
<img src="garden1.jpg" alt="garden" width="400" height="300">
<div class="desc">The garden area</div>
</div>
</div>
</div>
</body>
<footer> </footer>
</div>
</html>