Ich habe viele Foren nach Antworten durchsucht und etwa 50 Google-Links angeschaut, aber noch nichts gefunden, was funktioniert...
Mein CSS wird in meinem HTML nicht angezeigt.
Mein Code hat einwandfrei funktioniert, bis ich einen Flexbox-Container und zwei Flexboxen hinzugefügt habe.
Ich teste meinen Code immer, damit ich weiß, dass Flexbox außerhalb dieser speziellen HTML-Datei funktioniert.
Außerdem ist mir aufgefallen, dass mein CSS bei „Inspect Element“ auf localhost/#my_file# nicht aktualisiert wurde.
Dies ist in der Vergangenheit schon einmal vorgekommen und ich habe es gelöst, indem ich den Speicherort der Datei geändert und ihn erneut auf den alten Speicherort geändert habe. (Ich weiß nicht, wie das funktioniert).
Wie auch immer, wenn ich die CSS-Aktualisierungstabelle kopiere und auf der Seite „Inspect Element“ einfüge, kann ich meine Flexbox einwandfrei sehen.
Ich vermutete also, dass es an einem Fehler in meinem CSS lag, war mir aber nicht ganz sicher, also habe ich es sogar überprüft: https://jigsaw.w3.org/css-validator/#validate_by_input
Es gibt nur einen Fehler, aber ich habe ihn in der gesamten CSS-Datei überprüft und 1) konnte ich ihn nicht finden. 2) Ich habe alles entfernt, was dem Fehler am ähnlichsten war, und es funktioniert immer noch nicht.
Natürlich glaube ich nicht, dass das etwas mit dem Fehler zu tun hat, da es mit der „Inspektion des Elements“ problemlos funktioniert.
Ich weiß auch, dass ich leichtsinnige Fehler mache, dumme Fehler, also... wissen Sie.
Ich lerne gerade, wenn Sie Fehler in meinem Code finden, lassen Sie es mich bitte wissen!
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Darki0ni-s-website</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet" type="text/css">
<link href="styles/portfolio.css" rel="stylesheet" type="text/css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
function validateForm()
{
var name = document.forms["myForm"]["name"];
var email = document.forms["myForm"]["email"];
var message = document.forms["myForm"]["message"];
if (name.value == "")
{
document.getElementById('errorname').innerHTML="Please enter a valid name";
name.focus();
return false;
}else{
document.getElementById('errorname').innerHTML="";
}
if (email.value == "")
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}else{
document.getElementById('erroremail').innerHTML="";
}
if (email.value.indexOf("@", 0) < 0)
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}
if (message.value == "")
{
document.getElementById('errormsg').innerHTML="Please enter a valid message";
message.focus();
return false;
}else{
document.getElementById('errormsg').innerHTML="";
}
return true;
}
</script>
</head>
<body>
<script>
$(document).ready(function () {
$("a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
window.location.hash = hash;
});
}
});
});
</script>
<header class="header">
<article id="accueil"></article>
<div id="header">
<div id="background">
<article style="margin-bottom: 175px;" ><br></article>
<h1>MY NAME</h1>
<h4>___________________</h4>
<h2>Développeuse web débutante</h2>
</div>
</div>
</header>
<ul class="menu">
<li>
<a href="#a-propos">À Propos</a>
</li>
<li>
<a href="#competences">Compétences</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#accueil" class="actif">𑁔</a>
</li>
</ul>
<p id="a-propos"></p>
<h3>À Propos de moi</h3>
<div class="container">
<div class="flexbox-left">
<p>Qui suis-je ?</p>
<p>blablabla </p>
</div>
<div class="flexbox-right">
<p>blablabla <br>
blabla <br>
</p>
</div>
</div>
<p id="competences"></p>
<h3>Compétences</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Lectus magna fringilla urna.</p>
<p id="contact"></p>
<h3>Contact</h3>
<div class="container">
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="post">
<table class="form-style">
<tr>
<td>
<label for ="name">
Your name <span class="required">*</span>
</label>
</td>
<td>
<input type="text" name="name" class="long" id="name"/>
<span class="error" id="errorname"></span>
</td>
</tr>
<tr>
<td>
<label for ="email">
Your email address <span class="required">*</span>
</label>
</td>
<td>
<input type="email" name="email" class="long" id="email"/>
<span class="error" id="erroremail"></span>
</td>
</tr>
<tr>
<td>
<label for ="message">
Message <span class="required">*</span>
</label>
</td>
<td>
<textarea name="message" cols="50" rows="10" id="message"></textarea>
<span class="error" id="errormsg"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</div>
<p>Bonjour et bienvenue sur mon site web dévellopé from scratch, il est encore simple mais il représente mon avancée en terme de dévellopement Front End. </p>
<footer>
</footer>
</body>
</html>
CSS:
html {
margin: 0px 0px;
padding: 0px 0px;
background-color: #cab4cb;
}
body {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width:auto;
height: auto;
margin: 0px 0px;
background-color: #f15015;
padding: none;
border: none;
}
header {
overflow: hidden;
padding: 0px 0px;
height:auto;
background-image:url(../images/6.jpg);
background-position-y: top;
background-position:center;
background-size: cover;
border:none;
width:auto;
margin:0px 0px;
position:static;
}
.background {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
background-blend-mode: darken;
height: 560px;
width: auto;
border: none;
padding: 25px 0px;
margin: 0px 0px;
background-repeat: repeat;
background-size: cover;
}
p {
margin-left: 15%;
margin-right: 15%;
padding-top: 2%;
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
h1 {
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-size: 45px;
font-weight: lighter;
margin: 0px 0px;
padding: 0px 0px;
color: #dadada9a;
text-shadow: 2px 2px 1px #0f0f0f95;
position:relative;
}
h2 {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
font-size: 27px;
font-weight: lighter;
margin: 0px 0px;
padding: 30px 0px;
color: #cdcdcd9a;
text-shadow: 2px 2px 1px #0f0f0f95;
}
h3 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
font-weight:normal;
}
h4 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
font-weight:normal;
color: #cdcdcd9a;
}
img {
height: auto;
object-fit: cover;
display: block;
margin: 0 auto;
}
footer{
padding:25px 0px;
background-color:#cdcdcd9a;
text-align:center;
}
.menu {
display:flex;
background-color: #dddd;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
justify-content: space-around;
}
.menu li {
list-style-type: none;
float: left;
display: inline;
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
float: right;
}
.menu a {
display: block;
padding: 8px;
display: block;
color: rgb(120, 120, 120);
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 1s ;
}
.menu a.actif {
background-color: rgba(120, 120, 120, 0.428);
color: #dddd;
font-size: 16px;
}
.menu a:hover,
.menu a:hover.actif{
background-color: rgb(31, 31, 31);
}
.form-style {
margin:10px auto;
width: 400px;
padding: 20px 12px 10px 20px;
font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style td {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style .required{
color:rgb(255, 0, 128);
}
.form-style input[type=submit], .form-style input[type=reset]{
background: #cdcdcd9a;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
background: #cdcdcd9a;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.form-style .field-textarea{
height: 100px;
}
.form-style input[type=text],
.form-style input[type=email],
textarea{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form-style .long{
width: 100%;
}
.form-style input[type=text]:focus,
.form-style input[type=email]:focus,
.form-style textarea:focus{
-moz-box-shadow: 0 0 8px #cdcdcd9a;
-webkit-box-shadow: 0 0 8px #cdcdcd9a;
box-shadow: 0 0 8px #cdcdcd9a;
border: 1px solid #cdcdcd9a;
}
.error{
color: #D8000C;
background-color: #FFBABA;
}
.container {
display: flex;
flex-direction: row;
margin-left:200px;
margin-right:200px;
margin-top:100px;
margin-bottom :100px;
background-color: rgb(110, 76, 110);
justify-content:center;
}
.flexbox-left {
flex: 100%;
padding: 25px 0;
width:auto;
height:auto;
text-align: center;
border:2px solid rgb(85, 21, 73);
background-color: rgb(254, 199, 255);
}
.flexbox-right {
flex: 100%;
padding: 25px 0;
width:auto;
height:auto;
text-align: center;
border:2px solid rgb(85, 21, 73);
background-color: rgb(254, 199, 255);
}
.a-propos {
padding: 30px;
margin: 0px;
}
.competences {
padding: 30px;
margin: 0px;
}
.contact {
padding: 30px;
margin: 0px;
}
按 Ctrl+Shift+R 或 Ctrl+F5浏览器
以便重新加载您的资源文件（似乎您的浏览器正在缓存）