做一个嘻哈风的网站静态页面代码
时间: 2024-03-17 16:46:50 浏览: 14
好的,以下是一个简单的嘻哈风格的网站静态页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hip Hop Website</title>
<style>
/* 页面全局样式 */
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* 页眉样式 */
header {
background-color: #FFD700;
padding: 10px;
text-align: center;
}
header h1 {
font-size: 48px;
margin: 0;
padding: 0;
text-shadow: 2px 2px #000000;
}
/* 导航栏样式 */
nav {
background-color: #000000;
display: flex;
justify-content: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: white;
display: block;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
background-color: #FFD700;
color: black;
transition: all 0.2s ease-in-out;
}
/* 主要内容样式 */
main {
margin: 50px 0;
text-align: center;
}
main h2 {
font-size: 36px;
margin: 0;
padding: 0;
text-shadow: 2px 2px #000000;
}
main p {
font-size: 24px;
margin: 20px;
text-shadow: 1px 1px #000000;
}
/* 页脚样式 */
footer {
background-color: #FFD700;
padding: 10px;
text-align: center;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>Hip Hop Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Welcome to our Hip Hop Website</h2>
<p>Discover the latest music, fashion and art in the Hip Hop scene.</p>
</main>
<footer>
<p>© 2021 Hip Hop Website. All rights reserved.</p>
</footer>
</body>
</html>
```
这是一个简单的嘻哈风格的网站静态页面代码示例,你可以根据需要进行修改和添加。