时间戳

首页 > 解决方案 > 我如何在我的网页中得到这个。我想在我的网页中添加菜单栏

html - 我如何在我的网页中得到这个。我想在我的网页中添加菜单栏

问题描述

我想要我网页中图片中所示的菜单栏单击听到以查看所需的输出

这是我到目前为止所做的.png

第一次使用堆栈溢出对不起，如果我没有以正确的方式提出问题

我的代码： HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DesignTemplate</title>
    <link rel="stylesheet" href="StyleSheet.css" />
  </head>
  <body>
    <p class="header">
      Program Name: Computer Engineering Technnology-Computing Science <br />
      Course Name: Web Programming
    </p>
    <p class="menu">Menu</p>
    <p class="content">Content</p>
    <p class="footer">
      040982223 <br />Saiharshal Nadiminti<br />nadi0009@algonquinlive.com
    </p>
  </body>
</html>

**CSS**
* {
  font-family: "Times New Roman";
  font-size: 10px;
  background-color: white;
  text-align: center;
}

h3 {
  color: green;
}

h4 {
  color: red;
}

p {
  padding: 15px;
}

.header {
  border: 3px solid;
  height: 70px;
  text-align: center;
}

.content {
  border: 3px solid;
  height: 400px;
  text-align: center;
}
.footer {
  border: 3px solid;
  height: 50px;
  text-align: center;
}

标签： htmlcss

解决方案

您必须记住，将块级元素嵌套在<p></p>. 但是你可以用它<div></div>来包含你喜欢的任何东西。牢记这一点，代码非常简单。

<div class="header">
   Program Name: Computer Engineering Technnology-Computing Science <br />
   Course Name: Web Programming
   <p class="menu">Menu</p>
</div>

使用 CSS（用于将 .menu 放在右侧）：

.menu {
    border: 3px solid;
    height: 24%;
    text-align: center;
    width: 20%;
    float: right;
}

推荐阅读