?藍(lán)色部分是我做的下一頁,但是現(xiàn)在被第一頁覆蓋了.想請教下是什么問題>?<!DOCTYPE?html>
<html>
<head?lang="en">
???<meta?charset="UTF-8">
???<title>小窩</title>
</head>
???<link?href="css/font-awesome.min.css"?rel="stylesheet">
???<link?href="css/style.css"?rel="stylesheet"?type="text/css">
<body>
?<!--頭部開始-->
?<div?class="header">
??????<div?class="nav">
?????????<div?class="nav-bg">
????????????<div?class="container">
???????????????<div?class="nav-logo">標(biāo)志</div>
???????????????<div?class="nav-btn">
??????????????????<ul>
?????????????????????<li><a?href="#">鏈接1</a></li>
?????????????????????<li><a?href="#">鏈接2</a></li>
?????????????????????<li><a?href="#">鏈接3</a></li>
?????????????????????<li><a?href="#">鏈接4</a></li>
??????????????????</ul>
???????????????</div>
????????????</div>
?????????</div>
??????</div>
??????<div?class="banner">
?????????<div?class="container">
????????????<div?class="text-area">
???????????????<h2>肥才</h2>
???????????????<div?class="line"></div>
???????????????<span>這是一個小標(biāo)題</span>
???????????????<p>Failure?is?probably?the?fortification?in?your?pole.?It?is?like?a?peek?your?wallet?as?the?thief,
??????????????????when?you?are?thinking?how?to?spend?several?hard-won?lepta,?when?you?are?wondering?whether?new
??????????????????money,?it?has?laid?background.?Because?of?you,then?at?the?heart?of?the?most?lax,?alert,?and
??????????????????most?low?awareness,?and?left?it?godsend?failed.</p>
???????????????<a?class="icon-double-angle-down?icon-3x"?href="#"></a>
????????????</div>
?????????</div>
??????</div>
???</div>
?<!--頭部結(jié)束-->
???<!--內(nèi)容開始-->
?<div?class="content">
??????<div?class="container">
?????????<div?class="content-text">
????????????<h2>肥才</h2>
????????????<div?class="line"></div>
????????????<span>這是一個小標(biāo)題</span>
????????????<p>Failure?is?probably?the?fortification?in?your?pole.?It?is?like?a?peek?your?wallet?as?the?thief,
???????????????when?you?are?thinking?how?to?spend?several?hard-won?lepta,?when?you?are?wondering?whether?new
???????????????money,?it?has?laid?background.?Because?of?you,then?at?the?heart?of?the?most?lax,?alert,?and
???????????????most?low?awareness,?and?left?it?godsend?failed.</p>
????????????<a?class="icon-double-angle-down?icon-3x"?href="#"></a>
?????????</div>
??????</div>
???</div>
?<!--內(nèi)容結(jié)束-->
???<!--腳部開始-->
?<div?class="footer"></div>
?<!--腳部結(jié)束-->
</body>
</html>*?{
????font-family:Microsoft?YaHei;
????margin:?0px;
????padding:?0px;
????color:?#FFFFFF;
}
.clear?{
????clear:?both;
}
.container?{
????width:?80%;
????margin:?0px?auto;
}
a:hover?{
????color:?#d3d3d3;
}
a?{
????@transition:?0.5s?all;
????-webkit-transition:?0.5s?all;
????-moz-transition:?0.5s?all;
????-ms-scroll-translation:?0.5s?all;
}
/*頭部開始*/
.header?{
????background:?url("");
????background:?darkgray;
????min-height:?700px;
????width:?100%;
????background-repeat:?no-repeat;
????background-size:?cover;
????position:?fixed;
????clear:?both;
}
.nav-bg?{
????background:?rgba(0,?0,?0,?0.4);
????height:?54px;
}
.nav-logo?{
????float:?left;
????font-size:?32px;
????color:?#FFFFFF;
????padding:?3px?0px?6px?0px;
}
.nav-btn?ul?{
????float:?right;
}
.nav-btn?ul?li{
????list-style-type:?none;
????display:?inline-block;
????padding:?14px?14px?14px?14px;
}
.nav-btn?ul?li?a?{
????text-decoration:?none;
????color:?#FFFFFF;
}
.text-area?{
????text-align:?center;
????position:?relative;
????top:?100px;
}
.text-area?h2?{
????margin:?20px?0px;
????font-size:?30px;
}
.line?{
????height:?1px;
????background-color:?black;
????width:?40%;
????margin:?0px?auto;
}
.text-area?span?{
????margin:?20px?0px;
????display:?block;
}
.text-area?p?{
????width:50%;
????margin:?0px?auto;
????line-height:?25px;
????font-size:?14px;
}
.text-area?a?{
????position:?relative;
????top:?200px;
}
/*頭部結(jié)束*/
/*內(nèi)容開始*/
.content?{
????position:?relative;
????background:?#333333;
????width:?100%;
}
.content-text?{
????text-align:?center;
}
.content-text?h2?{
????margin:?20px?0px;
????font-size:?30px;
}
.content-text?span?{
????margin:?20px?0px;
????display:?block;
}
.content-text?p?{
????width:50%;
????margin:?0px?auto;
????line-height:?25px;
????font-size:?14px;
}
/*內(nèi)容結(jié)束*/
6 回答
已采納
woshiajuana
TA貢獻(xiàn)211條經(jīng)驗(yàn) 獲得超152個贊
因?yàn)槟?span>頭部.header里面使用position:fixed;代表header已經(jīng)脫了了文檔流，所以你內(nèi)容content是居頂部的
解決的話可以給content一個margin-top或者h(yuǎn)eader的定位改下
旋上的舞
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超1個贊
.content?{ position:?relative;background:?#333333; width:?100%;} 這里應(yīng)該改成position: absolute;? top:100%; 是不是你想要的效果啊，它在第二頁呢
就是這樣添加回答
舉報
0/150
提交
取消