请参考好客山东网(https://www.sdta.cn/)的布局、样式、动态效果、排版风格、色彩风格,写一个华丽、丰富的html页面,要求包含足够多种类的布局、样式、动态效果,并把代码按照js,html,css分别给出
时间: 2023-05-25 16:04:24 浏览: 177
SDTA:一种适合密码处理的处理器结构.pdf
HTML代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>好客山东</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">旅游攻略</a></li>
<li><a href="#">景点介绍</a></li>
<li><a href="#">美食推荐</a></li>
<li><a href="#">特产</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<div class="banner">
<h1>好客山东</h1>
<p>发现最真实的山东</p>
</div>
</header>
<section class="container">
<div class="card">
<img src="https://cdn.pixabay.com/photo/2016/02/05/19/51/mountains-1188555_960_720.jpg" alt="">
<h2>泰山</h2>
<p>泰山,位于山东省泰安市泰山区境内,五岳之首,海拔1,545米,是国家AAAAA级旅游景区,全国文明风景旅游区,全国文物保护单位。</p>
<a href="#">查看详情</a>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2016/02/05/19/51/mountains-1188555_960_720.jpg" alt="">
<h2>崂山</h2>
<p>崂山位于中国山东省青岛市东部,胶东半岛南麓,是中国道教文化发祥地,也是不可多得的自然风景区。</p>
<a href="#">查看详情</a>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2016/02/05/19/51/mountains-1188555_960_720.jpg" alt="">
<h2>蓬莱阁</h2>
<p>蓬莱阁位于山东省烟台市蓬莱市城区,是中国历史文化名城之一,也是中国神话传说中的海上仙山。</p>
<a href="#">查看详情</a>
</div>
</section>
<footer>
<p>版权所有 © 好客山东</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
/* reset.css */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
nav,
ul,
li,
header,
section,
footer {
margin: 0;
padding: 0;
border: 0;
}
/* 公共样式 */
body {
font-family: 'Arial', sans-serif;
background-color: #fff;
color: #222;
}
a {
color: #222;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #9b7dde;
}
.container {
display: flex;
justify-content: space-between;
margin: 50px auto;
max-width: 1200px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.card img {
max-width: 100%;
margin-bottom: 20px;
}
.card h2 {
margin-bottom: 10px;
}
.banner {
width: 100%;
height: 400px;
background-image: url('https://cdn.pixabay.com/photo/2013/11/15/10/05/hong-kong-210943_960_720.jpg');
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.banner h1 {
font-size: 60px;
color: #fff;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
margin-bottom: 20px;
}
.banner p {
font-size: 24px;
color: #fff;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}
nav {
background-color: #9b7dde;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
height: 50px;
line-height: 50px;
}
nav ul li a {
font-size: 20px;
font-weight: bold;
color: #fff;
transition: color 0.3s;
}
nav ul li a:hover {
color: #fff;
}
footer {
text-align: center;
background-color: #222;
color: #fff;
height: 50px;
line-height: 50px;
}
```
JavaScript代码(空白):
```javascript
// 暂无JavaScript代码
```
效果预览:https://codepen.io/pen/?template=JjRWgpy
注意:由于站点中的图片链接可能会失效,所以请自行替换成自己的图片链接。
阅读全文