写出相应的html和css文件,要求一个大盒子标题靠左,小盒子居中,且有外边框,小盒子里第一个页面左侧是图片1,右侧是标题、第二个页面左侧是图片二,右侧是标题、文字、按钮、按钮,开始显示第一个页面,当点击小盒子下面下一张的按钮时,显示第二个画面,点击上一张时显示第一张页面
时间: 2024-03-12 21:43:15 浏览: 16
好的,以下是相应的HTML和CSS文件,已经按照您的要求完成了:
HTML文件:
```
<!DOCTYPE html>
<html>
<head>
<title>大盒子和小盒子</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="big-box">
<h1>大盒子标题靠左</h1>
</div>
<div class="small-box">
<div class="page1">
<img src="image1.jpg">
<div class="text">
<h2>标题</h2>
</div>
</div>
<div class="page2">
<img src="image2.jpg">
<div class="text">
<h2>标题</h2>
<p>文字文字文字文字文字文字文字</p>
<button>按钮</button>
<button>按钮</button>
</div>
</div>
<div class="buttons">
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS文件:
```
body {
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.big-box {
width: 50%;
float: left;
border: 1px solid black;
padding: 20px;
box-sizing: border-box;
}
.small-box {
width: 50%;
float: right;
border: 1px solid black;
box-sizing: border-box;
}
.small-box .page1 {
display: block;
}
.small-box .page2 {
display: none;
}
.small-box img {
width: 100%;
height: auto;
}
.small-box .text {
width: 50%;
float: right;
padding: 20px;
box-sizing: border-box;
}
.small-box .text h2 {
margin: 0;
padding: 0;
}
.small-box .text p {
margin: 10px 0;
padding: 0;
}
.small-box .text button {
margin-right: 10px;
}
.buttons {
text-align: center;
margin-top: 20px;
}
.buttons button {
margin: 0 10px;
}
.next {
display: inline-block;
}
.prev {
display: none;
}
```
JavaScript文件:
```
const nextButton = document.querySelector('.next');
const prevButton = document.querySelector('.prev');
const page1 = document.querySelector('.page1');
const page2 = document.querySelector('.page2');
nextButton.addEventListener('click', () => {
page1.style.display = 'none';
page2.style.display = 'block';
prevButton.style.display = 'inline-block';
nextButton.style.display = 'none';
});
prevButton.addEventListener('click', () => {
page1.style.display = 'block';
page2.style.display = 'none';
prevButton.style.display = 'none';
nextButton.style.display = 'inline-block';
});
```
注意:为了让您能够直接运行这个例子,上面的代码中的图片名字仅作为示例,您需要将其替换为您自己的图片。