MC官网首页设计：透明导航栏及动态效果
<!DOCTYPE html>
<html>
<head>
<title>MC固点</title>
<style>
body {
background-color: #F5F5F5;
font-family: Arial, sans-serif;
}
<p>.navbar {
background-color: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}</p>
<p>.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}</p>
<p>.navbar li {
float: left;
}</p>
<p>.navbar li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: background-color 0.3s;
}</p>
<p>.navbar li a:hover {
background-color: #333;
color: #FFF;
}</p>
<p>.main-content {
margin-top: 60px;
padding: 20px;
}</p>
<p>.section {
margin-bottom: 40px;
}</p>
<p>.section h2 {
font-size: 24px;
margin-bottom: 10px;
}</p>
<p>.section p {
font-size: 16px;
color: #777;
}
</style></p>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">小面</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">更新</a></li>
<li><a href="#">玩法</a></li>
</ul>
</div>
<div class="main-content">
<div class="section">
<h2>新闻</h2>
<p>这里是最新的MC新闻内容。</p>
</div>
<div class="section">
<h2>更新</h2>
<p>这里是MC的最新更新内容。</p>
</div>
<div class="section">
<h2>玩法</h2>
<p>这里是MC的玩法介绍。</p>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/p5at 著作权归作者所有。请勿转载和采集!