CSS 导航中使用的背景被添加到 body 顶部
CSS background used in nav gets added to the body top
我有一个 header 在开始和以后的导航中进行,我在我的导航中添加了线性渐变背景,但它被添加到页面顶部。
我正在使用 bootstrap 框架,我删除了字体文件夹中的所有字形并添加了 font-awesome 字体。帮助我这是我的第一个付费项目。
JS fiddle - https://jsfiddle.net/m1aeo6nx/
HTML
<div class="container">
<header>
<div class="col-md-7">
<img src="img/logo.png" alt="Rashidamonirtrust logo" class="img-responsive">
</div>
<div class="col-md-4 col-md-offset-1">
<ul class="header-icons-list">
<li>
<a href=""><i class="fa fa-home header-icons"></i></a>
<a href=""><i class="fa fa-sitemap header-icons"> </i></a>
<a href=""><i class="fa fa-envelope header-icons"> </i></a>
</li>
<li>
<a href="" class="header-icons-text">Home</a>
<a href="" class="header-icons-text">Sitemap</a>
<a href="" class="header-icons-text">Contact Us</a>
</li>
<li>
<a href=""><img src="img/donate.png" class="img-responsive donate-img" alt="donate "></a>
</li>
</ul>
</div>
</header>
<nav>
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="aboutus.html">About Us</a> </li>
<li> <a href="whoweare.html">Who We Are</a> </li>
<li> <a href="mission.html">Mission</a> </li>
<li> <a href="activities.html">Activities</a> </li>
<li> <a href="gallery.html">Gallery</a> </li>
<li> <a href="donate.html">Donate</a> </li>
<li> <a href="sitemap.html">Sitemap</a> </li>
<li> <a href="contactus.html">Contact Us</a> </li>
</ul>
</nav>
</div><!-- .container -->
CSS
<style>
html{
background: #E5E5E5;
}
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background: none;
}
header .header-icons-list{
list-style: none;
}
header .header-icons{
color: #191918;
font-size: 1.2em;
margin-right: 25%;
margin-top: 2%;
list-style: none;
}
header .header-icons-text{
margin-right: 12%;
}
header .donate-img{
margin-top: 6%;
}
nav {
width: 100%;
height: 40px;
background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
border-radius: 6px;
}
nav ul{
list-style: none;
}
nav ul li{
margin-right: 5%;
display: inline-block;
}
</style>
您的 header 仅包含浮动元素,因此您需要对其进行 clearfix。
我有一个 header 在开始和以后的导航中进行,我在我的导航中添加了线性渐变背景,但它被添加到页面顶部。 我正在使用 bootstrap 框架,我删除了字体文件夹中的所有字形并添加了 font-awesome 字体。帮助我这是我的第一个付费项目。 JS fiddle - https://jsfiddle.net/m1aeo6nx/
HTML
<div class="container">
<header>
<div class="col-md-7">
<img src="img/logo.png" alt="Rashidamonirtrust logo" class="img-responsive">
</div>
<div class="col-md-4 col-md-offset-1">
<ul class="header-icons-list">
<li>
<a href=""><i class="fa fa-home header-icons"></i></a>
<a href=""><i class="fa fa-sitemap header-icons"> </i></a>
<a href=""><i class="fa fa-envelope header-icons"> </i></a>
</li>
<li>
<a href="" class="header-icons-text">Home</a>
<a href="" class="header-icons-text">Sitemap</a>
<a href="" class="header-icons-text">Contact Us</a>
</li>
<li>
<a href=""><img src="img/donate.png" class="img-responsive donate-img" alt="donate "></a>
</li>
</ul>
</div>
</header>
<nav>
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="aboutus.html">About Us</a> </li>
<li> <a href="whoweare.html">Who We Are</a> </li>
<li> <a href="mission.html">Mission</a> </li>
<li> <a href="activities.html">Activities</a> </li>
<li> <a href="gallery.html">Gallery</a> </li>
<li> <a href="donate.html">Donate</a> </li>
<li> <a href="sitemap.html">Sitemap</a> </li>
<li> <a href="contactus.html">Contact Us</a> </li>
</ul>
</nav>
</div><!-- .container -->
CSS
<style>
html{
background: #E5E5E5;
}
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background: none;
}
header .header-icons-list{
list-style: none;
}
header .header-icons{
color: #191918;
font-size: 1.2em;
margin-right: 25%;
margin-top: 2%;
list-style: none;
}
header .header-icons-text{
margin-right: 12%;
}
header .donate-img{
margin-top: 6%;
}
nav {
width: 100%;
height: 40px;
background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
border-radius: 6px;
}
nav ul{
list-style: none;
}
nav ul li{
margin-right: 5%;
display: inline-block;
}
</style>
您的 header 仅包含浮动元素,因此您需要对其进行 clearfix。