请参考好客山东网的布局、样式、动态效果、排版风格、色彩风格,写一个华丽、丰富的html页面,要求包含足够多种类的布局、样式、动态效果,并给出完整代码
时间: 2023-05-25 15:04:15 浏览: 93
由于没有提供好客山东网的具体网址链接,我将根据搜索结果的截图以及其他山东省的官方网站做为参考,进行示范。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>山东省官方网站示例</title>
<style>
/* 头部样式 */
#header {
background-color: #E13F2A;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#logo {
font-size: 2em;
color: white;
}
#nav {
display: flex;
}
#nav li {
margin-left: 10px;
color: white;
font-size: 1.2em;
list-style: none;
}
/* banner 样式 */
#banner {
background-image: url('https://picsum.photos/id/1025/2000/800');
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#banner h1 {
color: white;
font-size: 4em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
text-align: center;
}
/* 主要内容部分样式 */
#content {
display: flex;
min-height: 500px;
align-items: stretch;
}
#content .left {
flex: 0 0 30%;
background-color: #F5F5F5;
padding: 20px;
}
#content .middle {
flex: 1 0 40%;
background-color: white;
padding: 20px;
}
#content .right {
flex: 0 0 30%;
background-color: #F5F5F5;
padding: 20px;
}
.card {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}
/* 底部样式 */
#footer {
background-color: #262626;
color: #ccc;
text-align: center;
padding: 20px;
}
/* 动画效果 */
.animate {
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
</style>
</head>
<body>
<header id="header">
<div id="logo">山东省</div>
<nav>
<ul id="nav">
<li>首页</li>
<li>新闻</li>
<li>文化</li>
<li>旅游</li>
<li>教育</li>
</ul>
</nav>
</header>
<section id="banner">
<h1 class="animate" style="animation-name: slideInFromLeft;">Welcome to Shandong</h1>
</section>
<section id="content">
<div class="left">
<div class="card">左侧内容</div>
<div class="card">左侧内容</div>
</div>
<div class="middle">
<div class="card">中间内容</div>
<div class="card">中间内容</div>
<div class="card">中间内容</div>
</div>
<div class="right">
<div class="card">右侧内容</div>
<div class="card">右侧内容</div>
</div>
</section>
<footer id="footer">
<p>©2021 山东省版权所有</p>
</footer>
</body>
</html>
阅读全文