gpt4 book ai didi

html - 如何将下拉菜单添加到标题导航栏?

转载 作者:行者123 更新时间:2023-11-27 23:04:28 25 4
gpt4 key购买 nike

我是 html 编码的新手。我目前正在尝试将下拉菜单添加到我的标题中。我试过从导航栏复制和粘贴下拉菜单,但没有用。如果有任何帮助,我将不胜感激!

我试过只用下拉菜单和 Logo 做一个导航栏,这很有效,但我正在将它添加到 cloudbeds,他们特别需要一个标题。

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial- scale=1">
<style>
* {box-sizing: border-box;}

body {
margin: 0;
font-family: Arial, sans-serif;
}

.header {
overflow: hidden;
background-color: #474747;
padding: 0px 20px;
font-family: Oswald, sans-serif;
}

.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 16px;
line-height: 2px;
border-radius: 4px;
font-weight: bold;
}

.header a.logo {
font-size: 20px;
font-weight: bold;
}

.header a.active {
background-color: #8dc0b0;
color: #ffff;
}

.header-right {
float: right;
padding: 30px 15px;
}

@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}

.header-right {
float: none;
text-align: center;
}
}
</style>
</head>
<body>

<div class="header">
<a href="https://www.thejunglelodge.com">
<img alt="Qries" src="https://static.wixstatic.com/media/34d39e_3c8cc1e385214a6c9cca31b9ae919d3c~mv2_d_2940_2103_s_2.png/v1/fill/w_150,h_108,al_c,q_80,usm_0.66_1.00_0.01/La%20Loma%20White%20Logo.webp"
width=85" height="60">
</a>
<div class="header-right">
<a href="https://www.thejunglelodge.com/stay">STAY</a>
<a href="https://www.thejunglelodge.com/reservations">PLAN
YOUR VISIT</a>
<a href="https://www.thejunglelodge.com/chocolate">FARM & CHOCOLATE</a>
<a href="https://www.thejunglelodge.com/community">COMMUNITY</a>
<a href="https://www.thejunglelodge.com/la-loma-2020">ABOUT</a>
<a href="https://www.thejunglelodge.com/reservations">BOOK NOW</a>
</div>
</div>

</body>
</html>

我正在尝试重新创建一个带有 Logo 和下拉菜单的标题,如下所示: https://www.thejunglelodge.com/目前我还没有实现下拉菜单。

最佳答案

在 bootstrap 中你可以使用这段代码:

<body>
<div class="wrapper">

<header class="main-header">
<a href="#" class="logo">
<span class="logo-lg"><b>Mjz</b> CO</span>
</a>
<!-- Logo -->

<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle</span>
</a>
<!-- Navbar left Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a style="cursor: pointer;margin-right: 30px" onclick="..." class="navbar-brand">
<table>
<tbody>
<tr>
<td style="font-size: 19px; padding-right: 5px; padding-left: 5px"><i class="fa fa-globe"> Domains:
Multiple </i></td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>
</div>
</header>

随意改变参数

关于html - 如何将下拉菜单添加到标题导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58805948/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com