Question

我正在尝试制作这个网页而且它有很多问题。我无法居中#titlediv，导航栏有时会消失。我不会撒谎：这可能是一个很大的问题，我真的不确定。但是，如果有人能够挽救它，这就是链接：

http://jsfiddle.net/glenohumeral13/c604vbrn/

代码：

<body>
    <div id="parallaxish"></div>
    <div id="navbar">
        <nav>
<a href="#item1">Item1</a>

<a href="#item2">Item2</a>

<a href="#item3">Item3</a>

        </nav>
    </div>
    <div id="contentdiv">
        <div id="welcome">
            <div id="titlediv">

<h1>Title will go here</h1>

            </div>
        </div>
        <div class="barrier"></div>
        <div id="item1">

<h1>Item1</h1>

        </div>
        <div class="barrier"></div>
        <div id="item2">

<h1>Item2</h1>

        </div>
    </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    color: #fff;
    background-color: #000;
    font-family: Helvetica, Arial, sans-serif;
}
img {
    max-width: 100%;
    height: auto;
}
#parallaxish {
    background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-position: center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: auto;
}
#navbar {
    float:right;
    height: 30px;
    margin-right: 100px;
}
nav a {
    text-decoration: none;
    display: inline;
    list-style-type: none;
    padding-right: 15px;
    padding-top: 10px;
    float: left;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
    font-weight: 100;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}
nav a:hover {
    color: #16a085;
}
#welcome {
    height: 600px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
}
#titlediv {
    border: 2px solid #fff;
    width: 180px;
    margin: auto;
    padding: auto auto;
    position: absolute;
    left: 0;
    right: 0;
    overflow: auto;
}
.barrier {
    height: 120px;
    width: 100%;
    background: transparent;
}
#item1 {
    height: 600px;
    width: 100%;
    text-align: center;
    background-color: white;
    color: #16a085;
}
#item1 h1, #item2 h1 {
    padding: 5% 0;
}
#item2 {
    height: 600px;
    width: 100%;
    text-align: center;
    background-color: black;
    color: white;
}

Answer 1

首先，一个演示！
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
你想要做的是在div中垂直和水平居中，看起来是正确的吗？有一种简单的方法可以用css做到这一点，我觉得非常有用：

<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>

首先，我们将position:relative;提供给div id="welcome"：

/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}

然后，魔术！ <div> id="titlediv"被赋予position:absolute;以及其他一些规则：

#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}

这个小技巧只有在声明宽度和高度时才有效。现在，为导航栏轻松修复：

#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}

并将其全部包装起来，全屏演示！
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/

Answer 2

http://stickyjs.com/会帮助你！我

//LOAD THE FILES
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>

/RUN THE SCRIPT
<script>
$(document).ready(function(){
$("#navbar").sticky({topSpacing:0});
});
</script>

Answer 3

如果我在你的位置，我将尝试使用像bootstrap或foundation这样的框架来制作我的页面，如果你想要一个轻量级的框架，你总是可以尝试使用骨架很容易使用＆amp;你可以很容易地在网上找到片段：

http://getbootstrap.com/ | http://bootsnipp.com/

希望我帮助过你。下次尝试先使用谷歌

如何集中和修复我乱糟糟的网页？

3 个答案: