创建一个新的基本容器,以便在两个现有容器之间进行

时间:2017-08-08 17:07:55

标签: html css

您好我真的很难在这两者之间创建一个新的容器,我需要在某个地方添加内容到网站而无法做到!我想添加到白色部分:

enter image description here

如果我可以获得与布局相匹配的HTML,那么它的所有内容都会很好。

以下是我要添加的区域之间的HTML。



<li><a href="/Contactus.html" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
<div id="page-wrapper"> </div>
<div id="featured-wrapper"> </div>
<div id="contact" class="container">
  <div class="major">
    <h2>Get in touch</h2>
    <span class="byline">It's easy to contact us as we are always here 
    to help</span>
  </div>
  <ul class="contact">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.container{
			max-width:90%;
			min-height: 700px;
			margin:0 auto;
			padding:0;
		}
		#heading{
			width: inherit;
			min-height: 60px;
			line-height: 59px;
			margin:0 auto;
			text-align: center;
			background-color: blue;
			color:white;
			font-family: Arial,sans-serif;
		}
		#navigation{
			width: inherit;
			padding:0;
			margin:0;
			background-color: gray;
			color:white;
			min-height: 30px;
			line-height: 29px;
			text-align: center;
		}
		#navigation ul
		{
			margin:0;
			padding:0;

		}
		#navigation ul li{
			display:inline;
			padding-right: 30px;
			margin:0 auto;
		}
		#navigation ul li a{
			text-decoration: none;
			color:white;
		}
		#navigation ul li a:hover{
			color:gray;
		}
		.panel{
			width: inherit;
			margin:0 auto;
			height: 200px;
			color:white;
			background-color: black;
			text-align: center;
			border:1px solid black;
		}
		@media only screen and (max-width: 768px) {
				#heading{
					width: 100%;
				}
				#navigation{
					width: 100%;

				}
				#navigation ul
				{
					margin:0 auto;
				}
				#navigation ul li {
					display: block;
					margin-bottom: 5px;
				}
		}
}
	</style>
</head>
<body>

 <div class="container">
 	<div id="heading">
 		<h1>Connection Wellbeing Services</h1>
 	</div>

 	<div id="navigation">
 		<nav>
 			<ul>
 				<li><a href="#">HOME PAGE</a></li>
 				<li><a href="#">SERVICES</a></li>
 				<li><a href="#">OUR CLIENTS</a></li>
 				<li><a href="#">ABOUT US</a></li>
 				<li><a href="#">CAREERS</a></li>
 				<li><a href="#">CONTACT US</a></li>
 			</ul>
 		</nav>
 	</div>
 	<div class="section">
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	</div>

 	<div class="panel">
 		<h2>Get in touch</h2>
 	</div>
 </div>




</body>
</html>

我不知道这是否是你要求的,它基本上是另一个div,你可以用一些内容来填充那个空白区域