h5學習筆記 ul和li組合
阿新 • • 發佈:2018-12-04
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!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