我一直在浏览它,但我无法提及任何答案,基本上Header和Body之间存在白色差距,见下文:
我在某处读到某些元素有默认边距或填充像<ul>
,但我无法确定,因为我刚刚进入网络。
以下是我的项目的定位方式:
header{
background-color: white;
position:relative;
}
p.secondaryText {
color: darkgray;
}
.menu{
background-color: dodgerblue;
}
.logo{
position: relative;
width: 100%;
}
.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division{
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body{
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body{
position: relative;
text-align: center;
}
.options-section{
text-align: center;
}
.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer{
background-color: black;
height: 200px;
}
和菜单:
ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover{
text-decoration: none;
}
我已尝试过保证金,但没有任何影响。
编辑:
如果您愿意,可以在github上下载project,在节点js上运行,只在节点服务器上运行并在端口9000中监听
答案 0 :(得分:1)
正如您所说,许多元素都有默认样式,其中一个是UL
。
您需要做的就是用margin: 0
覆盖它。
header {
background-color: white;
position: relative;
}
p.secondaryText {
color: darkgray;
}
.menu {
background-color: dodgerblue;
}
.menu ul {
margin: 0;
}
.logo {
position: relative;
width: 100%;
}
.logo-img {
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social {
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division {
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container {
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%;
/* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body {
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body {
position: relative;
text-align: center;
}
.options-section {
text-align: center;
}
.services-box,
.company-box,
.contact-box {
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer {
background-color: black;
height: 200px;
}
and the menu: ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a {
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover {
text-decoration: none;
}
<header>
<div class="social">
<p class="secondaryText">It is a long established fact that</p>
</div>
<div class="division"></div>
<div class="logo">
<img class="logo-img" src="R/Metalplatelogo.jpg">
</div>
<div class="menu" id="myMenu">
<nav>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="business.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="">NEWS</a></li>
</ul>
</nav>
</div>
</header>
<div class="body-container">
<img class="img-container" src="http://via.placeholder.com/2000x2000">
<div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>
<div class="main-body">
<p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
<h2>屋根・外壁のことならおまかせください。</h2><br>
<p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>
</div>
<div class="options-section">
<div class="services-box">
</div>
<div class="company-box">
</div>
<div class="contact-box">
</div>
</div>
<div class="about-section">
</div>
<div class="news-section">
</div>
<div class="map">
<iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4 &q=Space+Needle,Seattle+WA" allowfullscreen="">
</iframe>
</div>
<footer>
This is the footer
</footer>
答案 1 :(得分:0)
你能不能只做出身体边缘:0; &安培;填充:0;? &安培;如果你想要保证金/填充,那么设置每个元素的边距和填充?
body {
margin: 0;
padding: 0; }