任何人都可以解释css在快速申请中不能正确加载的不同实例吗?我知道,例如,使用相对路径css/style.css
而不是绝对路径/css/style.css
会导致css无法在我的网页中正确呈现;但是我想知道是否有其他我不知道的东西也可能导致这样的问题?
这里是html代码:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Property</title>
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abel|Alegreya|Amatic+SC|Architects+Daughter|Barrio|Cabin|Dancing+Script|Dosis|Exo+2|Gloria+Hallelujah|Inconsolata|Josefin+Sans|Karla|Source+Code+Pro|Yanone+Kaffeesatz" rel="stylesheet" type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
<link rel="shortcut icon" href="/../favicon.ico">
<link rel="stylesheet" href="/css/viewProperty.css">
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" type="text/css" href="/css/component.css" />
<!--style -->
<script src="/js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<header class="main-header">
<a href="" class="menu-toggle" id="nav-expander"><i class="fa fa-bars"></i></a>
<!-- Offsite navigation -->
<nav class="menu">
<a href="#" class="close"> <i class="fa fa-close"></i></a>
<h3> <a href="index.html">spacelist</a> </h3>
<h5><a data-scroll data-toggle="modal" data-target="#myModa3" class="btn button two">Add Property</a></h5>
<ul class="nav">
<li class="cl-effect-1"><a data-scroll href="contactus.html">Contact us</a></li>
<li class="cl-effect-1"><a data-scroll data-toggle="modal" data-target="#myModa4">About</a></li>
<li class="cl-effect-1"><a data-scroll href="#portfolio">Safety</a></li>
<li class="cl-effect-1"><a data-scroll href="#terms">Terms</a></li>
<li class="cl-effect-1"><a data-scroll href="#privacy">Privacy</a></li>
</ul>
</nav>
<form class="form-group">
<div class="search">
<input type="text" id="searchBox" class="search__input search-field" placeholder="Search" autocomplete="off"/>
<button class="fa fa-search search__button"></button>
<ul id="searchResults" class="term-list hidden"></ul>
</div>
</form>
<div class="profile">
<img src="images/opeyemi.jpg" alt="photograph of odedeyi opeyemi" class="profile-photo">
<a href="#">Opeyemi Odedeyi</a>
</div>
</header><!--/.main-header-->
<section class="viewww">
<h1>View Your Property</h1>
</section>
<section class="body content">
<div class="container">
<div class="layout" style="background-image: url(images/test.jpg);"></div>
<h6>Joy 4 Fame Hostel</h6>
<div class="price">
<p>GH₵ 1,000 <span>per Month</span></p>
</div>
<div class="lorem">
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
<div class="buttons">
<a class="btn lass edit">Edit</a> <a class="btn lass view">Details</a>
</div>
</div>
</section>
<!-- Footer start -->
<footer class="main-footer">
<!-- <div class="foot">
<span>Icon made by Freepik from www.flaticon.com</span>
</div> -->
<div class="foot2">
<span>© spacelist 2017</span>
</div>
</footer>
<!-- Footer end -->
<!-- Contact section start -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/autoSuggest.js"></script>
<script src="/js/custom-file-input.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/smooth-scroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Load custom js for theme -->
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
也是后端js代码
router.get('/viewProperty/:id', AccessControl.ensureAuthenticated,
function(req, res, next) {
User.findOne({_id: req.params.id})
.populate('properties')
.then(user => {
let model = {
properties: user.properties
};
console.log(user);
res.render('viewProperty', model);
});
});
//was trying test the issue on different routes below
router.get('/test', (req, res, next) => {
res.render('viewProperty');
});