【发布时间】：2019-08-16 08:54:28
【问题描述】：
我正在尝试创建两个 php 页面：标题和索引。我在 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)
我还想指出，我导入的图像都没有显示
提前谢谢你
【问题讨论】：
-
请告诉我们在浏览器控制台中发现的错误信息
-
404 表示找不到该文件。尝试再次检查您的目录是否存在，如果文件存在尝试使用
` instead of/`识别目录 -
所以从我在这里看到的情况来看，我可以假设问题出在
<link rel="stylesheet" href="../../css/app.css">，根据您显示的内容，您将访问许多目录。只需在这一行中删除一个../并检查它 -
它起作用了，我只是把 css/app.css 放在路径中。但是，我仍然在尝试将图像导入为 css 文件中的背景图像。我创建了目录 ../ressources/velobar-m_3hlP5WcC0-unsplash.jpg 并且浏览器说它已加载但未显示。这是页面外观与页面现在外观的图像：imgur.com/a/3hVVjon