如何解决网页不会使用 Pug/W3.CSS
我正在构建一个网络应用程序来测试 Node.js、Express.js、Pug 和 W3.CSS。我为我的主页使用了一个模板,它非常简单,有两个按钮和一个水平/垂直居中的 h1。也就是说,这个主页不需要滚动,因为内容是固定的。但是,我正在尝试为从 POST 请求返回多个结果的页面创建 HTML/CSS。最终我将添加分页,但目前,我无法让内容滚动。我的 POST 请求返回五个结果,但只显示最后 3 个。作为参考,这里是 Pug 文件(请记住,我使用 Pug 作为模板/视图引擎和页面上所有组件的 W3.CSS 类):
doctype html
title RecipeTin
Meta(charset='UTF-8')
Meta(name='viewport' content='width=device-width,initial-scale=1')
link(rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css')
link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway')
link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
script(src='/scripts.js')
style.
body,h1,h5 {font-family: "Raleway",sans-serif}
body,html {height: 100%}
.bgimg {
background-image: url('/images/background.png');
min-height: 100%;
background-position: center;
background-size: auto;
}
.w3-card-4 {
background-color: black;
text-align: center;
}
p {
padding: 10px;
}
.bgimg.w3-display-container.w3-text-white
.w3-display-container
.w3-display-middle
each recipe in recipes
.w3-card-4
h1= recipe.recipeName
hr.rounded
p Ingredients...
hr.rounded
p Method...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。