Saya telah mencari banyak forum untuk jawapan dan melihat kira-kira 50 pautan google tetapi belum menemui apa-apa yang berkesan lagi...
CSS saya tidak muncul pada HTML saya.
Kod saya berfungsi dengan baik sehingga saya menambah bekas Flexbox dan 2 Flexbox di dalamnya.
Saya sentiasa menguji kod saya supaya saya tahu Flexbox berfungsi di luar fail HTML khusus ini.
Selain itu, saya perasan bahawa CSS saya tidak mengemas kini pada "Inspect Element" pada localhost/#my_file#.
Ini telah berlaku pada masa lalu dan saya menyelesaikannya dengan menukar lokasi fail dan menukarnya semula ke lokasi lama. (Saya tidak tahu bagaimana rhat berfungsi).
Apa pun, jika saya menyalin dan menampal jadual kemas kini CSS pada halaman "Inspect Element", saya dapat melihat kotak flex saya dengan baik.
Jadi saya mengesyaki ia adalah kerana pepijat dalam CSS saya, tetapi saya tidak pasti, jadi saya pun menyemaknya: https://jigsaw.w3.org/css-validator/#validate_by_input
Hanya 1 ralat tetapi saya menyemaknya dalam keseluruhan fail CSS dan 1) Saya tidak menemuinya 2) Saya mengalih keluar semua yang kelihatan seperti ralat dan ia masih tidak berfungsi.
Jelas sekali saya tidak fikir ini ada kaitan dengan ralat kerana ia berfungsi dengan baik dengan "memeriksa elemen".
Saya juga tahu saya melakukan kesilapan sambil lewa, kesilapan bodoh, jadi...anda tahu.
Saya sedang belajar, jika anda menemui sebarang pepijat dalam kod saya, sila beritahu saya!
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;
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tekan Ctrl+Shift+R atau Ctrl+F5Pelayar
untuk memuatkan semula fail sumber anda (nampaknya penyemak imbas anda sedang dicache)