HTML5 css做一个 带左侧导航菜单的代码
时间: 2024-05-02 15:19:54 浏览: 10
好的,我可以回答这个问题。以下是一个简单的 HTML5 和 CSS 实现带左侧导航菜单的代码示例:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>带左侧导航菜单</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<nav>
<ul>
<li><a href="#">菜单项 1</a></li>
<li><a href="#">菜单项 2</a></li>
<li><a href="#">菜单项 3</a></li>
<li><a href="#">菜单项 4</a></li>
<li><a href="#">菜单项 5</a></li>
</ul>
</nav>
<main>
<h1>主要内容区域</h1>
<p>这里是主要内容...</p>
</main>
</div>
</body>
</html>
```
CSS 代码:
```
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
.wrapper {
display: flex;
}
nav {
background-color: #333;
color: #fff;
flex-basis: 20%;
}
nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
}
nav a:hover {
background-color: #555;
}
main {
flex-basis: 80%;
padding: 20px;
}
```
这样就可以实现一个带左侧导航菜单的基本页面了。