用HTML CSS js写一个内容丰富的网页代码
时间: 2024-01-03 17:05:48 浏览: 79
好的,下面是一个内容丰富的网页代码,包含了多个部分,包括标题、导航栏、轮播图、文章列表、表格、表单、音频和视频等内容。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容丰富的网页</title>
<style>
/* CSS样式代码 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
overflow: hidden;
padding: 10px;
text-align: center;
}
nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #999;
}
main {
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1, h2, h3 {
margin: 0;
padding: 10px;
color: #333;
text-align: center;
}
p {
margin: 10px;
padding: 10px;
line-height: 1.5;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
form {
margin: 20px 0;
padding: 20px;
background-color: #f2f2f2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
display: block;
margin: 10px 0;
font-weight: bold;
}
input[type="text"], textarea {
display: block;
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #666;
}
audio, video {
display: block;
margin: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>内容丰富的网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">文章列表</a>
<a href="#">表单</a>
<a href="#">音视频</a>
</nav>
<main>
<h2>轮播图</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://via.placeholder.com/800x300" alt="轮播图1">
<div class="text">轮播图1</div>
</div>
<div class="mySlides fade">
<img src="https://via.placeholder.com/800x300" alt="轮播图2">
<div class="text">轮播图2</div>
</div>
<div class="mySlides fade">
<img src="https://via.placeholder.com/800x300" alt="轮播图3">
<div class="text">轮播图3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<h2>文章列表</h2>
<ul>
<li>
<h3>文章标题1</h3>
<p>文章内容1</p>
<p><a href="#">阅读全文</a></p>
</li>
<li>
<h3>文章标题2</h3>
<p>文章内容2</p>
<p><a href="#">阅读全文</a></p>
</li>
<li>
<h3>文章标题3</h3>
<p>文章内容3</p>
<p><a href="#">阅读全文</a></p>
</li>
</ul>
<h2>表格</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
<h2>表单</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" placeholder="请输入您的邮箱">
<label for="message">留言:</label>
<textarea id="message" name="message" placeholder="请输入您的留言"></textarea>
<input type="submit" value="提交">
</form>
<h2>音视频</h2>
<audio src="https://www.w3schools.com/html/horse.ogg" controls></audio>
<video width="100%" height="auto" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</main>
<script>
// JavaScript代码
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>
```
这是一个比较完整的网页,包含了多个部分,可以根据需要进行增加、修改和删除。其中包括了轮播图、文章列表、表格、表单、音频和视频等内容。您可以将代码保存为 `.html` 文件,然后在浏览器中打开查看效果。
阅读全文