代码编写一个简单的网页示例
时间: 2023-11-21 22:05:16 浏览: 21
这是一个简单的HTML网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单网页示例</title>
</head>
<body>
<h1>这是一个简单的网页</h1>
<p>这是一个段落。</p>
</body>
</html>
```
这是一个简单的HTML页面,包含了一个标题和一个段落。
相关问题
用html编写一个简单的网页
好的,下面是一个简单的 HTML 网页的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页!</h1>
<p>这是一个使用 HTML 编写的简单网页。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<img src="https://picsum.photos/200" alt="一张图片">
</body>
</html>
```
这个网页包含一个标题、一些文本、一个无序列表和一张图片。你可以将这段代码复制到一个文本编辑器中,并将文件保存为 `.html` 格式,然后在浏览器中打开它,就可以看到这个网页了。
编写一个烟花网页代码
以下是一个简单的烟花网页代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花效果</title>
<style>
body {
background-color: #000;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: explode 1s ease-out;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework() {
// 创建一个烟花元素
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = Math.random() * window.innerWidth + 'px';
firework.style.top = Math.random() * window.innerHeight + 'px';
// 将烟花元素添加到页面中
document.body.appendChild(firework);
// 一段时间后移除该烟花元素
setTimeout(function() {
firework.remove();
}, 1000);
}
// 每隔一段时间创建一个烟花
setInterval(createFirework, 1000);
</script>
</body>
</html>
```
这个示例代码中,通过CSS的`animation`属性和`@keyframes`规则实现了烟花爆炸的效果。JS代码中,通过`setInterval`定时器和`setTimeout`函数控制了烟花的创建和删除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)