使用CSS Flexbox 构建可靠实用的网站 Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 实践</title>
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
background-color: #333;
color: #fff;
}
.header .logo {
flex: 1;
text-align: left;
padding-left: 10px;
}
.header .nav {
flex: 2;
text-align: right;
padding-right: 10px;
}
.header a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">
<a href="/">
<img src="logo.png" alt="Logo" height="30">
</a>
</div>
<nav class="nav">
<a href="/">首页</a>
<a href="/about">关于我们</a>
<a href="/contact">联系我们</a>
</nav>
</header>
</body>
</html>这个代码实例展示了如何使用Flexbox来创建一个包含logo和导航链接的header。使用了flexbox布局，logo部分被赋予了flex: 1，导航链接部分被赋予了flex: 2，以确保在不同的屏幕尺寸下都能保持良好的用户体验。同时，示例中的CSS使用了合理的缩进和注释，使得代码结构清晰，易于阅读和维护。
评论已关闭