这是网站：http: //100.365fragments.com/
这是导航部分的html：
<div class="content_nav">stranger #
<a href="#stranger1" class="panel">1</a> |
<a href="#stranger2" class="panel">2</a> |
<a href="#stranger3" class="panel">3</a> |
<a href="#stranger4" class="panel">4</a> |
<a href="#stranger5" class="panel">5</a> |
<a href="#stranger6" class="panel">6</a> |
<a href="#stranger7" class="panel">7</a> |
<a href="#stranger8" class="panel">8</a> |
<a href="#stranger9" class="panel">9</a> |
<a href="#stranger10" class="panel">10</a> |
<a href="#stranger11" class="panel">11</a> |
<a href="#stranger12" class="panel">12</a> |
<a href="#stranger13" class="panel">13</a> |
<a href="#stranger14" class="panel">14</a> |
<a href="#stranger15" class="panel">15</a> |
<a href="#stranger16" class="panel">16</a> |
<a href="#stranger17" class="panel">17</a> |
<a href="#stranger18" class="panel">18</a> |
<a href="#stranger19" class="panel">19</a> |
<a href="#stranger20" class="panel">20</a> |
<a href="#stranger21" class="panel">21</a> |
<a href="#stranger22" class="panel">22</a> |
<a href="#stranger23" class="panel">23</a> |
<a href="#stranger24" class="panel">24</a> |
<a href="#stranger25" class="panel">25</a> |
<a href="#stranger26" class="panel">26</a> |
<a href="#stranger27" class="panel">27</a> |
<a href="#stranger28" class="panel">28</a> |
<a href="#stranger29" class="panel">29</a> |
<a href="#stranger30" class="panel">30</a> |
<a href="#stranger31" class="panel">31</a> |
<a href="#stranger32" class="panel">32</a> |
<a href="#stranger33" class="panel">33</a> |
<a href="#stranger34" class="panel">34</a> |
<a href="#stranger35" class="panel">35</a> |
<a href="#stranger36" class="panel">36</a> |
<a href="#stranger37" class="panel">37</a> |
<a href="#stranger38" class="panel">38</a> |
<a href="#stranger39" class="panel">39</a> |
<a href="#stranger40" class="panel">40</a> |
<a href="#stranger41" class="panel">41</a> |
<a href="#stranger42" class="panel">42</a> |
<a href="#stranger43" class="panel">43</a> |
<a href="#stranger44" class="panel">44</a> |
<a href="#stranger45" class="panel">45</a> |
<a href="#stranger46" class="panel">46</a> |
<a href="#stranger47" class="panel">47</a> |
<a href="#stranger48" class="panel">48</a> |
<a href="#stranger49" class="panel">49</a> |
<a href="#stranger50" class="panel">50</a> |
<a href="#stranger51" class="panel">51</a> |
<a href="#stranger52" class="panel">52</a> |
<a href="#stranger53" class="panel">53</a> |
<a href="#stranger54" class="panel">54</a> |
<a href="#stranger55" class="panel">55</a> |
<a href="#stranger56" class="panel">56</a> |
<a href="#stranger57" class="panel">57</a> |
<a href="#stranger58" class="panel">58</a> |
<a href="#stranger59" class="panel">59</a> |
<a href="#stranger60" class="panel">60</a> |
<a href="#stranger61" class="panel">61</a> |
<a href="#stranger62" class="panel">62</a> |
<a href="#stranger63" class="panel">63</a> |
<a href="#stranger64" class="panel">64</a> |
<a href="#stranger65" class="panel">65</a> |
<a href="#stranger66" class="panel">66</a> |
<a href="#stranger67" class="panel">67</a> |
<a href="#stranger68" class="panel">68</a> |
<a href="#stranger69" class="panel">69</a> |
<a href="#stranger70" class="panel">70</a> |
<a href="#stranger71" class="panel">71</a> |
<a href="#stranger72" class="panel">72</a> |
<a href="#stranger73" class="panel">73</a> |
<a href="#stranger74" class="panel">74</a> |
<a href="#stranger75" class="panel">75</a> |
<a href="#stranger76" class="panel">76</a> |
<a href="#stranger77" class="panel">77</a> |
<a href="#stranger78" class="panel">78</a> |
<a href="#stranger79" class="panel">79</a> |
<a href="#stranger80" class="panel">80</a> |
<a href="#stranger81" class="panel">81</a> |
<a href="#stranger82" class="panel">82</a> |
<a href="#stranger83" class="panel">83</a> |
<a href="#stranger84" class="panel">84</a> |
<a href="#stranger85" class="panel">85</a> |
<a href="#stranger86" class="panel">86</a> |
<a href="#stranger87" class="panel">87</a> |
<a href="#stranger88" class="panel">88</a> |
<a href="#stranger89" class="panel">89</a> |
<a href="#stranger90" class="panel">90</a> |
<a href="#stranger91" class="panel">91</a> |
<a href="#stranger92" class="panel">92</a> |
<a href="#stranger93" class="panel">93</a> |
<a href="#stranger94" class="panel">94</a> |
<a href="#stranger95" class="panel">95</a> |
<a href="#stranger96" class="panel">96</a> |
<a href="#stranger97" class="panel">97</a> |
<a href="#stranger98" class="panel">98</a> |
<a href="#stranger99" class="panel">99</a> |
<a href="#stranger100" class="panel">100</a>
</div>
这是CSS：
body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}
#mask {
width:10000%;
height:100%;
background-color:#eee;
}
.stranger {
width:1%;
height:100%;
float:left;
background-color:#ddd;
}
.content {
width:800px;
height:200px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.content {
width:800px;
height:200px;
top:8%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
#nav_content {
width: 800px;
height: 100px;
top:60%;
margin-left: auto;
margin-right:auto;
display:block;
text-align:center;
background-color:#aaa;
}
content_nav {
width: 800px;
height: 100px;
margin-left: auto;
margin-right:auto;
display:block;
text-align:center;
background-color:#aaa;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
</style>
当您查看第二个链接时，它会滚动到右侧框，但是，导航会离开屏幕。我不太确定我做错了什么。欢迎就此提出建议。
谢谢