涵盖主要网站内容的导航菜单答案

【问题标题】：Navigation menu covering main site content涵盖主要网站内容的导航菜单
【发布时间】：2016-07-29 10:30:07
【问题描述】：

我网页的导航菜单涵盖了网站的主要内容/内容（父项内的内容）。当我向导航栏或父级添加边距时，导航栏会与父级中的图像/内容一起向下移动。下面是代码：

<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    background-image: url("background.jpg");        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
}

.outer {
    width:100%px;
    height: auto;
    margin: 0px;
}

.nav {
    width: 100%;
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    margin-top: -30px;

}
.nav .pic{
    width: 40%
    float: left;
    display: inline-block;
    margin-left: 60px
}
.nav .pic p{
    color: a5a5a5;
    margin-left: 10px;
}
.nav-bar{
    width: 60%;
    float: right;
    margin-top: 45px;
}
.nav-bar ul{
    list-style-type: none;
}
.nav-bar li{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.nav-bar a{
    color: #4f4946;
    text-decoration: none;
}

.nav-bar a:hover{
    color: #eb4934;
    transition: 0.75s ease-out;
}

.nav-bar a:active{
    color: #eb4934;
    transition: 0.75s ease-out;
}


.parent {
    height: auto;
    width: 80%;
    background-color: white;
    margin-top: 180px;
}

.bimg {
    background-image: url("img.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
}

请帮忙，提前致谢。

【问题讨论】：

您希望在哪里成为您的导航？固定顶部？

标签： html css web-deployment-project

【解决方案1】：

这是添加了部分响应...

ul {
  display: flex;
  width: none;
  white-space: nowrap;
}

【讨论】：

【解决方案2】：

您应该设置 NAV 的顶部、左侧和右侧，然后您可以更改您的父 margin-top（我想移动 .bimg DIV）保持您的 NAV 固定顶部。

CSS

.nav {
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Here a working fiddle

ps：您的 CSS .outer 定义中有错字

宽度：100%px；

【讨论】：

【解决方案3】：

从.parent 类中删除高度。您还必须将 top: 0 添加到导航类以将其修复到顶部。

这是这里的工作示例..

body {
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg");        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
}

.outer {
    width:100%;
    height: auto;
    margin: 0px;
}

.nav {
    width: 100%;
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
}
.nav .pic{
    width: 40%
    float: left;
    display: inline-block;
    margin-left: 60px
}
.nav .pic p{
    color: a5a5a5;
    margin-left: 10px;
}
.nav-bar{
    width: 60%;
    float: right;
}
.nav-bar ul{
    list-style-type: none;
}
.nav-bar li{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.nav-bar a{
    color: #4f4946;
    text-decoration: none;
}

.nav-bar a:hover{
    color: #eb4934;
    transition: 0.75s ease-out;
}

.nav-bar a:active{
    color: #eb4934;
    transition: 0.75s ease-out;
}


.parent {
    width: 80%;
    background-color: white;
    margin-top: 200px;
 
}

.bimg {
    background-image: url("https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
}

<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：