在线上传时，导航栏未显示

时间：2017-08-18 15:26:41

标签： html css

亲切的先生有没有人知道为什么我的导航栏在我上传到免费的网络主机（x10hosting和000webhost）时没有显示，但是当我在localhost中运行它时它完全正常工作。

这是我在localhost中运行的时候 enter image description here

这就是我在线运行时会发生什么 enter image description here

这是html代码

<?php
    error_reporting(E_ALL & ~E_NOTICE);
    error_reporting(E_ERROR | E_PARSE);
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<nav class="clearfix">
        <ul class="clearfix">
            <li><a href="index.php"><img src="img\home.png" style="margin-bottom:-2px; margin-right:3px; width:16px; height:16px;">Home</a></li>
            <li><a href="speakers.php"><img src="img\speakers.png" style="margin-bottom:-1px; margin-right:4px; width:15px; height:13px;">Speakers</a></li>
            <li><a href="about.php"><img src="img\about.png" style="margin-bottom:-1px; margin-right:3px; width:13px; height:12px;">About</a></li>
            <li><a href="contact.php"><img src="img\contact.png" style="margin-bottom:-2px; margin-right:6px; width:13px; height:14px;">Contact</a></li>
            <li><a href="reservation.php"><img src="img\reservation.png" style="margin-bottom:-2px; margin-right:5px; width:14px; height:13px;">Reservation</a></li>
            <li><a href="signOut.php" id="signOut"><img src="img\signOut.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:14px;">Sign Out</a></li>
            <li><a href="myAccount.php" id="user" style="text-transform:capitalize;"><img src="img\user.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:12px;"><?php echo $_SESSION['firstname']; ?></a></li>
            <li><a href="signUp.php" id="signUp"><img src="img\signUp.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:11px;">Sign Up</a></li>
            <li><a href="signIn.php" id="signIn"><img src="img\signIn.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:13px;">Sign In</a></li>
            <li><a href="adminControl.php" id="adminControl"><img src="img\admin.png" style="margin-bottom:-3px; margin-right:6px; width:15px; height:16px;">Admin control</a></li>
        </ul>
        <a href="#" id="pull">Speaker Reservation</a>
</nav>

<div class="slideshow-container">

<div class="mySlides fade">
    <img id="img1" src="img/homepage-image1.jpg">
    <div class="text"></div>
</div>

<div class="mySlides fade">
    <img id="img2" src="img/homepage-image2.jpg">
    <div class="text"></div>
</div>

<div class="mySlides fade">
    <img id="img3" src="img/homepage-image3.jpg">
    <div class="text"></div>
</div>

<div id="dots">
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div>

</div>

<div id="index-welcome"><p>Welcome to Online Speaker Reservation. We are an organization established in 2005 by Rey Vibal, which engages the skills of performing artists directors and writers for the purpose of tuition in the performing arts, theatrical and film production, corporate training, wellness and sharing methodologies.</p></div>

<div id="footer" >Copyright 2017</div>

<script>
$(function() 
    {
        var pull = $('#pull');
        menu = $('nav ul');
        menuHeight  = menu.height();
        $(pull).on('click', function(e) 
        {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function()
        {
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) 
            {
                menu.removeAttr('style');
            }
        });
    });
</script>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 4000);
}
</script>

<script>
function ifAdmin() 
{ 
       document.getElementById("signIn").style.display = "none";
       document.getElementById("signUp").style.display = "none";
       document.getElementById("signOut").style.display = "block";
       document.getElementById("adminControl").style.display = "block";
}
</script>

<script>
function ifNotAdmin() 
{ 
   document.getElementById("signIn").style.display = "none";
   document.getElementById("signUp").style.display = "none";
   document.getElementById("signOut").style.display = "block";
   document.getElementById("adminControl").style.display = "none";
}
</script>

<script>
function ifNotLogin() 
{ 
   document.getElementById("user").style.display = "none";
   document.getElementById("signOut").style.display = "none";
   document.getElementById("adminControl").style.display = "none";
}
</script>

<?php

    if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true) 
        //if login
        {
            if($_SESSION['type'] == 1)
            {
                echo "<script type='text/javascript'>ifAdmin();</script>";  
            }
            elseif($_SESSION['type'] == 0)
            {
                echo "<script type='text/javascript'>ifNotAdmin();</script>";
            }
        }
        //if not login
        else
        {
            echo "<script type='text/javascript'>ifNotLogin();</script>";   
        }
?>

</body>
</html>

这是css代码

/*navigation bar*/

    nav 
    {
        height: 60px;
        width: 100%;
        background: #342E2D;
        font-size: 10pt;
        font-family: 'PT Sans', Arial, sans-serif;
        font-weight: bold;
        position: relative;

    }
    nav ul 
    {
        padding: 0;
        margin: auto;
        width: 100%;
        height: 60px;
    }
    nav li 
    {
        display: inline;
    }
    nav a 
    {
        color: #fff;
        display: inline-block;
        width: 100px;
        text-align: center;
        text-decoration: none;
        line-height: 60px;
        text-shadow: 1px 1px 0px #283744;
    }
    nav li a 
    {

        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    nav li:last-child a 
    {
        border-right: 0;
    }
    nav a:hover, nav a:active 
    {
        background-color: #1E1D1C;
    }
    nav a#pull 
    {
        display: none;
    }

    /* Clearfix */

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

    #signIn, #signUp, #signOut, #adminControl, #user
    {
        float:right;
    }

    #adminControl
    {
        width:130px;
    }

2 个答案:

答案 0 :(得分：1)

似乎CSS样式根本没有加载。根据HTML文件中的样式表链接检查webhost上CSS文件的位置。

答案 1 :(得分：1)

你的代码看起来很好我确保清除缓存你可以通过

来实现

<强>选项1：

尝试以隐身（Chrome）模式打开浏览器。

CTRL + P

私人（IE）

CTRL + N

<强>选项2

只需清除浏览器缓存即可。

我使用webhost00

几次出现缓存问题
相关问题
最新问题