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

list-style-type的属性设置与第一章里面<ul>,<ol>处介绍的type属性设置是同一种方法吗？

大笨钟1993 2018-10-09

源自：CSS背景和列表 3-1 list-style-type

收起

2回答

妮可妮可妮_ 2018-10-22 09:42:56

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

在 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 属性设置列表项标记的类型。

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

<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>

收起回答

汪晓歌 #1

这个同学是说，前面HTML里面有一种这样的列表标签属性设置。为什么这里又讲属性设置。这次的跟之前的方法有什么区别？

2018-10-21 23:31:21
一只52HZ的鲸回复汪晓歌 #2

因为在实战项目中，官方推荐我们css样式和HTML分离的，这样一来容易修改维护，二来对于浏览器加载页面的性能也优化了

2018-10-25 10:38:05