HTML+css+JS詳細例子介紹
以下是一個HTML+CSS+JS的詳細例子介紹：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML+CSS+JS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML+CSS+JS Example</h1>
<p>This is an example of using HTML, CSS, and JS to create a webpage.</p>
<button id="change-color-btn">Change Color</button>
<script src="script.js"></script>
</body>
</html>
這個HTML代碼創建了一個網頁，其中包括一個標題、一個段落、一個按鈕，以及連接到CSS和JS文件的標記。
CSS部分：
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
color: #666;
font-size: 18px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #666;
}
這個CSS代碼創建了網頁的樣式，包括背景顏色、字體、標題和段落的顏色和字體大小，以及按鈕的樣式和懸停時的樣式。
JS部分：
var button = document.getElementById("change-color-btn");
button.addEventListener("click", function() {
var body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = "#333";
});
這個JS代碼創建了一個事件監聽器，當按鈕被點擊時，改變網頁的背景顏色為黑色。
總結：
這個例子展示了如何使用HTML、CSS和JS創建一個簡單的網頁，其中包括基本的HTML標記、CSS樣式和JS事件監聽器。這個例子還可以進一步擴展，添加更多的內容和交互性
原文地址: https://www.cveoy.top/t/topic/fsaA 著作权归作者所有。请勿转载和采集!