django 如何在html页面的顶部设置导航栏？

6rvt4ljy 于 2023-03-31 发布在 Go

关注(0)|答案(2)|浏览(236)

我在django项目中开发了一个index.html页面。下面是我开发的模板代码。现在，导航栏在底部

索引.html

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 20px 24px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #337ab7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Book Template</title>
  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
</head>

<body>
  <img class="contact_book" src="{% static 'img/contact_book.jpg' %}" alt="first" />
  <div id="booking" class="section">
    <div>
      <ul id="horizantal-style">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li style="float:right"><a href="#">Login</a></li>
        <li style="float:right"><a class="active" href="#about">Sign up</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

我希望它能在顶部设置导航栏，有人能帮忙吗？

django

来源：https://stackoverflow.com/questions/75879914/how-to-set-the-navigation-bar-in-the-top-of-the-html-page

2条答案

按热度按时间

6jjcrrmo1#

你只需要稍微改变一下HTML标记。把图片标签放在菜单后面。如果你想把图片放在菜单前面，也可以把所有东西都 Package 在一个Flex容器中，并改变项目的顺序，但这会增加开销。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 20px 24px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #337ab7;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Contact Book Template</title>

  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">

</head>

<body>
  <div>
    <ul id="horizontal-style">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li style="float:right"><a href="#">Login</a></li>
      <li style="float:right"><a class="active" href="#about">Sign up</a></li>
    </ul>
  </div>

  <img class="contact_book" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="first" />

  <div id="booking" class="section">
    <!-- Rest of the page content here -->
  </div>

</body>

</html>

赞(0）回复(0）举报 2023-03-31

1bqhqjot2#

我做了两个例子，使用了一些改变的标记，不使用ul和li项，这在布局上提供了一点灵活性，这样我们就可以在标题中使用独立的html块进行样式化，从而使用grid css将它们推向各个方向。
第一个示例显示了提供的小集合，其中有一些难看的边框和填充，以显示什么在哪里。
第二个构建在此基础上，添加了一个常见的导航标题。
原因：查看第二个示例，查看包含内容和页脚的“页眉”。

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  width: 100vw;
}

.nav-container {
  background-color: #dddddd;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: space-between;
  border: solid #00FF00 1px;
  padding: 0.5rem;
}

.nav-group {
  padding: 0.5rem;
  display: grid;
  grid-gap: 0.5rem;
  border: solid 1px #FF00FF;
}

.nav-links {
  grid-template-columns: repeat(3, minmax(5rem, 1fr));
}

.nav-actions {
  grid-template-columns: repeat(2, minmax(5rem, 1fr));
  justify-self: end;
}

.nav-item {
  text-align center;
  border: solid #FFFF00 1px;
}

.nav-item a {
  display: block;
  padding: 1.5em;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  text-align: center;
  color: #000000;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #00000044;
  color: #FFFFFF;
}

.active {
  background-color: #337ab7;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />
  <link rel="preload" as="image" href="https://via.placeholder.com/800x500">
</head>

<body>
  <div class="section">
    <div>
      <div class="nav-container">
        <div class="nav-group nav-links">
          <div class="nav-item linker"><a href="#">Home</a></div>
          <div class="nav-item linker"><a href="#">News</a></div>
          <div class="nav-item linker"><a href="#">Contact</a></div>
        </div>
        <div class="nav-group nav-actions">
          <div class="nav-item login"><a href="#">Login</a></div>
          <div class="nav-item signup"><a class="active" href="#about">Sign up</a></div>
        </div>
      </div>
    </div>
  </div>
</body>

为什么不使用li：这里我添加了一些额外标记：
一个二个一个一个

赞(0）回复(0）举报 2023-03-31

我来回答

django 如何在html页面的顶部设置导航栏？

2条答案

相关问题

热门标签

最新问答