Html中列表元素ul的实例应用

超、凢脫俗 2022-04-14 20:19 410阅读 0赞

# html中列表元素的一些应用 #

## 1.导航栏的制作 ##

导航栏基本每一个网站都会用到，那么我们就可以使用html中的列表元素ul来制作一个简单的导航栏。

![导航列表][20181122153411450.png]  
再使用一些简单的CSS就可以转换成好看的导航栏而不是枯燥的HTML菜单。

.topmenu {
          list-style-type: none;
          margin: 1;
          padding: 0;
          overflow: hidden;
          background-color:#666;
      }
      .topmenu li {
          float:left;
      }
      .topmenu li a {
          display: inline-block;
          color: white;
          text-align: center;
          padding: 25px;
          text-decoration: none;
      }
      .topmenu li a:hover {
          background-color:darkorange;
      }
      .topmenu li a.active {
          color: white;
          background-color:darkcyan;
      }

![简易导航栏][20181122153825571.png]

## 2.排行榜的制作 ##

也可以使用列表元素ol来制作排行榜的展示，例如某站：  
![排行榜][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]  
代码写起来应该不算困难，本菜等以后用到之后再去实践了。

## 3.文章板块化，格式化版面等具有相同文体特征的内容的制作 ##

比如一个网页有一列相同板块的内容等，如文章列表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]

代码部分：

<section class="bottomsection">
            <div class="container aftercontain">
                <div class="row">
                    <div class="col-12">
                        <ul class="nav nav-tabs m-4">
                            <li class="nav-item"><a href="#" class="nav-link text-light active">最新博文</a></li>
                            <li class="nav-item"><a href="#" class="nav-link disabled">其他想法</a></li>
                        </ul>
                        <ul class="m-4  ul_notecontain">
                            <li class="p-4">
                                <h3 class="mb-4">第一篇博客</h3>
                                <i>
                                    <div class="fakeimg mr-3" style="float: left">图像</div>
                                    这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！
                                </i>
                                <p style="margin-top:40px;">
                                    <span>帮我消消黑眼圈</span>
                                    <span><small>-----------------2018-12-08-----------------</small></span>
                                    <a href="#" class="btn btn-danger" style="float: right">阅读更多</a>
                                </p>
                            </li>
                            <div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div>
                            <li class="p-4">
                                <h3 class="mb-4">第二篇博客</h3>
                                <i>
                                    <div class="fakeimg mr-3" style="float: left">图像</div>
                                    这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！
                                </i>
                                <p style="margin-top:40px;">
                                    <span>帮我消消黑眼圈</span>
                                    <span><small>-----------------2018-12-09-----------------</small></span>
                                    <a href="#" class="btn btn-danger" style="float: right">阅读更多</a>
                                </p>
                            </li>
                            <div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div>
                            <li class="p-4">
                                <h3 class="mb-4">第三篇博客</h3>
                                <i>
                                    <div class="fakeimg mr-3" style="float: left">图像</div>
                                    这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！
                                </i>
                                <p style="margin-top:40px;">
                                    <span>帮我消消黑眼圈</span>
                                    <span><small>-----------------2018-12-10-----------------</small></span>
                                    <a href="#" class="btn btn-danger" style="float: right">阅读更多</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

## 4.轮播图，全屏焦点图的制作 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 2]  
代码部分  
html：

css：

js：

$(function() {
        var $wrap = $('#wrap'),
            $picUl = $('.pic'),
            $tabLi = $('.tab li'),
            $prev = $('.prev'),
            $next = $('.next'),
            widLi = $picUl.children().eq(0).width(),
            len = $tabLi.length,
            idx = 0,
            timer = null;
    
        //get first; set all
        $tabLi.click(function() {
            $(this).addClass("on").siblings().removeClass("on")
            idx = $(this).index();
    
            $picUl.animate({
                left: -idx * widLi
            }, 500)
        })
        // 点击下一张
        $next.click(function() {
            idx++;
            idx %= len; // 序号为小圆按钮的长度时到达第一张
            $tabLi.eq(idx).addClass("on").siblings().removeClass("on")
            $picUl.animate({
                left: -idx * widLi
            }, 500)
        })
    
        $prev.click(function() {
            idx--;
            if (idx < 0) {
                idx = len - 1
            };
    
            $tabLi.eq(idx).addClass("on").siblings().removeClass("on")
            $picUl.animate({
                left: -idx * widLi
            }, 500)
        })
    
        // 自动轮播
        auto();
    
        function auto() {
            timer = setInterval(function() {
                $next.trigger("click") // 触发click
            }, 3000)
        }
    
        $wrap.hover(function() {
            clearInterval(timer);
        }, function() {
            auto();
        })
    })

## 5.遇到再来补充 ##

还有什么欢迎各位大佬补充

[20181122153411450.png]: /images/20220415/44ce7d6255c64832afe964f1cca9afa5.png
[20181122153825571.png]: /images/20220415/e6388cee17944015b9df13a4ab9d3bb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220415/6e7a2ca2ac394c0eb7b4a5cf78864d19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]: /images/20220415/12e06d1cdf1b4f018ed533be50d10d66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 2]: /images/20220415/88aa28a9643147d7bd46b1f458e379d8.png