CSS ul标签如何实现序号下面出现下划线

CSS ul标签如何实现序号下面出现下划线,第1张

list-style-type:circle  圆

list-style-type:square 方形

代码测试,存为html文件,打开可以看到效果

<html>

<head>

<style type="text/css">

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

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

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

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

</style>

</head>

<body>

<p>Type circle:</p>

<ul class="circle">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Type square:</p>

<ul class="square">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Type upper-roman:</p>

<ol class="upper-roman">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<p>Type lower-alpha:</p>

<ol class="lower-alpha">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>

你好,我根据你的要求编写了下面的代码,请参考:

<!--无序列表-->

<ul>

<li>第1个li元素</li>

<li>第2个li元素</li>

<li>第3个li元素</li>

</ul>

<!--下划线样式-->

<style>

ul li{text-decoration:underline}

</style>

如对以上代码仍有疑惑,欢迎追问。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11823886.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存