2016-02-14 65 views
2

創建列表我使用skrollr由具有視差滾動網頁,但是當我複製一個無序列表(在另一頁的工作沒有skrollr包括)到視差的網頁,他們似乎只的話(沒有下令數字或無序點),以及作爲非可點擊的鏈接,當我刪除腳本行:不能在HTML

<script src="dist/skrollr.min.js"></script> 

的聯繫變得點擊,但名單仍沒有list-style;我試圖設置z-index1000,但沒有奏效。

html, 
 
body, 
 
div, 
 
span, 
 
p, 
 
a, 
 
del, 
 
em, 
 
img, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 
html, 
 
body { 
 
    line-height: 1; 
 
    min-height: 100%; 
 
    font-family: Artial, Verdana, sans-serif; 
 
} 
 
body { 
 
    background: #eeeeee; 
 
    background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -o-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background-attachment: fixed; 
 
} 
 
ol, 
 
ul { 
 
    list-style: none; 
 
} 
 
q { 
 
    font-style: italic; 
 
    color: #333; 
 
} 
 
h1 { 
 
    font-size: 2.91em; 
 
    margin: 0; 
 
} 
 
h1 > small { 
 
    text-align: right; 
 
    display: inline-block; 
 
    font-size: .71em; 
 
    text-indent: 15em; 
 
    color: #444; 
 
} 
 
h2 { 
 
    color: inherit; 
 
    font-size: 1.91em; 
 
    margin: 2em 0 1em 0; 
 
} 
 
h2:first-child { 
 
    margin-top: 0; 
 
} 
 
h3 { 
 
    color: #333; 
 
    font-size: 1.41em; 
 
    margin: 1em 0; 
 
} 
 
#progress { 
 
    height: 2%; 
 
    background: #444; 
 
    bottom: 0; 
 
    z-index: 200; 
 
} 
 
#scrollbar { 
 
    position: fixed; 
 
    right: 2px; 
 
    height: 50px; 
 
    width: 6px; 
 
    background: #444; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    border: 1px solid rgba(255, 255, 255, 0.6); 
 
    z-index: 300; 
 
    border-radius: 3px; 
 
} 
 
.skrollr-desktop #scrollbar { 
 
    display: none; 
 
} 
 
#bg1, 
 
#bg2, 
 
#bg3 { 
 
    z-index: 50; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(images/bubbles.png) repeat 0 0; 
 
} 
 
#bg2 { 
 
    z-index: 49; 
 
    background-image: url(images/bubbles2.png); 
 
} 
 
#bg3 { 
 
    z-index: 48; 
 
    background-image: url(images/bubbles3.png); 
 
} 
 
#page1 { 
 
    float: left; 
 
    color: #F03; 
 
    font-size: 2em; 
 
    width: 80%; 
 
    left: 5%; 
 
    top: 1em; 
 
    margin-left: 10%; 
 
    padding: 2em; 
 
    background: #fff; 
 
    text-align: center; 
 
    border-radius: 1em; 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#page2 { 
 
    font-size: 2.5em; 
 
    padding-top: 10%; 
 
    text-align: center; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#page3 { 
 
    margin-right: 200px; 
 
    margin-top: 250px; 
 
    font-size: 1.8em; 
 
} 
 
#page4 { 
 
    color: #033; 
 
    margin-left: 50px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    z-index: 1000; 
 
} 
 
#easing_wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#easing { 
 
    top: 10%; 
 
    width: 50%; 
 
    z-index: 101; 
 
} 
 
.drop { 
 
    background: #09f; 
 
    font-weight: bold; 
 
    padding: 1em; 
 
} 
 
#download { 
 
    width: 80%; 
 
    left: 10%; 
 
    height: 80%; 
 
    padding: 3em; 
 
    border: 0 solid #222; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.twitter-share-button, 
 
.twitter-follow-button { 
 
    vertical-align: middle; 
 
}
<script src="dist/skrollr.min.js"></script> 
 
Các giai đoạn chính của Tết gồm : 
 
<ul style="text-decoration:none; text-align:left"> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Cu.E1.BB.91i_n.C4.83m">Cuối năm</li> 
 
<li>Tất niên 
 
\t <ol> 
 
    \t <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Giao_th.E1.BB.ABa">Giao thừa</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_ngo.C3.A0i_tr.E1.BB.9Di">Cúng giao thừa ngoài trời</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_trong_nh.C3.A0">Cúng giao thừa trong nhà</a> 
 
    </li> 
 
    </ol> 
 
    </li> 
 
    <li>Bảy ngày đầu năm</li> 
 
    <ol> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ba_ng.C3.A0y_T.C3.A2n_ni.C3.AAn">Ba ngày tân niên</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#X.C3.B4ng_.C4.91.E1.BA.A5t">Xông đất</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Xu.E1.BA.A5t_h.C3.A0nh_v.C3.A0_h.C3.A1i_l.E1.BB.99c">Xuất hành và hái lộc</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ch.C3.BAc_T.E1.BA.BFt">Chúc Tết</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#T.E1.BB.A5c_th.C4.83m_vi.E1.BA.BFng">Tục thăm viếng</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#M.E1.BB.ABng_tu.E1.BB.95i">Mừng tuổi</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#H.C3.B3a_v.C3.A0ng">Hóa vàng</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Khai_h.E1.BA.A1">Khai hạ</a> 
 
    </li> 
 
    </ol> 
 
</ul>

+1

你的CSS被指定爲不顯示任何東西:'OL,UL {list-style:none; }' - 刪除此,你應該是好去 - 歡迎計算器 – ochi

+0

我試過了,但似乎好好嘗試進行更改,甚至當我加入UL {列表樣式:圓) –

+0

確定,利潤率爲罪魁禍首太 - 很高興知道你有一個答案 – ochi

回答

1

你的CSS明確規定margin0list-stylenone

如果指定大於零一margin-left屬性或更高,並刪除list-style CSS然後一切都應該工作:

html, 
 
body, 
 
div, 
 
span, 
 
p, 
 
a, 
 
del, 
 
em, 
 
img, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 
html, 
 
body { 
 
    line-height: 1; 
 
    min-height: 100%; 
 
    font-family: Artial, Verdana, sans-serif; 
 
} 
 
body { 
 
    background: #eeeeee; 
 
    background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -o-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background: linear-gradient(top, #eeeeee, #cccccc 100%); 
 
    background-attachment: fixed; 
 
} 
 
/* 
 
Removing the list-style rules: 
 
ol, 
 
ul { 
 
    list-style: none; 
 
} 
 
*/ 
 
q { 
 
    font-style: italic; 
 
    color: #333; 
 
} 
 
h1 { 
 
    font-size: 2.91em; 
 
    margin: 0; 
 
} 
 
h1 > small { 
 
    text-align: right; 
 
    display: inline-block; 
 
    font-size: .71em; 
 
    text-indent: 15em; 
 
    color: #444; 
 
} 
 
h2 { 
 
    color: inherit; 
 
    font-size: 1.91em; 
 
    margin: 2em 0 1em 0; 
 
} 
 
h2:first-child { 
 
    margin-top: 0; 
 
} 
 
h3 { 
 
    color: #333; 
 
    font-size: 1.41em; 
 
    margin: 1em 0; 
 
} 
 
#progress { 
 
    height: 2%; 
 
    background: #444; 
 
    bottom: 0; 
 
    z-index: 200; 
 
} 
 
#scrollbar { 
 
    position: fixed; 
 
    right: 2px; 
 
    height: 50px; 
 
    width: 6px; 
 
    background: #444; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    border: 1px solid rgba(255, 255, 255, 0.6); 
 
    z-index: 300; 
 
    border-radius: 3px; 
 
} 
 
.skrollr-desktop #scrollbar { 
 
    display: none; 
 
} 
 
#bg1, 
 
#bg2, 
 
#bg3 { 
 
    z-index: 50; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(images/bubbles.png) repeat 0 0; 
 
} 
 
#bg2 { 
 
    z-index: 49; 
 
    background-image: url(images/bubbles2.png); 
 
} 
 
#bg3 { 
 
    z-index: 48; 
 
    background-image: url(images/bubbles3.png); 
 
} 
 
#page1 { 
 
    float: left; 
 
    color: #F03; 
 
    font-size: 2em; 
 
    width: 80%; 
 
    left: 5%; 
 
    top: 1em; 
 
    margin-left: 10%; 
 
    padding: 2em; 
 
    background: #fff; 
 
    text-align: center; 
 
    border-radius: 1em; 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#page2 { 
 
    font-size: 2.5em; 
 
    padding-top: 10%; 
 
    text-align: center; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#page3 { 
 
    margin-right: 200px; 
 
    margin-top: 250px; 
 
    font-size: 1.8em; 
 
} 
 
#page4 { 
 
    color: #033; 
 
    margin-left: 50px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    z-index: 1000; 
 
} 
 
#easing_wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#easing { 
 
    top: 10%; 
 
    width: 50%; 
 
    z-index: 101; 
 
} 
 
.drop { 
 
    background: #09f; 
 
    font-weight: bold; 
 
    padding: 1em; 
 
} 
 
#download { 
 
    width: 80%; 
 
    left: 10%; 
 
    height: 80%; 
 
    padding: 3em; 
 
    border: 0 solid #222; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.twitter-share-button, 
 
.twitter-follow-button { 
 
    vertical-align: middle; 
 
} 
 

 
/* adding a margin-left for the <li> elements: */ 
 
li { 
 
    margin-left: 2em; 
 
}
<script src="dist/skrollr.min.js"></script> 
 
Các giai đoạn chính của Tết gồm : 
 
<ul style="text-decoration:none; text-align:left"> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Cu.E1.BB.91i_n.C4.83m">Cuối năm</li> 
 
<li>Tất niên 
 
\t <ol> 
 
    \t <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Giao_th.E1.BB.ABa">Giao thừa</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_ngo.C3.A0i_tr.E1.BB.9Di">Cúng giao thừa ngoài trời</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_trong_nh.C3.A0">Cúng giao thừa trong nhà</a> 
 
    </li> 
 
    </ol> 
 
    </li> 
 
    <li>Bảy ngày đầu năm</li> 
 
    <ol> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ba_ng.C3.A0y_T.C3.A2n_ni.C3.AAn">Ba ngày tân niên</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#X.C3.B4ng_.C4.91.E1.BA.A5t">Xông đất</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Xu.E1.BA.A5t_h.C3.A0nh_v.C3.A0_h.C3.A1i_l.E1.BB.99c">Xuất hành và hái lộc</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ch.C3.BAc_T.E1.BA.BFt">Chúc Tết</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#T.E1.BB.A5c_th.C4.83m_vi.E1.BA.BFng">Tục thăm viếng</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#M.E1.BB.ABng_tu.E1.BB.95i">Mừng tuổi</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#H.C3.B3a_v.C3.A0ng">Hóa vàng</a> 
 
    </li> 
 
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Khai_h.E1.BA.A1">Khai hạ</a> 
 
    </li> 
 
    </ol> 
 
</ul>

+0

TKS兄弟,我試着刪除列表樣式只,但增加保證金解決:D –

+0

但是鏈接仍然無法點擊,有什麼不對? –