create a html page with disney style for news website home page
时间: 2023-11-22 16:55:03 浏览: 37
Sure, here's a basic example of a Disney-style news website homepage:
```html
<!DOCTYPE html>
<html>
<head>
<title>Disney News</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
body {
background-color: #f7e5df;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #3f51b5;
color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
h1 {
margin: 0;
}
nav {
flex: 1;
margin-left: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
transition: color 0.2s ease-in-out;
}
nav a:hover {
color: #ffd700;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
article {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
flex-basis: calc(33.33% - 20px);
margin-bottom: 20px;
overflow: hidden;
position: relative;
transition: box-shadow 0.2s ease-in-out;
}
article:hover {
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
article img {
width: 100%;
height: 200px;
object-fit: cover;
}
article h2 {
background-color: #ffd700;
color: #000;
font-size: 1.1rem;
margin: 0;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
article p {
padding: 10px;
margin: 0;
}
footer {
background-color: #3f51b5;
color: #fff;
display: flex;
justify-content: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Disney News</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">TV Shows</a></li>
<li><a href="#">Theme Parks</a></li>
<li><a href="#">Merchandise</a></li>
</ul>
</nav>
</header>
<main>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>Disney's Newest Movie</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>Behind the Scenes of Frozen 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>New Disney+ Original Series</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>Disney's Latest Theme Park Expansion</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>New Disney Princess Merchandise</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
<article>
<img src="https://via.placeholder.com/400x200" alt="Article Image">
<h2>Upcoming Live-Action Disney Remakes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo sapien. In et rhoncus justo. Curabitur pretium urna vel nisl lobortis, eu ullamcorper metus fringilla.</p>
</article>
</main>
<footer>
<p>© Disney News 2021</p>
</footer>
</body>
</html>
```
This is just a starting point, and you can customize the design and content to fit your specific needs.
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)