个人中心
gpt4 book ai didi

html - 如何将 2 个侧边栏放到一页上？

转载 作者：行者123 更新时间：2023-11-28 05:20:56 25 4
gpt4 key购买 nike

对于我的网站，我想使用 2 个导航栏；一个水平的在最顶部，另一个在第一个下面，这次是垂直的，在我的文本内容的左侧，以便文本环绕它。我将如何实现这一目标？

当我从 w3schools.com 等网站复制和粘贴 CSS 代码时，这两个代码都会被塞满。现在，它要么是一个导航栏，要么是两个看起来很奇怪的导航栏。

第二个侧边栏应该类似于维基百科上的超链接侧边栏。

这是代码。抱歉，如果它太长了。

ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}

li {
text-align: centre;
border-bottom: none;
}

li:last-child {
border-bottom: none;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}    

li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #4682B4;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}
<html>
<head><title>Introduction to Goldfish</title>
<link rel="icon" href="Images/Goldfish.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="Goldfish.ico" type="image/x-icon"/>
</head>

<body bgcolor="#E6E6FA">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Enter</a>
<div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<div>
<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"</center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First         Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font     size="4">Congratulations on your first goldfish! Oh dear, I sound like a     grandmother congratulating her daughter on her first child, don't I? Anyway,     keeping goldfish as pets is a rewarding, calming and educational experience of     people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p></style>
</div>
</div>

</body>

</html>

最佳答案

我认为你需要添加 <ul> <li> </ li> </ ul>在你的下拉列表中:

在你的 html 中:

<div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>

 </div>

在代码段中执行:

ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}

li {
text-align: centre;
border-bottom: none;
}

li:last-child {
border-bottom: none;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}    

li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #4682B4;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li class="dropdown">
   <a href="#" class="dropbtn">Enter</a>
    <div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
    </li>
    </div>
    
<li class="dropdown">
   <a href="#" class="dropbtn">Dropdown</a>
   <div class="dropdown-content">
    <ul>
      <li><a href="#">Link 1</a></li>
     <li> <a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  
    </div>
  </li>
<div>

<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"></center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First         Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font     size="4">Congratulations on your first goldfish! Oh dear, I sound like a     grandmother congratulating her daughter on her first child, don't I? Anyway,     keeping goldfish as pets is a rewarding, calming and educational experience of     people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p>
</div>

希望如你所愿

关于html - 如何将 2 个侧边栏放到一页上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39054110/

25 4 0
文章推荐： javascript - 如何使用 javascript 使用来自 asp.net webservice 的 Json 数据
文章推荐： javascript - mongoose save 不是使用模式的函数
文章推荐： javascript - javascript中归并排序的简单实现
文章推荐： javascript - 使用我自己的标签更改图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com