个人中心
gpt4 book ai didi

php - CSS 文件未在 php 索引和 header 中读取

转载 作者：行者123 更新时间：2023-11-27 23:30:20 24 4
gpt4 key购买 nike

我正在尝试创建两个 php 页面:header 和 index。我在 html 中创建了它们并定义了它们的样式。现在我想把它们变成 php 文件。所以我创建了文件并将每个 html 文件的内容复制到其中。并将css文件链接放入每个文件的头部。但是在测试时我没有从我定义的内容中获得任何 css 属性。

我试图复制 css 文件的 while 路径，但它也不起作用。

索引代码如下:

<html>
<head>
    <title>Velo pour tous</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>


<body>
    <?php 
    include 'templates/common/header.php'
    ?>
    <div class="acceuil-block">
        <div class="title">
            <h1>Bienvenue dans le site officiel de l'association des enthousiastes de vélos</h1>
        </div>

        <div class="button">
            <form>
                <label for="">Choisissez une date :  </label>
                <input type="date" id="start_date_interval">
            </form>
        </div>
    </div>
    <div class="sep"></div>
    <div class="sep"></div>
    <div class="acceuil-summary">
    <h1>Découvrez notre association</h1>
    <div class="sep"></div>
    <div class="row">
        <div class="column left">

            <div class="image">
                <img src="stores.png">
            </div>
            <h2>Qui-sommes nous ?</h2>
            <p class="paragraphe_index">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, sem eu mollis malesuada, magna dolor tempus diam, vitae auctor odio magna in felis..</p>

        </div>
        <div class="column middle">

            <div class="image">
                <img src="icon (3).png">
            </div>

            <h2>Ce nous vous proposons</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, sem eu mollis malesuada, magna dolor tempus diam, vitae auctor odio magna in felis.</p>

        </div>
        <div class="column right">

            <div class="image">
                <img src="business-card-of-a-man-with-contact-info.png">
            </div>
            <h2>Contactez-nous</h2>
            <p class="paragraphe_index">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, sem eu mollis malesuada, magna dolor tempus diam, vitae auctor odio magna in felis.</p>

        </div>
    </div>

    <footer>
        <div class="footerNom">Vélos pour tous</div>
    </footer>

</body>
</html>

header.php 文件:

<html lang="">

<head>
    <meta charset="utf-8">
    <title>Velo pour tous</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/app.css">
    <link rel="stylesheet" type="text/css" href="Projet tech web ratt/css/app.css">


<body>
    <header>
        <div class="main">
            <div class="logo">
                <img src="C:\wamp64\www\Projet tech web ratt\ressources\logo.png">
            </div>
            <ul>
                <li class="active"><a href="#">Accueil</a></li>
                <li><a href="file:///C:/Users/ab/Documents/test%20projet/Qui%20sommes%20nous.html">Qui-sommes nous ?</a></li>
                <li><a href="file:///C:/Users/ab/Documents/test%20projet/ce%20que%20nous%20vus%20proposons.html">Ce que nous vous proposons</a></li>
                <li><a href="file:///C:/Users/ab/Documents/test%20projet/login.html">Connexion</a></li>
                <li><a href="file:///C:/Users/ab/Documents/test%20projet/contact.html">Contactez-nous</a></li>
            </ul>
        </div>
    <hr>
    </header>
</body>

</head>
</html>

和 css 文件(我放它只是为了显示选择器并让您了解样式):

*{
    margin : 0;
    padding: 0;
    font-family: Century Gothic;

}

header{
    height:15vh;
    background-size: cover;
    background-position: center;
}

ul{
    float: right;
    list-style-type: none;
    margin-top: 25px;

}

li a{
    display : block;
}
ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    color : #000;
    padding: 5px 20px;
    border: 1px solid transparent;
    transition: 0.6s ease;
}

ul li a:hover{
    background-color: #000;
    color: #fff;
}
.acceuil-block{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(file:///C:/wamp64/www/Projet%20tech%20web%20ratt/ressources/logo.png)
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
}


ul li.active a{
    background-color: #000;
    color: #fff;
}
.logo img{
    float: left;
    width: 80px;
    height: auto;
}

.main{
    max-width: 1200px;
    margin :auto;

}


.title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.title h1{
    color: #fff;
    font-size: 30px;
}

.button{
    position: absolute;
    top: 62%;
    left: 50%;
    border: 1px solid #fff; 
    text-decoration: none;
    padding: 10px 30px;
    color: #fff;
    transform: translate(-50%,-50%);
    margin-top: 10px;
    transition: 0.6s ease;

}

.button:hover{
    background-color: #fff;
    color: #000;
}

.sep{
    margin: 30px;
}

.acceuil-summary h1{
    margin-left: 20px;
    font-size: 50px;
}
/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

.left, .right, .middle {
    text-align: center;
  width: 30%;
}
.left, .right{
    padding-right: 10px;
}
.row{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column h2{
    margin: 20px 0px;

}
.paragraphe_index{
    margin-top: 49px;
}

footer{
    height: 90px;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 65px;
}

/************************Qui Sommes nous************************/
.image_quiSommesNous{
    background-image:url(../videoblocks-group-of-young-happy-cyclists.png);
    height:70vh;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
}

.cadre_quiSommesNous{
    background-color: #fff;
    width: 900px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 60%;
    left: 15%;
    border: 1px solid #000;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.cadre_quiSommesNous h1{
    margin-top: 10px;
    text-align: center;
}
.cadre_quiSommesNous p{
    margin: 20px;
}
.footer_quiSommesNous{
    height: 90px;
    background-color: #000;
    text-align: center;
}
.footerNom_quiSommesNous{
    line-height: 65px;
    color: #fff;
}

/********************ce que nous vous proposons********************/

.sep{
    background-color: black;
}

.inscription{
    border: 1px solid #000; 
    text-decoration: none;
    padding: 10px 30px;
    background-color: #000;
    color: #fff;
    transform: translate(-50%,-50%);
    margin-top: 10px;
    transition: 0.6s ease;
    position: absolute;
}

.inscription:hover{
    cursor: pointer;
    background-color: #fff;
    color: #000;
}

/********************login********************/

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {

  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #000;
  width: 100%;
  border: 1px solid #000;
  padding: 15px;
  color: #fff;
  font-size: 14px;
  -webkit-transition: all 0.6 ease;
  transition: all 0.6s ease;
  cursor: pointer;
}
.form button:hover {
  background: #fff;
  color: #000;
}
.form .message {
  margin: 15px 0 0;
  color: #000;
  font-size: 12px;
}
.form .message a {
  color: #000;

}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}

/*contact*/

form textarea{
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

这也是我元素的层次结构:

C:\wamp64\www\Projet tech web ratt

 -file : css

       app.css

 -file : ressources

       all the images i am using

 -file : templates

       header.php


 and the index.php (that is not in any of those files)

我还想指出，我导入的图片都没有显示

提前致谢

最佳答案

如果我没理解错的话，header.php 应该是一个部分文件，对吧？ CSS 资源应仅在您的索引文件中定义。

根据您的目录结构，这应该可行:

  • 由于头文件位于与索引文件相同级别的目录中，因此您可以简单地引用为templates/common/header.php。
  • 由于 header.php 是将被注入(inject)到主体中的部分文件，因此您不应复制 HTML 标记，例如 <html> , <head> , 和 <body> .

index.php

<html>
<head>
    <title>Velo pour tous</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>

<body>
    <?php include 'templates/common/header.php'; ?>
    ...

header.php

<header>
        <div class="main">
            <div class="logo">
                <!-- You should be able to reference your assets like this -->
                <img src="ressources/logo.png">
            </div>
            <ul>
                <li class="active"><a href="#">Accueil</a></li>
                <!-- I intentially left out your file pointer because I don't know your directory structure for these -->
                <li>...</li>
            </ul>
        </div>
    <hr>
    </header>

编辑

至于您在 CSS 中引用的图像，我假设您的意思是 videoblocks-group-of-young-happy-cyclists.png .这有助于思考这些事情，就像您实际站在当前正在运行的文件中一样。所以，如果你的目录结构是:

css/app.css 
ressources/*

然后在处理CSS文件的时候，需要跳上1个目录，然后进入ressources目录以引用图像。

像这样:

.image_quiSommesNous{
    background-image:url(../ressources/videoblocks-group-of-young-happy-cyclists.png);
    ...
}

关于php - CSS 文件未在 php 索引和 header 中读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57521639/

24 4 0
文章推荐： css - Font Awesome 背景颜色溢出
文章推荐： css - 如何制作箭头相互重叠的CSS？
文章推荐： javascript - 如何仅在一种提交类型上应用表单 onSubmit？
文章推荐： css - 缺少 Bootstrap 下拉子菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com