html+css+javascript网页制作案例教程源代码
时间: 2023-08-01 08:01:32 浏览: 211
以下是一个简单的HTML CSS JavaScript网页制作案例教程的源代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>网页制作案例教程</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>HTML CSS JavaScript网页制作案例教程</h1>
<div id="wrapper">
<p>这是一个实例教程,将展示如何使用HTML、CSS和JavaScript创建一个简单的网页。</p>
<button id="myButton">点击我</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分(style.css文件):
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
color: #333;
}
#wrapper {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
```
JavaScript部分(script.js文件):
```
document.getElementById("myButton").onclick = function() {
alert("你点击了按钮!");
};
```
这个源代码示例创建了一个简单的网页,其中包含一个标题、一个段落和一个按钮。点击按钮时,会弹出一个简单的弹窗。通过分析和理解这个案例源代码,可以学习如何使用HTML创建网页结构、使用CSS样式化网页和使用JavaScript添加交互功能。
阅读全文