Question

我是一名HTML / CSS初学者，希望为某人创建一个网站。这是我到目前为止所提出的，当窗口调整大小时，导航条和图像移动时遇到问题。从不同窗口大小查看时，图像的排列方式不同。当调整大小时，导航栏似乎移动到彼此之下，与下面的img相同。

CSS：

body {
	background-color: #E1DEDE;
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}


.nav {
	position: fixed;
	z-index: 1;
	border: none;
	height: 90px;
	width: 100%;
	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 {
	text-align: center;
}

.servicehome div {
	position: relative;
	display: inline-block;
	border: none;
	height: 250px;
	width: 425px;
	margin-top: 45px;
	margin-left: 18px;
	min-width: 150px;
}

.secondservice div {
	position: relative;
	display: inline-block;
	border: none;
	height: 250px;
	width: 425px;
	margin-top: 50px;
	margin-left: 50px;
}

#roofing img {
	height: 100%;
	width: 100%;
}	

#siding img {
	height: 100%;
	width: 100%;
}

#windows img {
	height: 100%;
	width: 100%;
}

#gutters img {
	height: 100%;
	width: 100%;
}

#commercial img {
	height: 100%;
	width: 100%;
}

#label {
	position: absolute;
	border: none;
	height: 50px;
	width: 100%;
	bottom: 0px;
	right: 0px;
	text-align: center;
	padding-top: 8px;
	background-color: #00143D;
}

#label h5 {
	color: #0000CC;
	font-size: 18px;
	font-weight: bold;
}

#info  {
	background: #B8B7B7;
	height: 80px;
	width: 108%;
	border: none;
	clear: both;
	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">
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Gallery</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">About</a></li>
		  <li><a href="#">Contact</a></li>
		</ul>
	  </div>
	</div>
	<div class="jumbotron">
	 <div class="container">
     <h1>B&#38;J Exteriors</h1>
	 </div>
	</div>
    
    <hr>
    
	<div class="info">
	   <h4>Contracting and Servicing the DC Metro Area Since 1989, B&#38;J Exteriors brings a wealth of experience and expertise to make your home look great</h4>
	</div>
    
	<div class="servicecontainer">
		<div class="servicehome">
		<div id="roofing">
			<img src="images/roof.jpg">
			<div id="label">
				<h5>Roofing</h5>
			</div>
		</div>
		<div id="siding">
			<img src="images/siding.jpg">
			<div id="label">
				<h5>Siding</h5>
			</div>
		</div>
		<div id="windows">
			<img src="images/windows.jpg">
			<div id="label">
				<h5>Windows</h5>
			</div>
		</div>
		</div>
		<div class="secondservice" style="margin-left: 200px">
		<div id="gutters">
			<img src="images/gutters.jpg">
			<div id="label">
				<h5>Gutters</h5>
			</div>
		</div>
		<div id="commercial">
			<img src="images/apartments.jpg">
			<div id="label">
				<h5>Apartments</h5>
			</div>
		</div>
		</div>
	</div>

	<div class="footer">
		<div id="info">
		</div>
	</div>
  </body>
</html>

感谢您的帮助！

Answer 1

你可以做的是在你的CSS中使用媒体查询以稍微不同的方式显示页面（你可以在http://www.w3schools.com/cssref/css3_pr_mediaquery.asp找到更多有关媒体查询的信息，或者只是进行谷歌搜索）将它放到哪里观看area的宽度小于X像素数，然后将链接显示在彼此的顶部而不是一行。

对于图像，最好也是这样做。尝试将图像放入小窗口的网格中可能看起来不太好。

进一步了解＆＃34;响应式网页设计＆＃34; （设计网站在所有屏幕上都很好看），当我开始时，这对我来说是一个非常好的帮助。

如果您正常使用它，您甚至可以使用Bootstrap，它会自动处理您网页的响应。

顺便说一句，祝网站好运，看起来不错：）

调整窗口大小时，HTML / CSS导航栏和img会移动

1 个答案: