用html写一个body包含横向导航栏和竖向导航栏,并使两个导航栏靠近
时间: 2024-05-27 21:11:33 浏览: 11
<!DOCTYPE html>
<html>
<head>
<title>横向和竖向导航栏</title>
<style>
body {
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
nav ul li a:hover {
color: #ccc;
}
.sidebar {
background-color: #333;
color: #fff;
position: fixed;
top: 60px;
left: 0;
bottom: 0;
width: 200px;
padding: 10px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar ul li {
margin-bottom: 10px;
}
.sidebar ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
.sidebar ul li a:hover {
color: #ccc;
}
.content {
margin-top: 60px;
margin-left: 200px;
padding: 10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
</nav>
<div class="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="content">
<h1>欢迎来到我的网站</h1>
<p>这是一个包含横向导航栏和竖向导航栏,并使两个导航栏靠近的网页。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in urna vel velit bibendum varius. Etiam cursus mauris vel malesuada blandit. Donec tincidunt, justo vel eleifend iaculis, purus augue tincidunt erat, id mollis erat libero vel est. Integer eget quam sed velit placerat lacinia. Sed vel imperdiet sapien. Suspendisse potenti. Nulla facilisi. In euismod, leo eget interdum bibendum, nisi ligula malesuada quam, vel mollis leo nulla eget nulla. Praesent eu volutpat magna. Proin euismod viverra pulvinar. Integer non metus sed magna semper commodo. Sed in malesuada neque. Duis sed diam sit amet ex porta hendrerit. Phasellus euismod nisi vel turpis consectetur, at lacinia velit feugiat. Vivamus ultrices ac felis sit amet facilisis. Praesent euismod nulla eget eros malesuada tristique.</p>
</div>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)