时间戳

首页 > 解决方案 > 无法将内容添加到下一页 css html

html - 无法将内容添加到下一页 css html

问题描述

我试图按下一个按钮并转到下一个 html 页面但是当我将它连接到 css 并且页面完全是空的。你能告诉我如何使页面几乎相同（左侧有相同的按钮角落和徽标和图像）我需要在新页面中添加联系信息，如文本框名字第二名等，但布局与第一个相同。这就是我得到的。

    <!DOCTYPE html>
<html> 
    <head>
        <title >Personal Portfolio</title>
        <link rel="stylesheet" href="../site/style.css">
    </head>
<body>                

<header>
    <div class="main">
        <div class="logo"> 
            <img src="../logo.png">
        </div>
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="cont.html">Contact me</a></li>
            <li><a href="#">Assignments</a></li>
            <li><a href="#">Info</a></li>
        </ul>
    </div>
    <div class="title">
        <h1>Georgi Matinski website</h1>
    </div>
</header>
</body>
</html>

    *{
    margin:0;
    padding:0;
     font-family:Century 'Times New Roman', Times, serif ;
}
header{
    background-image: url(../wa.jpg);
    height:100vh;
    background-size: cover;
    background-position: center;
}
ul{
    float:left;
    list-style-type: none;
    margin-top:10px;
}
ul li{
    display:inline-flex;
}
ul li a{
    text-decoration:none;
    color:black;
    padding:5px 18px;
    border:1px solid transparent;  
    transition:0.8s ease;
}
ul li a:hover{
background-color: white;
color:black;
}
ul li.active a{
    background-color: white;
color:black;
}

.logo img{
    float:right;
    width:150px;
    height:20px;
}
.title{
   font-size: small;
   margin: 0;
   padding: 0;
   text-align: center;
   font-family: "arial";
   position: absolute;
   top: 50%;
   left: 30%;
   transform: translateX(-50%);transform: translateY(-50%);
}
.title h1{
    color: black;
    font-size: 50px;
}

second html page 

    <!DOCTYPE html>
<html> 
    <head>
        <link rel="stylesheet" href="../site/style.css">
    </head>
<body>  
</body>
</html>

标签： htmlcss

解决方案

我想如果您想要与 UL 中相同的按钮（家庭、联系人等），您可以复制粘贴该部分，但如果您只想在用户连接时显示一些信息，则需要从 HTML 切换到PHP 几乎相同，但现在我们可以使用 PHP 表达式。因此，不要将“home.html”命名为“”home.php”，而是将用户名和密码保存在数据库中，并仅在变量 $ 时输出您需要的代码用户是您数据库中的用户，我想使用 PHPMyAdmin（数据库）

我会做类似的事情 -session start 打开我们的本地会话 -require db.php 将是一个 PHP 脚本，用于将您的数据库连接到您可以找到的文件。网上的例子。然后我们检查用户是否已连接，如果没有，我们将其发送到 error.php 您需要将此文件创建为一个简单的 HTML 文件，说明您需要先登录才能看到此内容并将其发送回家。

之后，您创建一个变量（我称为 $content），该变量是您想要的按钮，我们仅在您连接时显示它们。如果您有任何问题给我写信，我会很快做到这一点。

 `<?php
       session_start();
        require 'db.php';

      //Check if a user is logged in using      the  session variable

  if ( $_SESSION['logged_in'] != 1 ) {
        $_SESSION['message'] = "You must log in before viewing your profile page!";
        header("location: ../error.php");    
  }
  else {
        // Makes it easier to read

      $username =     $_SESSION['username'];

      $variable = "anyInformation";

      $content  = "<ul> <li     class="active"><a href="#">Home</a></li> <li><a href="cont.html">Contact me</a></li> <li><a href="#">Assignments</a></li> <li><a href="#">Info</a></li> </ul>";

  }
?>
<!DOCTYPE html>
 <html> 
 <head> 
     <link rel="stylesheet" href="../site/       style.css"> 
 </head> 
 <body> 
   <?php 
             echo $content;
            echo $variable;
    ?>
</body> 
</html>

推荐阅读