怎么让<li></li>标签显示它的下划线？

Posted 2023-05-03

方法/步骤

语法与结构 

<u>我是简CC</u>我们使用u标签对文字设置下划线样式

html U下划线标签使用说明

<u></u>下划线标签告诉浏览器把其加u标签的文本加下划线样式呈现显示给浏览者。对于所有浏览器来说，这意味着要把这段文字加下划线样式方式呈现给大家显示。

Html下划线U标签使用案例 

我是<u>简CC</u> ! 

html下划线效果示例图



5

使用说明

<u> 标签修饰的内容将被加下划线。

同时如果使用html u对文字内容下划线样式，而不想显示下划线，但可以使用CSS样式设置去掉u标签下划线样式。

参考技术A <li style="text-decoration:underline;list-style-type:none;">dsf</li>追问

我是说li标签它有下划线，怎么让他显示出来。不是说里面的内容。

追答

li 本身是没有下划线的，要用样试去设置它。以下几种都可实现下划线：
dsf

本回答被提问者采纳

我怎样才能让动画一个一个地运行？

【中文标题】我怎样才能让动画一个一个地运行？

【英文标题】：How can I make the animations be run one by one?

【发布时间】：2015-02-23 13:12:46

【问题描述】：

HTML 代码：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

js代码：

<script type="text/javascript">
$(document).ready(function() 
    var lis = $("li");
    for (var i = 0; i < lis.length; i++) 
        $(lis[i]).animate(opacity: 0, 1000);
    
);
</script>

我只是发现lis会一起消失。怎样才能让它们一个一个消失？

【参考方案1】：

很抱歉迟到了。

现有的答案在计时器阻塞时存在问题，并且依赖于计时器的准确性，而且它们需要实际的延迟。

jQuery 实际上提供了一种通用的方式来使用 Promise 顺序执行动画：

$(document).ready(function() 
    var lis = $("li");
    var queue = $.Deferred().resolve(); // create an empty queue
    lis.get().forEach(function(li)
        queue = queue.then(function()
           return $(li).animate(opacity: 0, 1000).promise();
        )
    );
);

Fiddle

请注意，即使您为它们分配不同的动画持续时间或不同的动画，这也会起作用，queue 中的结果将包含最后一个动画完成时的挂钩。这也支持聚合（等待所有 Promise 并行完成）等等。

【参考方案2】：

每个元素都有自己的动画队列，所以正如您所见，它们都同时进行动画处理，而不是等待前一个元素完成。您可以为每个元素添加延迟：

$(lis[i]).delay(i*1000).animate(opacity: 0, 1000);
// ------^^^^^^^^^^^^^^

演示：http://jsfiddle.net/p2kdpxr3/

【参考方案3】：

使用delay()

$(lis[i]).delay(i * 500).animate(opacity: 0, 1000);

DEMO

【参考方案4】：

你可以使用delay()函数

for (var i = 0; i < lis.length; i++) 
    $(lis[i]).delay(i * 400).animate(opacity: 0, 1000);
              ^^^^^^^^^^^^^^

JS Fiddle

【参考方案5】：

您可以改为使用 CSS animation/transition 和相关的 transitionEnd 事件，其逻辑如下：

$(function() 
  var events = [
    "webkitTransitionEnd",
    "oTransitionEnd",
    "otransitionend",
    "MSTransitionEnd",
    "transitionend"
  ];


  $("li").on(events.join(" "), function(e) 
    $(this).next().addClass('animated');
  ).first().addClass('animated');
);

li 
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;

li.animated 
  opacity: 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

-DEMO jsFiddle-