html用标签来实现一个有趣的文字冒险网页

原博来自http://ife.baidu.com/note/detail/id/168，效果十分有趣
然后在他的基础上我做了一些实践效果
实现原理十分简单，主要用的就是<detail>标签

<details>
  <summary>概要</summary>
  <p>内容内容内容内容内容内容内容</p>
</details>

在Chrome下运行就可以出现一个可展开的折叠标签
接着就是实现一个可选择分支的文字表现，需要有选择枝，并且要有提示选择的文本，最后在选择之后，新出现的选择和文本，要能够覆盖原有的选择和文本框。
然后有了这个

<div style="height: 100px;">
  <details style="
    height: 100px;
    background: #f9f;
  ">
    <summary style="
      float: left;
      width: 100%;
      height: 40px;
      background: #9f9;
    ">概要</summary>

    <div style="
      float: left;
      width: 100%;
      height: 100px;
      margin-top: -40px;
      background: #99f;
    ">展开后内容</div>
  </details>

  <div style="margin-top: -60px;">展开前内容区文本</div>
</div>

这里使用margin-top：-40px用来将内容拉上去
并且定位使用float来防止文字重叠
overflow：hidden来防止内容被挤下去
下面是一个文字冒险的实践内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字冒险</title>
    <style>
        .box {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .box details {
            margin-top: -200px;
            height: 200px;
            background: #f9f;
        }
        .box details:first-child {
            margin-top: 0;
        }
        .box summary {
            float: left;
            width: 50%;
            height: 40px;
            background: #9f9;
            line-height: 40px;
            cursor: pointer;
        }
        .box details > div {
            float: left;
            width: 100%;
            height: 200px;
            margin-top: -40px;
            background: #99f;
        }
        .box details + div {
            margin-top: -160px;
            padding: 0.5em;
        }
        .box p {
            margin: 0 auto 0.5em;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<div class="box">
    <details>
        <summary>再睡一会，睡个回笼觉</summary>
        <div>
            <details>
                <summary>不理她，继续睡觉</summary>
                <div>
                    <p>日复一日，每次六花喊你的时候你都没有搭理她，后来你们慢慢就疏远了</p>
                    <p>你孤独终老了</p>
                </div>
            </details>
            <details>
                <summary>起床，然后和六花一起去上学</summary>
                <div>
                    <p>六花问起了班上转校生新条茜的事，她很善良，打算帮新同学融入班级</p>

                </div>
            </details>
            <div>可是你才躺下你就听到你的青梅竹马六花在楼下喊你上学，你想了想</div>
        </div>
    </details>
    <details>
        <summary>起床去学校</summary>
        <div>
            <details>
                <summary>上去搭话</summary>
                <div>
                    <p>好吧我编不下去了，结局你自己想吧</p>
                </div>
            </details>
            <details>
                <summary>默默跟在新条茜的后面</summary>
                <div>
                    <p>日复一日，你每天都跟新条茜的后面上学，却从来没有勇气上去和她搭话</p>
                    <p>你孤独终老了</p>>
                </div>
            </details>
            <div>
                <p>路上你看到班上的转校生新条茜</p>
                <p>茜的学习很好，长的也很可爱，不过刚来学校还没么朋友，此时正一个人走在你的前面</p>
            </div>
        </div>
    </details>
    <div>
        <p>清晨，阳光透光窗帘照入卧室，你揉了揉眼睛，伸了个懒腰，你决定：</p>
    </div>
</div>
</body>
</html>

html用标签来实现一个有趣的文字冒险网页

猜你喜欢