社区 学习 工具库 休闲
搜索
简体中文
我的 CSS 样式表不再起作用/链接到我的 HTML 文件 - 可能是什么原因？
P粉473363527
P粉473363527 2024-04-03 09:49:45
0
1
502

我已经在很多论坛上搜索了答案，并且查看了大约 50 个 google 链接，但还没有发现任何有效的方法...

我的 CSS 没有显示在我的 HTML 上。

我的代码工作得很好，直到我在其中添加了一个 Flexbox 容器和 2 个 Flexbox。

我总是测试我的代码，这样我就知道 Flexbox 可以在这个特定的 HTML 文件之外工作。

此外，我注意到我的 CSS 未在 localhost/#my_file# 上的“检查元素”上更新。 这种情况过去已经发生过，我通过更改文件位置并将其再次更改为旧位置来解决该问题。 （我不知道rhat是如何工作的）。

无论如何，如果我将 CSS 更新表复制并粘贴到“检查元素”页面上，我就可以很好地查看我的 Flexbox。

所以我怀疑这是因为我的 CSS 中的错误，但我不太确定，所以我什至检查了它：https://jigsaw.w3.org/css-validator/#validate_by_input

只有 1 个错误，但我在整个 CSS 文件中检查了它，1) 我找不到它 2) 我删除了所有看起来最像该错误的内容，但仍然不起作用。

显然，我认为这与错误无关，因为它在“检查元素”方面工作得很好。

我也知道我会犯注意错误，愚蠢的错误，所以......你知道。

我目前正在学习，如果您在我的代码中发现任何错误，请告诉我！

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">&#69716;</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;
}

P粉473363527
P粉473363527

全部回复(1)
P粉457445858
P粉4574458582024-04-04 00:24:30 1 楼

按 Ctrl Shift R 或 Ctrl F5浏览器
以便重新加载您的资源文件（似乎您的浏览器正在缓存）

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板