使用PuTTY上传到NGINX时，基于Mobirise的HTML站点显示不正确
使用PuTTY上传到NGINX时，基于Mobirise的HTML站点显示不正确
提问于 2020-06-21 00:33:14
几周前，我开始使用NGINX构建一个网站，但想让它看起来更好。所以，我开始使用Mobirise，因为我对HTML没有太多的经验。我创建了一个类似于下图的网站：
但是，当我从notepad中获取HTML代码并使用PuTTY将其上传到NGINX时，站点看起来如下所示：
有人知道为什么会发生这种情况吗？我对HTML缺乏经验，这就是为什么我去Mobirise构建这个网站的原因。下面是我正在使用的HTML代码(不幸的是，我不知道问题可能出在哪里，所以我包含了整个代码块)：
<!DOCTYPE html>
<html >
<head>
<!-- Site made with Mobirise Website Builder v4.12.4, https://mobirise.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v4.12.4, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700,400&subset=cyrillic,latin,greek,vietnamese">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/animatecss/animate.min.css">
<link rel="stylesheet" href="assets/mobirise/css/style.css">
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="mbr-navbar mbr-navbar--freeze mbr-navbar--absolute mbr-navbar--sticky mbr-navbar--auto-collapse mbr-navbar--transparent" id="menu-8" data-rv-view="22">
<div class="mbr-navbar__section mbr-section">
<div class="mbr-section__container container">
<div class="mbr-navbar__container">
<div class="mbr-navbar__column mbr-navbar__column--s mbr-navbar__brand">
<span class="mbr-navbar__brand-link mbr-brand mbr-brand--inline">
<span class="mbr-brand__logo"><a href="https://mobirise.com"><img src="assets/images/logo.png" class="mbr-navbar__brand-img mbr-brand__img" alt="Mobirise"></a></span>
<span class="mbr-brand__name"><a class="mbr-brand__name text-white" href="https://mobirise.com">MOBIRISE</a></span>
</span>
</div>
<div class="mbr-navbar__hamburger mbr-hamburger"><span class="mbr-hamburger__line"></span></div>
<div class="mbr-navbar__column mbr-navbar__menu">
<nav class="mbr-navbar__menu-box mbr-navbar__menu-box--inline-right">
<div class="mbr-navbar__column">
<ul class="mbr-navbar__items mbr-navbar__items--right float-left mbr-buttons mbr-buttons--freeze mbr-buttons--right btn-decorator mbr-buttons--active mbr-buttons--only-links"><li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="https://mobirise.com">HOME</a></li><li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="https://mobirise.com">TOOLS</a></li><li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="https://mobirise.com">FF RANKINGS<br></a></li> <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="https://mobirise.com">POD AFTER TOUCHDOWN<br></a></li></ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</section>
<section class="engine"><a href="https://mobirise.info/l">free website templates</a></section><section class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--full-height mbr-section--bg-adapted mbr-parallax-background" id="header1-6" data-rv-view="18" style="background-image: url(assets/images/mbr-1920x1280.jpg);">
<div class="mbr-box__magnet mbr-box__magnet--sm-padding mbr-box__magnet--center-left mbr-after-navbar">
<div class="mbr-box__container mbr-section__container container">
<div class="mbr-box mbr-box--stretched"><div class="mbr-box__magnet mbr-box__magnet--center-left">
<div class="row"><div class=" col-sm-6 col-sm-offset-6">
<div class="mbr-hero animated fadeInUp">
<h1 class="mbr-hero__text">FF Evaluator</h1>
<p class="mbr-hero__subtext"><strong>Welcome to FF Evaluator, a website created to host a number of fantasy football tools.<br> Click red "+" in the bottom right corner to add a new block. These tools are created to </strong></p>
</div>
<div class="mbr-buttons btn-inverse mbr-buttons--left"><a class="mbr-buttons__btn btn btn-lg btn-danger animated fadeInUp delay" href="https://mobirise.com">DOWNLOAD NOW</a> <a class="mbr-buttons__btn btn btn-lg btn-default animated fadeInUp delay" href="https://mobirise.com">LEARN MORE</a></div>
</div></div>
</div></div>
</div>
<div class="mbr-arrow mbr-arrow--floating text-center">
<div class="mbr-section__container container">
<a class="mbr-arrow__link" href="#features1-5"><i class="glyphicon glyphicon-menu-down"></i></a>
</div>
</div>
</div>
</section>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size" id="features1-5" data-rv-view="15" style="background-color: rgb(255, 255, 255);">
<div class="mbr-section__container container mbr-section__container--std-top-padding" style="padding-top: 93px;">
<div class="mbr-section__row row">
<div class="mbr-section__col col-xs-12 col-md-3 col-sm-6">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img src="assets/images/bootstrap.png" class="mbr-figure__img"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text">BOOTSTRAP 3</h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-article mbr-article--wysiwyg">
<p>Bootstrap 3 has been noted as one of the most reliable and proven frameworks and Mobirise has been equipped to develop websites using this framework.</p>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last" style="padding-bottom: 93px;">
<div class="mbr-buttons mbr-buttons--center"><a href="https://mobirise.com" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default">LEARN MORE</a></div>
</div>
</div>
<div class="mbr-section__col col-xs-12 col-md-3 col-sm-6">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img src="assets/images/responsive.png" class="mbr-figure__img"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text">RESPONSIVE</h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-article mbr-article--wysiwyg">
<p>One of Bootstrap 3's big points is responsiveness and Mobirise makes effective use of this by generating highly responsive website for you.</p>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last" style="padding-bottom: 93px;">
<div class="mbr-buttons mbr-buttons--center"><a href="https://mobirise.com" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default">LEARN MORE</a></div>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="mbr-section__col col-xs-12 col-md-3 col-sm-6">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img src="assets/images/google-fonts.png" class="mbr-figure__img"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text">WEB FONTS</h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-article mbr-article--wysiwyg">
<p>Google has a highly exhaustive list of fonts compiled into its web font platform and Mobirise makes it easy for you to use them on your website easily and freely.</p>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last" style="padding-bottom: 93px;">
<div class="mbr-buttons mbr-buttons--center"><a href="https://mobirise.com" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default">LEARN MORE</a></div>
</div>
</div>
<div class="mbr-section__col col-xs-12 col-md-3 col-sm-6">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img src="assets/images/unlimited-websites.png" class="mbr-figure__img"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text">UNLIMITED WEBSITES</h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-article mbr-article--wysiwyg">
<p>Mobirise gives you the freedom to develop as many websites as you like given the fact that it is a desktop app.</p>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last" style="padding-bottom: 93px;">
<div class="mbr-buttons mbr-buttons--center"><a href="https://mobirise.com" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default">LEARN MORE</a></div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
<script src="assets/jarallax/jarallax.js"></script>
<script src="assets/mobirise/js/script.js"></script>
</body>
</html>提前感谢，任何帮助都将不胜感激！
回答 2
Stack Overflow用户
发布于 2020-06-21 06:29:16
您的站点不是单个index.html文件。它由一大堆文件和文件夹组成，您需要将它们全部上传到您的web服务器。换句话说，您应该将C:\Users\Hoppy\OneDrive\FF Evaluator文件夹的全部内容复制到服务器上的web根目录。如果您无法通过FTP访问您的服务器，您可以使用WinSCP通过SSH/SFTP进行访问。
Stack Overflow用户
发布于 2020-06-21 00:38:15
据我所知，你的网站可能没有获得CSS，这是存储在文件夹中的路径：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700,400&subset=cyrillic,latin,greek,vietnamese">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/animatecss/animate.min.css">
<link rel="stylesheet" href="assets/mobirise/css/style.css">
确保CSS文件存在并且路径正确。这应该可以解决你的问题。仔细检查路径。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62488626
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号