0
私のウェブサイトでは、2つのナビゲーションバーを使用したいと思います。一番上の水平のもの、最初のものの下のもの、今度は垂直のもの、テキストコンテンツの左端のテキストのようなものです。どうすればこれを達成できますか？2つのサイドバーを1ページにする方法は？
w3schools.comなどのウェブサイトからCSSコードをコピーして貼り付けると、両方のコードが詰まるでしょう。今は1つのナビゲーションバーまたは2つの非常に奇妙なものです。
第2のサイドバーは、ウィキペディアのハイパーリンクと似ています。
ここにコードがあります。それが長すぎる場合は申し訳ありません。
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>