html用標籤來實現一個有趣的文字冒險網頁

阿新 • • 發佈：2018-12-21

原博來自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用標籤來實現一個有趣的文字冒險網頁

原博來自http://ife.baidu.com/note/detail/id/168，效果十分有趣然後在他的基礎上我做了一些實踐效果實現原理十分簡單，主要用的就是<detail>標籤 <details> <summary>概要</sum

用JS來實現一個棧

分別使用線性表和連結串列兩種形式 //使用連結串列實現 function linkedStack(){ var top; var length = 0; function Node(element){ this.element = element;

用兩個棧來實現一個隊列

8K turn 圖片 node 技術空間 sem str import 題目：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。隊列中的元素為int類型限制：時間限制：1秒空間限制：32768K 熱度指數：240468 1 package com.a

算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。隊列中的元素為int類型。《劍指offer》

pack 代碼 exception 隊列 imp scrip 入棧 return tro 算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。隊列中的元素為int類型。《劍指offer》利用棧來進行操作，代碼註釋寫的比較清楚：首先判斷兩個棧是否是空的：

面試題9-用兩個棧來實現一個隊列，完成隊列的Push和Pop操作

ati import str highlight print row pty 用兩個棧 div 題目用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。隊列中的元素為int類型。思路：一個棧壓入元素，而另一個棧作為緩沖，將棧1的元素出棧後壓入棧2中

面試題9-用兩個棧來實現一個佇列，完成佇列的Push和Pop操作

題目用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。思路：一個棧壓入元素，而另一個棧作為緩衝，將棧1的元素出棧後壓入棧2中程式碼 import java.util.Stack;

[劍指offer] --6.用兩個棧來實現一個佇列

題目描述用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。 import java.util.Stack; public class Solution { Stack<Integer> stack1 = new Stack&l

刷題筆記5——用兩個棧來實現一個佇列

題目描述用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。解析棧是後進先出，佇列是先進先出，由於題目給定了兩個棧，所以思路大致是這樣 ① 在入隊push時，直接將元素放到其中一個棧A中 ② 在出隊pop時，將棧A中的元素逐個彈出並放

用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。

劍指offer程式設計題用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。思路：由於佇列是先進先出的，而棧是先進後出的，所以要用2個棧來實現佇列的入隊出隊功能，佇列的入隊功能與棧的一樣，出隊時，先將第一個棧中的元素全部彈出，並倒入到第二個棧中，將第二個棧中棧頂元素彈出，

牛客66題（5）用兩個棧來實現一個佇列

class Solution { public: void push(int node) { stack1.push(node); } int pop()

（劍指offer）用兩個棧來實現一個佇列

時間限制：1秒空間限制：32768K 熱度指數：312041 本題知識點：佇列棧題目描述用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。思路 stack1用來入隊。出隊的話，就把stack1依次出棧壓入stack2中，再把stack

用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。

class Solution { Stack<Integer> stack1 = new Stack<Integer>(); Stack<Integer> stack2 = new Stack<Integer>(

程式設計實現一個棧結構，用陣列來實現，具有入棧、出棧操作。

#include <stdio.h> #include <stdlib.h>typedef struct stack { int point; signed char mem[1024];}STACK;STACK g_statck ={0}; //定

用程式來控制一個網頁，實現自動輸入等操作

附：看到有朋友自己弄的時候出錯了，所以我做了兩個demo，一個excel版，另一個c＃版，有需要的朋友可以到文章最後下載參考一下。另外，文章改了一些疏漏。首先今天要說的東西跟遊戲無關，你是不是有時候會遇到，在某個網頁上重複著幾十次的簡單而又無聊的錄入或點選等工作？比如你的程式

C++:用兩個棧來實現一個佇列，完成佇列的Push和Pop操作

problem用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。佇列中的元素為int型別。analysisclass Solution { public: void push(int node) { stack1.push(node);

CSS float的初步理解：用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化

最近在學習web前端的知識，今天看IFE平臺上的開源題目的時候，遇到了一個問題（小白就是小白）TAT，問題實現很簡單，但由於自己基礎還沒打牢，半天解決不了，問題如標題所述，實現效果如圖：要求：用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽

用兩個棧來實現一個佇列

題目：用兩個棧實現一個佇列。佇列宣告如下，請實現它的兩個函式appendTail和deleteHead，分別完成在佇列尾部插入結點和在佇列頭部刪除結點的功能宣告： template <typename T>class CQueue { public:

用css來實現文字描邊效果

效果如圖： #text { float:left; color:#C60A12; filter:Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow

用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化

HTML程式： <div style="padding: 0 400px 0 300px;" class="box"> <div id="box5">box5</div> <div id="box6">box6

用Jquery來實現點擊事件等的功能

點擊事件 image alt logs ima log ges query images 用Jquery來實現點擊事件等的功能

html用標籤來實現一個有趣的文字冒險網頁

相關推薦