iT邦幫忙

2024 iThome 鐵人賽

0
自我挑戰組

HTML跨平台網頁設計系列 第 29

D29實作第三部分

  • 分享至 

  • xImage
  •  

網頁網址如下:html實作
實作部份我新增可切換內容標籤元件
程式碼如下:

<div class="container mt-5">
                <ul class="nav nav-tabs">
                <li class="nav-item">
                <a class="nav-link active" href="#law" data-toggle="tab">來自地獄的法官</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#moving" data-toggle="tab">Moving 異能</a>
                </li>
                </ul>
        <div class="tab-content mt-3">
        <div id="law" class="tab-pane fade show active">
            <h4>來自地獄的法官</h4>
            <p>我覺得這部劇就是一個爽劇,在爽的成分中帶點懸疑。雖然我覺得這部劇裡面的愛情有點多餘,但不得不說朴的眼神真的很好看❤️</p>
            <img src="789.jpg" alt="來自地獄的法官" class="cool-img">
            <p>歡迎前往迪士尼觀看<a href="https://www.disneyplus.com/zh-hant/browse/entity-31b0f838-cd6f-423d-ad77-049922c87662" target="_blank">來自地獄的法官</a></p>
        </div>
        <div id="moving" class="tab-pane fade">
            <h4>Moving 異能</h4>
            <p>這部劇就是一個充滿驚險的故事,令人血脈噴張,女主角也很好看!</p>
            <img src="1234.jpg" alt="Moving" style="width: 640px; height: auto;" class="moving-img">
        </div>
    </div>
</div>

照片如下:
https://ithelp.ithome.com.tw/upload/images/20241017/20169466hBnsypcd8R.jpg
https://ithelp.ithome.com.tw/upload/images/20241017/20169466bUQNuDF2EC.jpg


上一篇
D28實作第二部分
下一篇
D30結論心得
系列文
HTML跨平台網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言