首页HTML、CSS和JavaScrip来实现网页动态的代码

HTML、CSS和JavaScrip来实现网页动态的代码

时间: 2024-05-04 21:17:46 浏览: 141

HTML 用于描述网页的结构和内容，CSS 用于描述网页的样式和布局，JavaScript 用于实现网页的动态效果和交互。以下是一个简单的例子，展示如何使用 HTML、CSS 和 JavaScript 来实现一个点击按钮，改变文本内容的功能： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>动态网页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 id="title">欢迎来到我的网站！</h1> <button onclick="changeText()">点击这里</button> <script src="script.js"></script> </body> </html> ``` CSS 代码： ``` h1 { color: red; font-size: 36px; } button { background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; } ``` JavaScript 代码： ``` function changeText() { var title = document.getElementById("title"); title.innerHTML = "你现在在我的网站上！"; } ``` 以上代码实现了以下功能： 1. 在页面中显示了一个标题和一个按钮。 2. 标题的颜色为红色，大小为 36px。 3. 按钮的背景颜色为蓝色，字体颜色为白色，有 10px 的内边距和 5px 的圆角边框。 4. 点击按钮后，标题的文本内容会改变为“你现在在我的网站上！”。

阅读全文