h5学习笔记： ul和li组合

最新推荐文章于 2023-08-04 12:22:36 发布

hero82748274

最新推荐文章于 2023-08-04 12:22:36 发布

阅读量8.2k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/51759346

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

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

hero82748274

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记： ul和li组合

今天在做wing插件时候，尝试看看参考书的百度阅读的目录来做插件目录。因为wing里面导入html的样式会发生一些改变。所以制作的html页面的时候需要在里面做一下手脚。加入!important; 防止覆盖。发现这个组合也挺漂亮的。效果图如下 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti
复制链接

扫一扫

专栏目录