无法在 HTML 中创建列表
cannot create list in html
我使用 skrollr
制作了一个具有视差滚动的网页,但是当我将一个无序列表(在另一个不包含 skrollr 的页面中工作(复制到视差网页中时,它们只显示单词(没有有序数字或无序点(以及链接不可点击,当我删除脚本行时:
<script src="dist/skrollr.min.js"></script>
链接变得可点击,但列表仍然没有list-style
;我试图将z-index
设置为 1000
,但没有奏效。
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
<ol>
<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>
您的 CSS 明确将margin
设置为 0
,list-style
设置为 none
。
如果您指定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
<ol>
<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>
相关文章:
- 为对象数组创建列表项
- 如何在单击时创建列表
- 如何使用jquery创建列表
- 创建列表时,像在Ranker.com上一样创建多个项目
- 用于在Backbone中创建列表的Handlebars模板
- jQuery如何在页面重载时保留动态创建列表的选定选项
- 如何将动态创建的元素添加到我的动态创建列表中
- 如何使用 Javascript 和 jQuery 创建列表
- 如何从 JSON 数组创建列表
- 无法在 HTML 中创建列表
- 如何使用 AngularJS 创建列表视图
- 在 PHP 中的容器中创建列表
- 如何在文本区域中创建列表
- 在 JavaScript 中创建列表项
- 如何在 JavaScript 中创建列表参数来调用 WCF-Webservice
- 使用 Jscript 创建列表菜单运行时
- 从文本区域中的选定文本创建列表html
- 使用按钮创建列表
- 用于创建列表页列表项的谷歌应用程序脚本
- 从导入的JSON文件创建列表