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

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

list-style-type:circle;  圆

list-style-type:square; 方形

代码测试,存为html文件,打开可以看到效果
<html>
<head>
<style type="text/css">
ulcircle {list-style-type:circle}
ulsquare {list-style-type:square}
olupper-roman {list-style-type:upper-roman}
ollower-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>

1、示例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

body{

padding: 20px;

}

#ufont{

color: lightskyblue;

font-size: 40px;

font-family: "bookman old style";

font-weight: bolder;

text-decoration: underline;

}

</style>

</head>

<body>

<div id="ufont">显示</div>

</body>

</html>

2、示例结果

3、知识扩展

none:            指定文字无装饰

underline:     指定文字的装饰是下划线

overline:       指定文字的装饰是上划线

line-through:指定文字的装饰是贯穿线

blink:            指定文字的装饰是闪烁

1按Ctrl+T组合键打开“字符格式化”泊坞窗,单击“字符”效果栏按钮展开其字符效果选项。

2下划线菜单选择下划线即可。

3单击“下划线”后的按钮,在其下拉列表框中选择“双细”选项,此时所选择文字的下方添加了下划线。

html添加下划线,需要结合css样式才能做出来,使用css的text-decoration:underline这个属性就行,如果不需要了用text-decoration:none就行,一般都是对文字使用,具体看下代码:
<html>
<head>
<style>
#div{
width:400px;
height:300px;
}

#div p{
line-height:30px;
text-text-decoration:underline;
}
</style>
</head>
<body>
<div id='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>

在plsql里,Tools里的Preferences,选择Fonts里的Main Font,把字体设为小四,代码助手框里就可以看见下划线了,如果想编辑框的字体大一点,就单独调整Editor里的字体,不要改变Main Font。


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

原文地址: https://outofmemory.cn/yw/12809305.html

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

发表评论

登录后才能评论

评论列表(0条)

保存