2017-08-08 55 views
0

嗨我真的很努力在這兩個之間創建一個新的容器,我需要在某處添加內容到網站並無法做到這一點!我要添加到白的部分:創建一個新的基本容器來介入兩個現有的

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">

回答

0

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

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

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

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

 
    \t <div id="navigation"> 
 
    \t \t <nav> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">HOME PAGE</a></li> 
 
    \t \t \t \t <li><a href="#">SERVICES</a></li> 
 
    \t \t \t \t <li><a href="#">OUR CLIENTS</a></li> 
 
    \t \t \t \t <li><a href="#">ABOUT US</a></li> 
 
    \t \t \t \t <li><a href="#">CAREERS</a></li> 
 
    \t \t \t \t <li><a href="#">CONTACT US</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav> 
 
    \t </div> 
 
    \t <div class="section"> 
 
    \t \t <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> 
 
    \t </div> 
 

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

 

 

 

 
</body> 
 
</html>

我不知道這是不是你問什麼,它基本上是在這之間的另一個DIV,你可以用它來填補這一空白有些內容

相關問題