您的位置：首页 > Web前端 > HTML5

h5学习笔记： ul和li组合

2016-06-25 17:40 375 查看
今天在做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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航