h5学习笔记 ul和li组合

最新推荐文章于 2025-02-08 18:36:55 发布

传说中的贫民窟

最新推荐文章于 2025-02-08 18:36:55 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/truhfcg/article/details/83952373

本文介绍了使用HTML的ul和li元素制作wing插件目录时的经验，强调了在制作HTML页面时如何处理样式覆盖问题，以及分享了一篇关于人工智能的零基础教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

今天在做wing插件时候，尝试看看参考书的百度阅读的目录来做插件目录。因为wing里面导入html的样式会发生一些改变。所以制作的html页面的时候需要在里面做一下手脚。加入!important; 防止覆盖。
发现这个组合也挺漂亮的。

效果图如下
这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>插件开发导航</title>    </head>    <style type="text/css">        #book ul{            list-style-type: none;        }        #book ul li{            border-bottom: 1px solid #F8F8F8;;               height: 30px;            line-height: 30px;        }        #book ul li a{            border-left: 3px solid #58DB5A;            padding-left: 8px;              text-decoration: none;              color: #666;             }        #book ul li a:hover{             color:#58DB5A;              cursor: pointer;        }        #book .info{            border-bottom: 1px solid #999999;            line-height: 30px;            margin-left: 40px;                  }        #book .jianjie{            margin-left: 40px;            color: #666!important;        }         .editor-container         {             background-color:#fff!important;             width:100%;             height:100%;             font-size: 15px!important;             font-family: Verdana, Geneva, Tahoma, sans-serif!important;                      }         .htitle{                       left:50%;            top:20%;            display: inline-block;            position: absolute;            color: white;            margin-left: -100px;         }    </style>    <body>        <div class="editor-container">        <div id="book">            <div style="position: relative;">                <img src="bg.jpg"/>                <h2 class="htitle">Wing 插件开发教程</h2>            </div>            <p class="jianjie"><b>简介</b><br><br>                这是一本关于wing插件开发的部分目录教程。与其说是教程不如更贴切是一本笔记                          </p>            <p class="info"><b>目录共(24章)</b></p>            <ul>                <li> <a href="html/1.html" target="_self">1.序</a></li>                <li> <a href="html/2.html" target="_self">2.黑盒子测试</a></li>                <li> <a href="html/3.html" target="_self">3.编写插件前准备</a></li>                <li> <a href="html/4.html" target="_self">4.使用插件模板</a></li>                <li> <a href="html/5.html" target="_self">5.编写第一个插件</a></li>                <li> <a href="html/6.html" target="_self">6.借助脚本</a></li>                <li> <a href="html/7.html" target="_self">7.路径的使用</a></li>                <li> <a href="html/8.html" target="_self">8.vscode强大之处</a></li>                <li> <a href="html/9.html" target="_self">9.文件操作</a></li>                <li> <a href="html/10.html" target="_self">10.菜单操作</a></li>                <li> <a href="html/11.html" target="_self">11.文档操作</a></li>                <li> <a href="html/12.html" target="_self">12.GUI操作</a></li>                <li> <a href="html/13.html" target="_self">13.网页显示</a></li>                <li> <a href="html/14.html" target="_self">14.位置操作</a></li>                <li> <a href="html/15.html" target="_self">15.语法树</a></li>                <li> <a href="html/16.html" target="_self">16.代码案例收录</a></li>                <li> <a href="html/17.html" target="_self">17.进程通信</a></li>                <li> <a href="html/18.html" target="_self">18.window操作</a></li>                <li> <a href="html/19.html" target="_self">19.终端</a></li>                <li> <a href="html/20.html" target="_self">20.WebView开发</a></li>                <li><a href="html/21.html" target="_self">21.事件</a></li>                <li><a href="html/22.html" target="_self">22.底部状态栏</a></li>                <li><a href="html/23.html" target="_self">23.右则栏</a></li>                <li><a href="html/24.html" target="_self">24.引用其他库</a></li>                     </ul>        </div>        </div>    </body></html>
  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
101
102
103
104