Demo11：content与counter案例

最新推荐文章于 2024-05-28 17:21:14 发布

ljl_web

最新推荐文章于 2024-05-28 17:21:14 发布

阅读量338

点赞数

分类专栏： HTML入门 Demo 文章标签： content counter

本文链接：https://blog.csdn.net/ljl_web/article/details/50757318

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

content与counter案例：实现自动章节生成

效果要求

在起点网诛仙小说截图如下：
这里写图片描述

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
    body{
        background-color:rgb(231,244,254);
        padding-top:20px;
    }
    h1{
        width:600px;
        height:30px;
        line-height:30px;
        color:red;
        margin:10px auto 0px auto;
        border-bottom:1px dotted #111;
        text-align:center;
        padding-bottom:20px;
        margin-bottom:10px;
    }
    #author{
        width:600px;
        height:20px;
        line-height:20px;
        margin:0px auto;
    }
    #author span{
        color:#aaa;
        float:left;
        margin-right:65px;
    }
    #author span b{
        color:#33ff00;
    }
    #author span.new{
        margin-right:0px;
    }
    nav{
        width:600px;
        height:30px;
        line-height:30px;
        margin:0px auto;
        border:1px solid #aaa;
        border-bottom:none;
        margin-top:30px;
        background:#bcd;
    }
    nav div{
        float:left;
        margin-right:20px;
    }
    nav div.right{
        float:right;
    }
    nav div.tubiao b{
        display:inline-block;
        width:5px;
        height:10px;
        background:red;
        margin-left:20px;
        margin-right:10px;
    }
    nav span{
        color:#009900;
    }
    p,ul,li{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    section{
        width:600px;
        height:550px;
        margin:0px auto;
        padding-top:50px;
        border:1px solid #aaa;
        border-top:none;
    }
    section ul{
        margin-left:40px;
        margin-right:40px;
    }
    section ul li{
        width:31%;
        height:25px;
        line-height:25px;
        float:left;
        padding-left:10px;
        padding-bottom:10px;
        padding-top:10px;
        border-bottom:1px dashed #111;
        font-size:0.8em;
        color:#009900;
    }
    section ul li b{
        font-weight:normal;
    }

    /*counter与*/
    body{
        counter-reset:counter1 0;
    }
    li.counter{
        counter-increment:counter1 1;
    }
    li.counter b:before{
        content:"第"counter(counter1)"章";
        margin-right:5px;
    }
  </style>
 </head>

 <body>
    <header>
        <h1>诛仙</h1>
    </header>
    <div id="author">
        <span>诛仙作者：<b>萧鼎</b></span>
        <span>更新时间：<b class="time">2016-01-30&nbsp;16:41</b></span>
        <span class="new"><b>阅读诛仙最新章节</b></span>
    </div>
    <nav>
        <div class="tubiao"><b></b><span>诛仙</span></div>
        <div><b>正文</b></div>
        <div>[<span>分卷阅读</span>]</div>
        <div class="right">本卷共181510字</div> 
    </nav>
    <section>
        <ul>
            <li>序章</li>
            <li class="counter"><b>青云</b></li>
            <li class="counter"><b>迷局</b></li>
            <li class="counter"><b>宏愿</b></li>
            <li class="counter"><b>惊变</b></li>
            <li class="counter"><b>入门</b></li>
            <li class="counter"><b>拜师</b></li>
            <li class="counter"><b>初始</b></li>
            <li class="counter"><b>传艺</b></li>
            <li class="counter"><b>佛与道</b></li>
            <li class="counter"><b>幽谷</b></li>
            <li class="counter"><b>异变</b></li>
            <li class="counter"><b>重逢</b></li>
            <li class="counter"><b>奇才</b></li>
            <li class="counter"><b>神通</b></li>
            <li class="counter"><b>私传</b></li>
            <li class="counter"><b>驱物</b></li>
            <li class="counter"><b>赴会</b></li>
            <li class="counter"><b>相逢</b></li>
            <li class="counter"><b>抽签</b></li>
            <li class="counter"><b>魔踪</b></li>
            <li class="counter"><b>黑夜</b></li>
            <li class="counter"><b>比试</b></li>
            <li class="counter"><b>神剑</b></li>
            <li class="counter"><b>意外</b></li>
            <li class="counter"><b>运气</b></li>
            <li class="counter"><b>自尊</b></li>
            <li class="counter"><b>坚持</b></li>
            <li class="counter"><b>前四</b></li>
            <li class="counter"><b>奇术</b></li>
            <li class="counter"><b>怀疑</b></li>
        </ul>
    </section>
 </body>
</html>

最终效果

这里写图片描述

ljl_web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo11：content与counter案例

content与counter案例：实现自动章节生成效果要求在起点网诛仙小说截图如下：代码实现<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> <style> body{ background-color:rgb(231,244,254);
复制链接

扫一扫

专栏目录