Question

php 和即时通讯初学者与php，html和CSS 例如，我想将徽标更改为顶部中心，但它不会更改我使用xampp运行我的php文件，不确定是否使用正确的链接方式将CSS转换为php文件

<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
     <link rel="stylesheet" href="StyleIndex.css">
</head>
<body>


<header class="Logo">
        <a href="index.php">
            <img alt="logo" src="logo3.jpg" />
        </a>
    </header>

    <nav>
      <div>
             <i class="fa fa-bars"></i>
      </div>

           <ul>
                 <li><a href="index.html">Home</a></li>
                 <li><a href="#">Drop 1 <i class="fa fa-sort-desc"></i></a>
                        <ul>
                              <li><a href="#">m 1</a></li>
                              <li><a href="#">m 2</a></li>
                              <li><a href="#">m 3</a></li>
                              <li><a href="#">m 4</a></li>
                        </ul>
                  </li>
                  <li><a href="#">Drop 2 <i class="fa fa-sort-desc"></i></a>
                        <ul>
                              <li><a href="#">m 1</a></li>
                              <li><a href="#">m 2</a></li>
                              <li><a href="#">m 3</a></li>
                              <li><a href="#">m 4</a></li>
                        </ul>
                  </li>
                         <li><a href="About.php">About</a></li>
                         <li><a href="login.php">Logout</a></li>
          </ul>
    </nav>
      <script type="text/javascript">

            $("nav div").click(function() {
            $("ul").slideToggle();
            $("ul ul").css("display", "none");
            });

            $("ul li").click(function() {
              $("ul ul").slideUp();
              $(this).find('ul').slideToggle();
            });

            $(window).resize(function() {
              if($(window).width() > 768) {
            $("ul").removeAttr('style');
            }
            });

        </script>

    <div class="semiProfile">
        <div class="avatar">
            <img src="avatar.png" />
        </div>

        <div class="Username">

            <?php  if (isset($_SESSION['username'])) : ?>
                <p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
            <?php endif ?>

        </div>
    </div>

    <div class="Content">
        <div class="news">
            <p class="status">

            </p>
        </div>

        <div class="Chat">
            <Form class="chatBox">
                <input class="statusBar" type="text" placeholder="Write your status ...!" />
                <button>Send</button>
            </Form>
        </div>
    </div>

    <div class="NewQuestion">
        <div class="avatar1">
            <img src="avatar.png" />
        </div>
        <div class="Username">

            <?php  if (isset($_SESSION['username'])) : ?>
                <p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
            <?php endif ?>

        </div>
        <div class="Question">

            <p class="question">
                This is the area where the new and trending questions are written on the website
            </p>
        </div>
    </div>

    <footer class="footer">
        Copyrights!
    </footer>

</body>
</html>

，我尝试为其设置样式，但对此没有影响这是我的CSS文件StyleIndex.css

* {
    margin: 0px;
    padding: 0px;
}

body {
      margin: 0;
      padding: 0;
      background-color:#161515;
}

.logo img{
    position: absolute;
    left: 100px;

}
.nav{
    position: absolute;
}
.nav .a
{
    padding: 20px;
}

ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background-color: rgb(34, 33, 33);
      position: relative;
}

ul li {
      display: inline-block;
}

ul li a {
      color: aliceblue;
      text-decoration: none;
      padding: 15px;
      display: block;
}

ul li:hover {
      background: lightgrey;

}

ul ul {
      position: absolute;
      min-width: 200px;
      background: lightgrey;
      display: none;
}

ul ul li {
      display: block;
      background: #e3e3e3;
}

ul li:hover ul {
      display: block;
}

ul li i {
      color: aliceblue;
      float: right;
      padding-left: 20px;
}

nav div {
      background-color: rgb(34, 33, 33);
      color: #292929;
      font-size: 24px;
      padding: 0.6em;
      cursor: pointer;
      display: none;
}

@media(max-width: 768px) {
      nav div {
            display: block;
      }

      ul {
            display: none;
            position: static;
            background-color: rgb(34, 33, 33);
      }

      ul li {
            display: block;
      }

      ul ul {
            position: static;
            background-color: rgb(34, 33, 33);
      }
}

.semiProfile
{
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid black;
    background-color: rgb(34, 33, 33);
    position:absolute;
}
.avatar img
{

    max-width: 80px;
    max-height: 80px;
}

.logout
{
    margin: 15px 0 0;
    color:aliceblue;
    font-size: 12px;
}

.username
{
    position: absolute;
    left: 150px;
    top: 60px;
    color:aliceblue;
}

.About
{
    margin: 15px 0 0;
    color: aliceblue;
    font-size: 12px;
}

.Logo img
{
    max-width: 80px;
    max-height: 80px;
}

.footer
{
    position: absolute;
    left: 200px;
    top: 900px;
    color: aliceblue;
}

.Contect
{
    width: 360px;
    padding: 10% 0 0;
    margin: auto;
}


.news
{

    position: relative;
    z-index: 1;
    background: rgb(34, 33, 33);
    max-width: 360px;
    margin: 0 auto 20px;
    padding: 20px;
    text-align: center;
    border: 1px solid black;
}
.status
{
    margin: 15px 0 0;
    color: aliceblue;
    font-size: 15px;
}

.Chat
{
    position: relative;
    z-index: 1;
    background: rgb(34, 33, 33);
    max-width: 360px;
    margin: 0 auto 20px;
    padding: 20px;
    text-align: center;
    border: 1px solid black;
}
.Chat input
{
    font-family: "Roboto", sans-serif;
    outline: solid;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing:border-box;
    font-size: 14px;
}


.Chat button
{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #000000;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}

.Chat button:hover, .Chat button:active
{
    background: #630645;
}


.username1
{
    position: absolute;
    top: 10px;
    left: 110px;
    color: aliceblue;
}

.avatar1 img
{
    max-width: 80px;
    max-height: 80px;
    border-radius: 50%;
    top: 10px;
    left: 20px;
    position:absolute;
}
.NewQuestion
{
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid black;
    background-color: rgb(34, 33, 33);
    position: absolute;
    right: 90px;
    top: 135px;
}

.question
{
    position: absolute;
    top: 50px;
    left: 110px;
    color: aliceblue;
}

Answer 1

我发现了问题，问题出在xampp，我不确定发生了什么，但是我使用了其他程序，现在可以正常工作了检查网络选项卡后，我看到一段时间后，当它出现时，css文件出现了它有一个旧版本，我不确定为什么，但是我用了PhpStorm，然后我将localhost 使用PhpStorm，现在可以正常工作了，谢谢那些试图帮助我的人：）

我在此文件中有index.php，当我尝试使用CSS设置样式时没有html效果

1 个答案: