Html中列表元素ul的实例应用_html好看组件ul

作者：2023面试高手 | 2024-03-28 09:03:15

踩

html好看组件ul

html中列表元素的一些应用

1.导航栏的制作

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

        <ul class="topmenu">
                <li><a href="#home" class="active">主页</a></li>
                <li><a href="#other">新闻</a></li>
                <li><a href="#other">联系</a></li>
                <li><a href="#other">关于</a></li>
        </ul>
1
2
3
4
5
6

导航列表
再使用一些简单的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;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

简易导航栏

2.排行榜的制作

也可以使用列表元素ol来制作排行榜的展示，例如某站：

代码写起来应该不算困难，本菜等以后用到之后再去实践了。

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

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

代码部分：

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

在这里插入图片描述
代码部分
html：

  <div id="wrap">
    <ul class="pic">
        <li style="background:purple">1
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:deeppink">2
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:blue">3
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:#00ae9d">4
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:yellow">5
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:skyblue">6
            <a href="#"><img src="" alt=""></a>
        </li>
        <li style="background:orange">7
            <a href="#"><img src="" alt=""></a>
        </li>
    </ul>
    <ul class="tab">
        
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p href="#" class="prev">
        &lt;</p>
            <p href="#" class="next">&gt;</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

css：

<style>
* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
li {
	list-style:none;
}
#wrap {
	position:relative;
	width:700px;
	height:400px;
	margin:50px auto;
	overflow:hidden;
}
#wrap .pic {
	position:absolute;
	top:0;
	left:0;
	width:1000%;
	height:100%;
}
.pic li {
	float:left;
	width:700px;
	height:400px;
	color:#fff;
	font-size:80px;
	text-align:center;
	line-height:400px;
}
.pic li img {
	border:0;
	vertical-align:middle;
	/*width:700px;
	height:400px;
	*/
}
.tab {
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-100px;
	height:30px;
	padding-left:10px;
	background:rgba(0,0,0,.2);
	border-radius:15px;
	transition:0.5s;
}
.tab:hover {
	background:rgba(0,0,0,.5);
	transform:scale(1.2);
}
.tab li {
	width:20px;
	height:20px;
	float:left;
	background:#fff;
	border-radius:50%;
	margin:5px 10px 0 0;
	/*opacity:0.35;
	*/
			cursor:pointer;
}
.tab li.on {
	/*position:absolute;
	top:0;
	*/
			background:#f60;
	/*opacity:1;
	z-index:99;
	*/
}
p {
	position:absolute;
	top:50%;
	margin-top:-30px;
	width:30px;
	background:rgba(0,0,0,0.2);
	text-align:center;
	font-size:28px;
	font-weight:bold;
	line-height:60px;
	color:#fff;
	cursor:pointer;
}
p:hover {
	background:rgba(0,0,0,0.5);
}
.prev {
	left:0;
}
.next {
	right:0;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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();
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

5.遇到再来补充

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/329086