• css 书目录相关css+html代码


    css:

     <style type="text/css">
    #list{500px;position:absolute;left:50%;margin-left:-250px;top:10px;}
    ul{500px;list-style:none;padding:0;margin:0;}
    li{position:relative;border-bottom: dotted 2px #999;
    padding: 41px 0 5px 0;}
    .another{position:absolute;right:0;bottom:-0.3em;background:#fff;padding-left:10px;}
    .strong{position:absolute;left:0;bottom:-0.3em;background:#fff;padding-right:10px;}
    /* clearfix */
    .menu li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    </style>

    html:

    <div id="list">
    <ul class="menu">
    <li id="one"><strong class="strong">1</strong></em><strong class="another">两学一做</strong></li>

    <li id="two"><strong class="strong">2</strong></em><strong class="another">何时开始</strong></li>

    <li id="three"><strong class="strong">3</strong></em><strong class="another">面向人群</strong></li>

    <li id="four"><strong class="strong">4</strong></em><strong class="another">具体要求</strong></li>

    <li id="five"><strong class="strong">5</strong></em><strong class="another">如何开展</strong></li>

    <li id="six"><strong class="strong">6</strong></em><strong class="another">四个服从</strong></li>

    <li id="seven"><strong class="strong">7</strong></em><strong class="another">重点学习党规</strong></li>

    <li id="eight"><strong class="strong">8</strong></em><strong class="another">48字</strong></li>
    <li id="nine"><strong class="strong">9</strong></em><strong class="another">四个坚持</strong></li>

    <li id="ten"><strong class="strong">10</strong></em><strong class="another">五个发展理念</strong></li>

    <li id="eleven"><strong class="strong">11</strong></em><strong class="another">三个表率</strong></li>

    <li id="twenle"><strong class="strong">12</strong></em><strong class="another">五个事关</strong></li>

    <li id="thirting"><strong class="strong">13</strong></em><strong class="another">四讲四有</strong></li>

    <li id="forting"><strong class="strong">14</strong></em><strong class="another">“五位一体”总体布局</strong></li>

    <li id="fifting"><strong class="strong">15</strong></em><strong class="another">“四个全面”战略布局</strong></li>

    <li id="sixting"><strong class="strong">16</strong></em><strong class="another">增强党员的“四个意识”</strong></li>

    <li id="seventing"><strong class="strong">17</strong></em><strong class="another">党员领导干部要自觉做到“四有四人”</strong></li>

    <li id="eighting"><strong class="strong">18</strong></em><strong class="another">社会主义核心价值观</strong></li>

    <li id="nineting"><strong class="strong">19</strong></em><strong class="another">三重一大</strong></li>

    <li id="twenty"><strong class="strong">20</strong></em><strong class="another">三会一课</strong></li>

    <li id="twenty-one"><strong class="strong">21</strong></em><strong class="another">党章有多少章多少条</strong></li>

    </div>
    移动端调试适配就比较简单了对于书目录。
  • 相关阅读:
    第8.13节 Python类中内置方法__repr__详解
    Python中splitlines方法判断文本中一行结束除了回车换行符是否还有其他字符?
    Python中使用eval执行下面函数的结果怎么是字符串'10020'?
    第8.12节 Python类中使用__dict__定义实例变量和方法
    ThinkPHP---thinkphp拓展之空操作
    ThinkPHP---TP功能类之邮件
    ThinkPHP---案例--实现知识管理功能
    ThinkPHP---TP功能类之公文管理功能2----------继续完善
    ThinkPHP---TP拓展之获取IP信息
    ThinkPHP---layer插件
  • 原文地址:https://www.cnblogs.com/zhx119/p/5633670.html
Copyright © 2020-2023  润新知