【发布时间】：2020-05-08 17:10:13
【问题描述】：
好的，我为大学课程设计的星球大战页面有一些 PHP 代码，但我遇到了似乎无法解决的问题。我正在使用模板，并且我有一个基本设计，然后我将使用连接到 MySQL 来实际填充和重复图像等。
到目前为止我遇到的问题。标题：无论我做什么，我都无法将标题修复到位。页脚是固定的，没有问题。上面的字体也可以。
卡片：我使用卡片来显示图像和名称。它们都是固定大小的，我看不到任何改变它的方法。我已经搜索过，我看不到任何改变它的方法。
最后，页面上有一个错误，我一生都看不到它为什么会出现！
"Uncaught Error: Class name must be a valid object or a string in
C:\xampp\htdocs\SWDB\controllers\characterChoose.php:2
Stack trace:
#0 C:\xampp\htdocs\SWDB\index.php(6): require_once()
#1 {main}
thrown inC:\xampp\htdocs\SWDB\controllers\characterChoose.php
on line 2"
代码1：主模板页面（main.tpl）
<html>
<head>
<link href="css/heroic-features.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet'>
</head>
<body>
<header>
<nav class="navbar navbar-light"
<a class="navbar-brand-left">
<img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-left" alt="">
<a class="navbar-brand-centre">
<img src="https://i.ibb.co/xHWc1tj/Jedi-Mind-Reader-Logo-Small.png" class="mx-auto d-block" alt="">
<a class="navbar-brand-right">
<img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-right" alt="">
</a>
</a>
</a>
</nav>
</div>
{block name="body"}
<p>Some Text And Stuff</p>
{/block}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.footer {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
font-family: Orbitron;
}
.footer a {
float: left;
display: block;
color: yellow;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.footer a:hover {
background: red;
color: black;
}
</style>
</head>
<body>
<div class="footer">
<a>© S199289 2020 Copyright</a>
<a href="mailto:S199289@uos.ac.uk?subject=Jedi-Mind-Reader">Contact us here for any questions</a>
<a href="http://www.starwars.com">Star Wars Website</a>
</div>
</body>
</style>
</html>
代码 2：CSS 样式表
/*!
* Start Bootstrap - Heroic Features (https://startbootstrap.com/template-overviews/heroic-features)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-heroic-features/blob/master/LICENSE)
*/
* {box-sizing: border-box;}
body {
margin: 0;
padding:0;
background:url("https://i.ibb.co/zb9LVC1/Stars-background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.css-selector {
font-family: 'Orbitron', sans-serif ! important;
color: yellow ! important;
}
.button {
width: 6em;
border: 2px solid red;
background: yellow;
border-radius: 5px;
}
.header, .footer {
overflow: hidden;
background-color: black;
}
.footer {
color: white;
}
.header {
color: yellow;
}
.header, .footer a {
float: left;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header, .footer a.logo {
font-size: 25px;
font-weight: bold;
}
.header, .footer a:hover {
background-color: black;
color: yellow;
}
.header, .footer a.active {
background-color: black;
color: black;
}
.header-right, .footer-right {
float: right;
}
@media screen and (max-width: 500px) {
.header, .footer a {
float: none;
display: block;
text-align: center;
}
.header-right, .footer-right {
float: none;
}
.background-image{
margin:0;
padding:0;
background:url("https://i.ibb.co/zb9LVC1/Stars-background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
}
代码 3：我要开始工作的页面。
{extends file="layouts/main.tpl"}
{block name="body"}
<div class = "text-center">
<div class = "css-selector"
<h1 class="custom"> Choose Your Character!</h1>
<p class="custom">Scroll through the characters below. Once you have chosen, click on "Use The Force" to start!"
</div>
<div class="card-deck">
<div class="card">
<div class="text-center gallery">
<img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/image_21d0b16d.jpeg?region=0%2C0%2C1280%2C871"
alt="Luke Skywalker">
<div class="card-body">
<div class="card css-selector bg-dark"
<h5 class="card-title">Luke Skywalker</h5>
</div>
</div>
</div>
</div>
<div class="card">
<div class="text-center gallery">
<img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-t1uk0r_874e197a.jpeg?region=0%2C0%2C666%2C900"
alt="Boba Fett">
<div class="card-body">
<div class="card css-selector bg-dark">
<h5 class="card-title">Boba Fett</h5>
</div>
</div>
</div>
</div>
<div class="card">
<div class="text-center gallery">
<img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-yyyjud_fa69f3b7.jpeg?region=0%2C0%2C1280%2C720"
alt="Leia Organa">
<div class="card-body">
<div class="card css-selector bg-dark">
<h5 class="card-title">Leia Organa</h5>
</div>
</div>
</div>
</div>
</div>
{/block}
【问题讨论】：
-
如果您可以创建一个可以在 jsfillde 上运行和预览的工作代码 sn-p，其他人会更容易提供帮助。
-
我尝试过这样做，但它不允许我使用 2 个模板文件和 1 个 CSS 文件。但是，为了它的价值。 jsfiddle.net/Steevi93/p4n8hf3r/1
标签： php css bootstrap-4