1. 程式人生 > >h5學習筆記 ul和li組合

h5學習筆記 ul和li組合

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/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
           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述