用myeclipse 写一个简易画报
时间: 2023-11-23 08:07:44 浏览: 37
好的,下面是一份用 MyEclipse 写的简易画报的代码。
1. 首先创建一个 HTML 文件,命名为 index.html,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>简易画报</title>
<style>
body {
background-color: #fff;
font-family: Arial, sans-serif;
color: #000;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 36px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
.box {
background-color: #eee;
margin: 20px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.1);
}
.box img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.box h2 {
font-size: 24px;
margin-bottom: 10px;
}
.box p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>简易画报</h1>
<div class="container">
<div class="box">
<img src="https://via.placeholder.com/300x200.png?text=Image+1" alt="Image 1">
<h2>标题1</h2>
<p>内容1</p>
</div>
<div class="box">
<img src="https://via.placeholder.com/300x200.png?text=Image+2" alt="Image 2">
<h2>标题2</h2>
<p>内容2</p>
</div>
<div class="box">
<img src="https://via.placeholder.com/300x200.png?text=Image+3" alt="Image 3">
<h2>标题3</h2>
<p>内容3</p>
</div>
<div class="box">
<img src="https://via.placeholder.com/300x200.png?text=Image+4" alt="Image 4">
<h2>标题4</h2>
<p>内容4</p>
</div>
</div>
</body>
</html>
```
2. 在 MyEclipse 中打开 index.html 文件,并通过浏览器预览效果。
3. 可以根据自己的需要修改 HTML 和 CSS 样式,以达到更好的效果。