时间戳

首页 > 解决方案 > 导航栏没有进入哈巴狗

html - 导航栏没有进入哈巴狗

问题描述

我是一个初学者，并试图将我的导航栏永久放置在基本布局中。我正在使用 youtube，但是当我学习后端时，根据我的课程，无论网站中链接页面的更改如何，导航栏都应该显示为永久性的，但它不起作用。它看起来像这样。

基本布局文件

doctype html
html
  head
    title DevilisHere
    block scripts
    block style

  Body
    block content
            nav#navbar
                    div#container
                        img(src = "../static/bg.png")
                            ul
                                li #[a(href = "/") Home]
                                li #[a(href = "/") Devil] 
                                li #[a(href = "/") Devils Address]
                                li #[a(href = "/") Contact Devil]
                    div#logotag
                        h6  DevilIsHere
           
    block foot
        footer.foot
            h3.headline Copyright © 2020 DevilisHere | All Rights Reserved

主页文件//

extends layout.pug

block scripts
    script(src="../static/index.js")

block style
       style
        include ../static/navbar.css
        include ../static/section1.css 
        include ../static/section2.css
        include ../static/section3.css 
        include ../static/footer.css

block content   
        section#firstSection
            div.heading1 
                p.headline Welcome to Devils Mansion
            div.tag2 
                p Come Prepared To Die

        section#secondSection
            p.headline.head2 Opt For a Remembrable Death.
            div.heading2 
                div.card
                    h3.headline.cardhead Specialised in Peaceful Death 
                    img(src= "../static/sec21.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Have killed Billions
                    img(src= "../static/sec22.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Experienced in Breaking Bones
                    img(src= "../static/sec23.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Extra Caution with Body Art
                    img(src= "../static/sec24.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                

        section#thirdSection
            h3.headline.logohead You can Submit Your Death Requests Here.
            div.logosection
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")

在上面的代码中，在浏览器中加载文件时，即使导航栏位于基本布局中，导航栏也不会显示。

标签： htmlcsspugbackend

解决方案

请参阅有关模板继承的文档。

nav#navbar是默认内容。

...
Body
    block content
            nav#navbar
...

但它已经结束了section#firstSection

...
block content   
        section#firstSection
...

重组并放置nav#navbar为 的同级block content：

doctype html
html
head
    title DevilisHere
    block scripts
    block style

Body
    
    nav#navbar
        div#container
            img(src = "../static/bg.png")
                ul
                    li #[a(href = "/") Home]
                    li #[a(href = "/") Devil] 
                    li #[a(href = "/") Devils Address]
                    li #[a(href = "/") Contact Devil]
        div#logotag
            h6  DevilIsHere

    block content
        
    block foot
        footer.foot
            h3.headline Copyright © 2020 DevilisHere | All Rights Reserved

推荐阅读