h5学习笔记： ul和li组合

来源：互联网发布：js点击切换显示隐藏编辑：程序博客网时间：2024/06/13 00:46

今天在做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>

0 0