​list-style-type属性与type属性设置

​list-style-type属性与type属性设置

list-style-type的属性设置与第一章里面<ul>,<ol>处介绍的type属性设置是同一种方法吗?http://img1.sycdn.imooc.com//climg/5bbcbbc50001715815610714.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
妮可妮可妮_ 2018-10-22 09:42:56

ol标签的type 属性规定有序列表的项目符号的类型。

http://img1.sycdn.imooc.com//climg/5bcd2ace000141e806190188.jpg

在 HTML 4.01 中,不赞成使用 ol 元素的 type 属性;在 XHTML 1.0 Strict DTD 中,不支持 ol 元素的 type 属性。

需要使用 CSS 代替:<ol style="list-style-type:          ">


妮可妮可妮_ 2018-10-10 09:58:08

list-style-type 属性设置列表项标记的类型。

http://img1.sycdn.imooc.com//climg/5bbd5b5c00018d5e08120702.jpg

不太明白同学所表达的意思,建议同学尽量清晰完善地描述问题,以便大家给予专业的回复。

可以尝试运行下面的例子,有可能会解决你的疑惑哦~

<html>

<head>
<style type="text/css">
ul.none {
list-style-type: none
}

ul.disc {
list-style-type: disc
}

ul.circle {
list-style-type: circle
}

ul.square {
list-style-type: square
}

ul.decimal {
list-style-type: decimal
}

ul.decimal-leading-zero {
list-style-type: decimal-leading-zero
}

ul.lower-roman {
list-style-type: lower-roman
}

ul.upper-roman {
list-style-type: upper-roman
}

ul.lower-alpha {
list-style-type: lower-alpha
}

ul.upper-alpha {
list-style-type: upper-alpha
}

ul.lower-greek {
list-style-type: lower-greek
}

ul.lower-latin {
list-style-type: lower-latin
}

ul.upper-latin {
list-style-type: upper-latin
}

ul.hebrew {
list-style-type: hebrew
}

ul.armenian {
list-style-type: armenian
}

ul.georgian {
list-style-type: georgian
}

ul.cjk-ideographic {
list-style-type: cjk-ideographic
}

ul.hiragana {
list-style-type: hiragana
}

ul.katakana {
list-style-type: katakana
}

ul.hiragana-iroha {
list-style-type: hiragana-iroha
}

ul.katakana-iroha {
list-style-type: katakana-iroha
}
</style>
</head>

<body>
<ul class="none">
<h2>"none" 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="disc">
<h2>Disc 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="circle">
<h2>Circle 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="square">
<h2>Square 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="decimal">
<h2>Decimal 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="decimal-leading-zero">
<h2>Decimal-leading-zero 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="lower-roman">
<h2>Lower-roman 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="upper-roman">
<h2>Upper-roman 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="lower-alpha">
<h2>Lower-alpha 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="upper-alpha">
<h2>Upper-alpha 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="lower-greek">
<h2>Lower-greek 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="lower-latin">
<h2>Lower-latin 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="upper-latin">
<h2>Upper-latin 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="hebrew">
<h2>Hebrew 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="armenian">
<h2>Armenian 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="georgian">
<h2>Georgian 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="cjk-ideographic">
<h2>Cjk-ideographic 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="hiragana">
<h2>Hiragana 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="katakana">
<h2>Katakana 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="hiragana-iroha">
<h2>Hiragana-iroha 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

<ul class="katakana-iroha">
<h2>Katakana-iroha 类型</h2>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>

</body>

</html>


  • 这个同学是说,前面HTML里面有一种这样的列表标签属性设置。为什么这里又讲属性设置。这次的跟之前的方法有什么区别?
    2018-10-21 23:31:21
  • 因为在实战项目中,官方推荐我们css样式和HTML分离的,这样一来容易修改维护,二来对于浏览器加载页面的性能也优化了
    2018-10-25 10:38:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师