透過結合 HTML 元素和 CSS 屬性,可實現互動式網頁的製作。 HTML 元素包括表單、按鈕、鏈接,可用於收集使用者輸入、觸發事件和連結動作。 CSS 屬性如互動狀態、轉換、過渡,可控制懸浮、啟動時的效果,以及平滑度。常見的實戰案例包括懸浮選單、可切換面板和拖放元素,透過這些互動元素可提升使用者體驗並增加網頁的參與度。
HTML 與CSS 互動指南:讓網頁動起來
##簡介
互動式網頁能提升使用者體驗並增加參與度。透過將 HTML 與 CSS 結合,您可以建立動態且引人入勝的網頁。本指南將探討如何使用 HTML 和 CSS 元素來實現互動性,並提供實戰案例。HTML 元素
CSS 屬性
(懸停時觸發) 、
:active(激活時觸發)。
(移動、旋轉、縮放)。
實戰案例
1. 懸浮選單
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>
nav ul li a { color: black; } nav ul li a:hover { color: red; text-decoration: underline; }
2. 可切換面板
<div id="panel" style="display: none;"> <h1>Hello World</h1> </div>
#panel { display: flex; align-items: center; justify-content: center; background-color: yellow; height: 200px; } #show-panel-button { margin: 10px; padding: 5px; border: 1px solid black; background-color: white; cursor: pointer; }
document.getElementById("show-panel-button").addEventListener("click", function() { document.getElementById("panel").style.display = "flex"; });
3. 拖曳元素
<div class="draggable" draggable="true"> <p>Drag me</p> </div> <div class="drop-zone"></div>
.draggable { border: 1px dashed black; padding: 10px; margin: 10px; } .drop-zone { border: 1px dashed blue; padding: 10px; margin: 10px; }
// Drag and drop functionality function dragStart(event) { event.dataTransfer.setData("text/plain", event.target.id); } function dragOver(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(data)); }
以上是HTML 與 CSS 互動指南:讓網頁動起來的詳細內容。更多資訊請關注PHP中文網其他相關文章!