HTML编辑页面内容

我是HTML和CSS的新手，发现了我想使用的侧边栏示例。问题在于内容出现在所有侧栏页面上。

我如何获得其他页面的内容？

我可以看到当我单击它们时，网页会更改为不同的页面。但是内容仍然相同。我认为这是错误的，或者我必须为每个页面创建一个类，但我不知道语法。

    <head>
    <title>OpereX Project</title>
    <style>
    body 
    {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav 
    {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a 
    {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover 
    {
        color: #f1f1f1;
    }
    
    .main 
    {
        margin-left: 160px; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) 
    {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

它不会仅用HTML就可以工作。为了实际替换"主"部分的内容，您必须使用JavaScript。您可以使用普通的JavaScript或使用一个流行的框架，例如Angular或其他任何一个。如果您仅要坚持HTML和CSS来简单，我可以看到两个选项：

1-您为所拥有的每个内容创建一个单独的HTML页面，并且在每个内容上都可以复制与一般布局和Sidenav相关的所有内容，但请放置不同的内容。然后，您将Navbar链接更改为指向其他HTML页面

<a href="services.html">Services</a>

这很简单，但是如果页面增长，可以管理一场噩梦，但是您将处理自己知道的事物，这也许这是学习基础知识的好方法。

2-您可以将所有内容放在单页上，并为不同部分创建命名部分。然后，您将链接保持原样，因为当前它们指向当前页面上的ID（'#idname'语法）。然后，您只需要向每个部分添加ID，以匹配链接。

<div id="clients">
    clients content
</div>

此时的链接只需滚动您的页面滚动到所选部分即可。这再次不是您想要的，但这将仅适用于HTML和CSS。有关第二种方法的示例，请参见此小提琴：https：//jsfiddle.net/gouk0b8t/

您也应该制作其他页面，即大约。

<head>
    <title>OpereX Project</title>
    <style>
    body 
    {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav 
    {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a 
    {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover 
    {
        color: #f1f1f1;
    }
    
    .main 
    {
        margin-left: 160px; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) 
    {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="clients.html">Clients</a>
      <a href="contact.html">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

相关内容

最新更新

热门标签：