2
我是一名HTML/CSS初學者，希望爲某人創建網站。這是我到目前爲止所做的，當窗口大小調整時，導航欄和圖像移動時遇到問題。從不同窗口尺寸查看時，圖像排列方式不同。調整大小時，導航欄似乎移動到彼此的下方，並且與下面的img相同。HTML/CSS導航欄和img在調整窗口大小時移動
CSS：
body {
\t background-color: #E1DEDE;
\t width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.nav {
\t position: fixed;
\t z-index: 1;
\t border: none;
\t height: 90px;
\t width: 100%;
\t background: #FFFFFF;
}
.nav a {
color: #476BB2;
font-size: 22px;
font-weight: bold;
padding-top: 25px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
text-transform: uppercase;
min-width: 150px;
}
.navtabs li {
display: inline-block;
margin-top: 25px;
float: right;
}
.jumbotron {
background-image: url('http://goo.gl/DPdv8F');
height: 500px;
}
.jumbotron h1 {
font-size: 50px;
font-weight: bold;
color: #FFFFFF;
position: relative;
top: 100px;
left: 300px;
}
.info {
\t text-align: center;
}
.servicehome div {
\t position: relative;
\t display: inline-block;
\t border: none;
\t height: 250px;
\t width: 425px;
\t margin-top: 45px;
\t margin-left: 18px;
\t min-width: 150px;
}
.secondservice div {
\t position: relative;
\t display: inline-block;
\t border: none;
\t height: 250px;
\t width: 425px;
\t margin-top: 50px;
\t margin-left: 50px;
}
#roofing img {
\t height: 100%;
\t width: 100%;
} \t
#siding img {
\t height: 100%;
\t width: 100%;
}
#windows img {
\t height: 100%;
\t width: 100%;
}
#gutters img {
\t height: 100%;
\t width: 100%;
}
#commercial img {
\t height: 100%;
\t width: 100%;
}
#label {
\t position: absolute;
\t border: none;
\t height: 50px;
\t width: 100%;
\t bottom: 0px;
\t right: 0px;
\t text-align: center;
\t padding-top: 8px;
\t background-color: #00143D;
}
#label h5 {
\t color: #0000CC;
\t font-size: 18px;
\t font-weight: bold;
}
#info {
\t background: #B8B7B7;
\t height: 80px;
\t width: 108%;
\t border: none;
\t clear: both;
\t margin-top: 150px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BJ Exterior</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="navtabs">
\t \t <li><a href="#">Home</a></li>
\t \t <li><a href="#">Gallery</a></li>
\t \t <li><a href="#">Services</a></li>
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">Contact</a></li>
\t \t </ul>
\t </div>
\t </div>
\t <div class="jumbotron">
\t <div class="container">
<h1>B&J Exteriors</h1>
\t </div>
\t </div>
<hr>
\t <div class="info">
\t <h4>Contracting and Servicing the DC Metro Area Since 1989, B&J Exteriors brings a wealth of experience and expertise to make your home look great</h4>
\t </div>
\t <div class="servicecontainer">
\t \t <div class="servicehome">
\t \t <div id="roofing">
\t \t \t <img src="images/roof.jpg">
\t \t \t <div id="label">
\t \t \t \t <h5>Roofing</h5>
\t \t \t </div>
\t \t </div>
\t \t <div id="siding">
\t \t \t <img src="images/siding.jpg">
\t \t \t <div id="label">
\t \t \t \t <h5>Siding</h5>
\t \t \t </div>
\t \t </div>
\t \t <div id="windows">
\t \t \t <img src="images/windows.jpg">
\t \t \t <div id="label">
\t \t \t \t <h5>Windows</h5>
\t \t \t </div>
\t \t </div>
\t \t </div>
\t \t <div class="secondservice" style="margin-left: 200px">
\t \t <div id="gutters">
\t \t \t <img src="images/gutters.jpg">
\t \t \t <div id="label">
\t \t \t \t <h5>Gutters</h5>
\t \t \t </div>
\t \t </div>
\t \t <div id="commercial">
\t \t \t <img src="images/apartments.jpg">
\t \t \t <div id="label">
\t \t \t \t <h5>Apartments</h5>
\t \t \t </div>
\t \t </div>
\t \t </div>
\t </div>
\t <div class="footer">
\t \t <div id="info">
\t \t </div>
\t </div>
</body>
</html>謝謝您的幫助！
哪些圖像-Gutter和Apartment圖像？你想如何改變導航欄的大小？ –
是的排水溝和公寓圖像，如果寬度調整大小，我只想讓他們躲在調整大小後面，與導航欄相同。我不太熟悉良好的UI最佳實踐，所以這是我現在想要做的。 –
你好Danny，歡迎來到Stack Overflow！關閉主題，你的'B＆J外部'標題不居中:(它離左邊越遠越好，我強烈建議給它'寬度：100％'和'文本對齊：中心'。將在中心對齊:)只是認爲我應該補充說... –