錯誤顯示導航欄的CSS代碼問題

我的 CSS 代碼有問題，一旦我添加了產品的 CSS 代碼（從#lap 開始），導航欄顯示不正確，當我洗掉關閉“@keyframe slide”的“}”時，導航欄正確顯示但是 ofc 產品的 CSS 代碼不會呈現因為“@keyframe slide”仍未關閉。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#006CDA;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 18px 14px;
  text-decoration: none;
  transition-duration: 0.5s;
}
li a:hover {
     background-color: #0566C9;
     transform: scale(1.1);
     margin-left: 15px;
}

input{
    width: 700px;
    height: 40px;
    background-color: #F4F3EC    ;
    border: none;
    margin-top: 7px;
    outline: none;
}
select{
    width: 140px;
    height: 40px;
    background-color: #F4F3EC;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    color: #0335AA;
      background-color: #D9D8D4;
      border: none;
      font-size: 14px;
      margin-top: 7px;
      outline: none;
      cursor: pointer;
}
select:hover{
    background-color: #C1C1C1;
}
button{
    width: 60px;
    height: 40px;
    color: #0335AA;
    background-color: #D9D8D4;
    border: none;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    margin-top: 7px;
    outline: none;
    cursor: pointer;
}
button:hover{
    background-color: #C1C1C1;
}
.slider{
    width:1500px;
    height:500px;
    background: url(dvc.jpeg);
    margin:70px auto;
    background-repeat: no-repeat;
    border-radius: 9px;
    animation-name: slide ;
    animation-duration: 20s;
    animation-iteration-count: infinite;    
}

@keyframes slide{
25%{
    background: url(dvc.jpeg);


}
50%{
    background: url(hoap.jpg);

}
75%{
    background: url(outfit.jpg);

}
100%{
    background: url(vdg.jpg);
}
} 
#lap{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top:  -40px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#lap:hover{
    transform: scale(1.08);
    }
#tv{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tv:hover{
    transform: scale(1.08);
    }
#ps{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#ps:hover{
    transform: scale(1.08);
                }
#gp{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gp:hover{
    transform: scale(1.08);
    }
#gm{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gm:hover{
    transform: scale(1.08);
    }
#tn{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -415px;
    margin-bottom: -405px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tn:hover{
    transform: scale(1.08);
    }
#pt{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: -420px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#pt:hover{
    transform: scale(1.08);
    }
#snk{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 25px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#snk:hover{
    transform: scale(1.08);
    }
i{
    font-family:verdana;
    color: #3153BF;
    font-size: 19px;
    margin-left: 15px;
                }
img{
    width: 270px;
    margin-left: 15px;
                }
.prd{
    text-decoration:none;
    font-family:verdana;
    color: #3153BF;
                }
p{
    margin-left: 15px;
                }

<!doctype html>
    <html>
        <head>
            <title>Home</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="home.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
        </head>

        <body style="background-color:#E5E5E2;">
<!--navigation bar-->
    <ul>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/home.html"><i class="fas fa-home" style="font-size:20px;font-">&ensp;home</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/login.html"><i class="fas fa-user" style="font-size:20px;">&ensp;login</i></a></li>
        
        <li>
            &ensp;&ensp;<select>
                <option>all categories</option>
                <option>electronic devices</option>
                <option> video games</option>
                <option>sports equipment</option>
                <option>home appliances</option>
                <option>outfits</option>
            </select>
        </li>

        <li><form>
            <label for name="search"></label>
            <input class="sch" type="search" name="search" placeholder="&ensp;search...">
        </form></li>

        <li><button><i class="fas fa-search" style="font-size:18px;"></i></button></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/shipping.html">&ensp;&ensp;<i class="fas fa-plane" style="font-size:20px;">&ensp;&ensp;shipping</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/cart.html">&ensp;<i class="fas fa-shopping-cart" style="font-size:20px;">&ensp;cart</i></a></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/help.html?file=&submit=Submit">&ensp;&ensp;<i class="fas fa-question-circle" style="font-size:20px;">&ensp;help</i></a></li>
    </ul>
<!--slider show-->

    <div class="slider"></div>

<!--products-->

            <div  id="lap">
                <i class="fas fa-list"> Electronic devices</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product1.html" >
    <img src="lap.jpg" alt="laptop"></img>
    <p style="text-align:left;">HP laptop 15s-fq2xxx<br><br><strong>799&euro;</strong></p>
</a>
</div>
                
            <div id="tv">
                <i class="fas fa-list"> Home applience</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product2.html">
    <img src="tv.jpg" alt="tv" ></img>
    <p>Samsung QE55QN85AATXXU 55" <br><br><strong>1000&euro;</strong></p>
</a>
</div>
            <div id="ps">
                <i class="fas fa-list"> Video games</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product3.html" >
    <img src="ps5.jpg" alt="ps5"></img>
    <p>PlayStation 5 <br><br><strong>499,99&euro;</strong></p>
</a>
</div>
            <div id="gp">
                <i class="fas fa-list"> Electronic devices</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product4.html">
    <img src="gopro.jpg" alt="gopro"></img>
    <p>GoPro Hero 9 <br><br><strong>319&euro;</strong></p>
</a>
</div>

        <div id="gm">
            <i class="fas fa-list"> Video games</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product8.html">
    <img src="game2.jpg" alt="game" style="padding-top: 20px;"></img>
    <p>The last of us 2 <br><br><strong>59,99&euro;</strong></p>
</a>
</div> 
            <div id="tn">
                <i class="fas fa-list"> Sports equipment</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product6.html">
    <img src="tn2.jpg" alt="sporty outfit" style="padding-top: 20px;"></img>
    <p>PSG Kit <br><br><strong>99,99&euro;</strong></p>
</a>
</div>

            <div id="pt">
                <i class="fas fa-list"> Outfits</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product7.html">
    <img src="pants2.png" alt="pants" style="padding-top: 20px;"></img>
    <p>&ensp;&ensp;Fit Trouser Pants <br><br><strong>39&euro;</strong></p>
</a>
</div>
                
                
            <div id="snk">
                <i class="fas fa-list"> Sports equipment</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product5.html">
    <img src="nike.jpg" alt="sneakers"></img>
    <p>Nike Sneakers <br><br><strong>149.99&euro;</strong></p>
</a>
</div>
        </body>
    </html>

uj5u.com熱心網友回復：

我認為您的問題在于：

i{
    font-family:verdana;
    color: #3153BF;
    font-size: 19px;
    margin-left: 15px;
                }

它i為整個檔案設定樣式，而不僅僅是i您想要的樣式。所以相反，我會為所有i你想要的樣式和樣式添加一個類。據我所知.fa-list，符合描述，因此將其更改為：

.fa-list {
        font-family:verdana;
        color: #3153BF;
        font-size: 19px;
        margin-left: 15px;
                    }

似乎只有i你想要樣式的類

這是它的作業原理：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#006CDA;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 18px 14px;
  text-decoration: none;
  transition-duration: 0.5s;
}
li a:hover {
     background-color: #0566C9;
     transform: scale(1.1);
     margin-left: 15px;
}

input{
    width: 700px;
    height: 40px;
    background-color: #F4F3EC    ;
    border: none;
    margin-top: 7px;
    outline: none;
}
select{
    width: 140px;
    height: 40px;
    background-color: #F4F3EC;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    color: #0335AA;
      background-color: #D9D8D4;
      border: none;
      font-size: 14px;
      margin-top: 7px;
      outline: none;
      cursor: pointer;
}
select:hover{
    background-color: #C1C1C1;
}
button{
    width: 60px;
    height: 40px;
    color: #0335AA;
    background-color: #D9D8D4;
    border: none;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    margin-top: 7px;
    outline: none;
    cursor: pointer;
}
button:hover{
    background-color: #C1C1C1;
}
.slider{
    width:1500px;
    height:500px;
    background: url(dvc.jpeg);
    margin:70px auto;
    background-repeat: no-repeat;
    border-radius: 9px;
    animation-name: slide ;
    animation-duration: 20s;
    animation-iteration-count: infinite;    
}

@keyframes slide{
25%{
    background: url(dvc.jpeg);
}
50%{
    background: url(hoap.jpg);

}
75%{
    background: url(outfit.jpg);

}
100%{
    background: url(vdg.jpg);
}
} 
#lap{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top:  -40px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#lap:hover{
    transform: scale(1.08);
    }
#tv{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tv:hover{
    transform: scale(1.08);
    }
#ps{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#ps:hover{
    transform: scale(1.08);
                }
#gp{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gp:hover{
    transform: scale(1.08);
    }
#gm{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gm:hover{
    transform: scale(1.08);
    }
#tn{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -415px;
    margin-bottom: -405px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tn:hover{
    transform: scale(1.08);
    }
#pt{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: -420px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#pt:hover{
    transform: scale(1.08);
    }
#snk{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 25px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#snk:hover{
    transform: scale(1.08);
    }
.fa-list {
        font-family:verdana;
        color: #3153BF;
        font-size: 19px;
        margin-left: 15px;
                    }
img{
    width: 270px;
    margin-left: 15px;
                }
.prd{
    text-decoration:none;
    font-family:verdana;
    color: #3153BF;
                }
p{
    margin-left: 15px;
                }

<html>
        <head>
            <title>Home</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="home.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
        </head>

        <body style="background-color:#E5E5E2;">
<!--navigation bar-->
    <ul>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/home.html"><i class="fas fa-home" style="font-size:20px;font-">&ensp;home</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/login.html"><i class="fas fa-user" style="font-size:20px;">&ensp;login</i></a></li>
        
        <li>
            &ensp;&ensp;<select>
                <option>all categories</option>
                <option>electronic devices</option>
                <option> video games</option>
                <option>sports equipment</option>
                <option>home appliances</option>
                <option>outfits</option>
            </select>
        </li>

        <li><form>
            <label for name="search"></label>
            <input class="sch" type="search" name="search" placeholder="&ensp;search...">
        </form></li>

        <li><button><i class="fas fa-search" style="font-size:18px;"></i></button></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/shipping.html">&ensp;&ensp;<i class="fas fa-plane" style="font-size:20px;">&ensp;&ensp;shipping</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/cart.html">&ensp;<i class="fas fa-shopping-cart" style="font-size:20px;">&ensp;cart</i></a></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/help.html?file=&submit=Submit">&ensp;&ensp;<i class="fas fa-question-circle" style="font-size:20px;">&ensp;help</i></a></li>
    </ul>
<!--slider show-->

    <div class="slider"></div>

<!--products-->

            <div  id="lap">
                <i class="fas fa-list"> Electronic devices</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product1.html" >
    <img src="lap.jpg" alt="laptop"></img>
    <p style="text-align:left;">HP laptop 15s-fq2xxx<br><br><strong>799&euro;</strong></p>
</a>
</div>
                
            <div id="tv">
                <i class="fas fa-list"> Home applience</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product2.html">
    <img src="tv.jpg" alt="tv" ></img>
    <p>Samsung QE55QN85AATXXU 55" <br><br><strong>1000&euro;</strong></p>
</a>
</div>
            <div id="ps">
                <i class="fas fa-list"> Video games</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product3.html" >
    <img src="ps5.jpg" alt="ps5"></img>
    <p>PlayStation 5 <br><br><strong>499,99&euro;</strong></p>
</a>
</div>
            <div id="gp">
                <i class="fas fa-list"> Electronic devices</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product4.html">
    <img src="gopro.jpg" alt="gopro"></img>
    <p>GoPro Hero 9 <br><br><strong>319&euro;</strong></p>
</a>
</div>

        <div id="gm">
            <i class="fas fa-list"> Video games</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product8.html">
    <img src="game2.jpg" alt="game" style="padding-top: 20px;"></img>
    <p>The last of us 2 <br><br><strong>59,99&euro;</strong></p>
</a>
</div> 
            <div id="tn">
                <i class="fas fa-list"> Sports equipment</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product6.html">
    <img src="tn2.jpg" alt="sporty outfit" style="padding-top: 20px;"></img>
    <p>PSG Kit <br><br><strong>99,99&euro;</strong></p>
</a>
</div>

            <div id="pt">
                <i class="fas fa-list"> Outfits</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product7.html">
    <img src="pants2.png" alt="pants" style="padding-top: 20px;"></img>
    <p>&ensp;&ensp;Fit Trouser Pants <br><br><strong>39&euro;</strong></p>
</a>
</div>
                
                
            <div id="snk">
                <i class="fas fa-list"> Sports equipment</i>
<a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product5.html">
    <img src="nike.jpg" alt="sneakers"></img>
    <p>Nike Sneakers <br><br><strong>149.99&euro;</strong></p>
</a>
</div>
        </body>
    </html>

標籤：

上一篇：如何使用CSS進行下拉選單轉換？

下一篇：為什么我的影像左上角有一個灰色框，為什么代碼只調整灰色框的大小而不是影像本身？