我正在构建一个网站,在那里我遇到了一个问题,即我的 h1 内容与我的导航栏重叠。我在 css 中使用了边距顶部标签,但它不起作用。
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About Voicecom</a></li>
<li><a href="#">Marketing Sevices</a></li>
<li><a href="#">IT Management Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#"> Employement Opportunities </a> </li>
</ul>
</div>
<div class="clr"></div>
<div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
<div class="clr"></div>
</div>
</div>
<div class="hbg">
<div class="hbg_resize">
<img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
<h2>Read me first...</h2>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
<a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
</div>
</div>
</div>
我的 CSS 文件
body {
margin: 0;
padding: 0;
width: 100%;
color: #5f5f5f;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html,
.main {
padding: 0;
margin: 0;
background-color: #fff;
}
.clr {
clear: both;
padding: 0;
margin: 0;
width: 100%;
font-size: 0px;
line-height: 0px;
}
h1 {
margin: -32px 0 0 0;
padding: 24px 0;
color: #c1c1c1;
font: bold 22px/1.2em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
h1 a,
h1 a:hover {
color: #D88100;
text-decoration: none;
}
h1 span {
color: #ffa800;
font-size: 40px;
margin-top: 2000px;
}
h1 small {
font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}
h2 {
font: bold 24px Arial, Helvetica, sans-serif;
color: #a3ce67;
padding: 8px 0;
margin: 8px 0;
}
p {
margin: 8px 0;
padding: 0 0 8px 0;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}
a {
color: #5e8525;
text-decoration: underline;
}
如果有人想要更多代码,请告诉我,我特此仅附上其中的一部分。请帮忙!!!
如果你只是想让 h1 在页面上放得更低,那么你就必须删除 css 中的跨度。所以它会是这样的:
body {
margin: 0;
padding: 0;
width: 100%;
color: #5f5f5f;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html,
.main {
padding: 0;
margin: 0;
background-color: #fff;
}
.clr {
clear: both;
padding: 0;
margin: 0;
width: 100%;
font-size: 0px;
line-height: 0px;
}
h1 {
padding: 24px 0;
color: #c1c1c1;
font: bold 22px/1.2em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
h1 a,
h1 a:hover {
color: #D88100;
text-decoration: none;
}
h1 small {
font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}
h2 {
font: bold 24px Arial, Helvetica, sans-serif;
color: #a3ce67;
padding: 8px 0;
margin: 8px 0;
}
p {
margin: 8px 0;
padding: 0 0 8px 0;
font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}
a {
color: #5e8525;
text-decoration: underline;
}
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About Voicecom</a></li>
<li><a href="#">Marketing Sevices</a></li>
<li><a href="#">IT Management Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#"> Employement Opportunities </a> </li>
</ul>
</div>
<div class="clr"></div>
<div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
<div class="clr"></div>
</div>
</div>
<div class="hbg">
<div class="hbg_resize">
<img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
<h2>Read me first...</h2>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
<a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
</div>
</div>
</div>