2017-08-10 42 views
-1

This is a demo image爲h3標籤應用的CSS不正確。請與需求規格說明假

要應用的CSS約束是

該網頁應該有

Constrainnts Table

H3

H3標籤內的文本 - 層疊樣式表

With a marg在用於頂部爲10%時,文本對齊到中心和字體大小XX-大和風格「阿里莫」與#FFFFFF

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Capgemini</title> 
 
\t <style type="text/css"> 
 
\t \t #home{ 
 
\t \t \t border-style: solid; 
 
\t \t \t margin-top: 15px; 
 
\t \t \t margin-bottom: 10px; 
 
\t \t \t margin-left: 15%; 
 
\t \t \t margin-right: 10%; 
 
\t \t \t height: 550px; 
 
\t \t \t width: 900px; 
 
\t \t \t background-color: #D9D9D9; 
 
\t \t } 
 
\t \t header{ 
 
\t \t \t text-align: center; 
 
\t \t \t color: #990000; 
 
\t \t \t font-size: 25px; 
 
\t \t } 
 
\t \t p{ 
 
\t \t \t text-indent:8%; 
 
\t \t \t word-spacing: 40px; 
 
\t \t \t color: #FFFFFF; 
 
\t \t \t background-color: #990000; 
 
\t \t \t margin-left: 90px; 
 
\t \t \t margin-right: 90px; 
 
\t \t } 
 
\t \t #intro{ 
 
\t \t \t border-style: solid; 
 
\t \t \t margin-top: 10px; 
 
\t \t \t margin-bottom: 10px; 
 
\t \t \t margin-right: 15%; 
 
\t \t \t margin-left: 15%; 
 
\t \t \t height: 400px; 
 
\t \t \t width: 600px; 
 
\t \t \t background-color: #525252; 
 
\t \t } 
 
\t \t h2{ 
 
\t \t \t text-align: center; 
 
\t \t \t color: #FFFFFF; 
 
\t \t \t font-size: xx-large; 
 
\t \t } 
 
\t \t h3{ 
 
\t \t \t margin-top: 10%; 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: xx-large; 
 
\t \t \t font-family: "Arimo"; 
 
\t \t \t color: #FFFFFF; 
 
\t \t } 
 
\t \t table,tr{ 
 
\t \t \t color: #FFFFFF; 
 
\t \t \t font-family: "Arimo"; 
 
\t \t \t margin-top: 10px; 
 
\t \t \t margin-left: 10px; 
 
\t \t \t text-align: left; 
 
\t \t } 
 
\t \t footer{ 
 
\t \t \t text-align: center; 
 
\t \t \t color: #990000; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
<section id="home"> 
 
\t <header>Web Programming Learning</header> 
 
\t <p>HOME MATERIALS COMPETITION PASTYEARS ABOUT</p> 
 
\t <section id="intro"> 
 
\t \t <h2>CAPGEMINI</h2> 
 
\t \t <h3>Cascading Style Sheet</h3><br> 
 
\t \t <table> 
 
\t \t \t <tr> 
 
\t \t \t <th>Compreshensive curriculum</th> 
 
\t \t \t <th>Insightful Guest Lectures</th> 
 
\t \t \t <th>interaction with sponsors</th> 
 
\t \t \t <th>$30,000+in Total Prizes</th> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </section> 
 
\t <footer> 
 
\t Copyright &copy; 2017 teknoturf 
 
\t </footer> 
 
</section> 
 
</body> 
 
</html>

上面的代碼的顏色表示評估後出現錯誤:

爲h3標記應用的CSS不正確。檢查需求規格 虛假

雖然一切都與給定約束相匹配,但錯誤是什麼?

+0

?我已經在Chrome中試過了您的確切代碼,並且沒有任何錯誤地打開並完美顯示。 –

+0

你在哪裏得到這個錯誤?它在瀏覽器中顯示? –

+0

似乎這是自動化系統的一部分吧?你給我們的驗證錯誤來自一些腳本,它會根據規範驗證你的代碼?做什麼的?它在尋找優化嗎?因爲如果是這樣,這可能是它錯誤出現的另一個原因。 – Salketer

回答

0

您的規格不清楚。上邊距應該是10%?你的代碼所做的是給出包含塊的寬度的10%的餘量。 Read W3 specifications

它可能是元素高度的10%,正常邊界的10%?很難說。

0

你的h3標籤似乎是正確的,問題在於別處。仔細閱讀說明並再次檢查約束條件。和我一起發生!

-1

試着運行下面寫的代碼。我認爲這應該工作,或者你可以在你使用的瀏覽器訪問capegemini css handson solution

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
#home { 
 
    
 
    border-style: solid; 
 
    margin-top: 15px; 
 
    margin-bottom: 10px; 
 
    margin-left: 15%; 
 
    margin-right: 10%; 
 
    
 
    overflow: hidden; 
 
    
 
    height: 550px; 
 
    width: 900px; 
 
    
 
    
 
    background-color: #D9D9D9; 
 
    } 
 

 
#intro { 
 
    
 
    border-style: solid; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 15%; 
 
    margin-right: 15%; 
 
    
 
    overflow: hidden; 
 
    
 
    height: 400px; 
 
    width: 600px; 
 
    
 
    
 
    background-color: #525252; 
 
    } 
 

 

 

 

 
    header { 
 
    text-align: center; 
 
    font-size: 25px; 
 
    color:#990000; 
 
    } 
 

 

 
    p 
 
    { 
 
     text-indent: 8%; 
 
     word-spacing: 40px; 
 
     color:#FFFFFF; 
 
     background-color:#990000; 
 
     margin-left: 90px; 
 
     margin-right: 90px; 
 
     } 
 

 
     h2 
 
     { 
 
     text-align: center; 
 
     font-size: xx-large; 
 
     color:#FFFFFF; 
 
     } 
 

 
     h3 
 
     { 
 
      text-align: center; 
 
      font-size: xx-large; 
 
      color:#FFFFFF; 
 
      margin-top: 10%; 
 
      font-family: Arimo; 
 
      } 
 

 
     table 
 
     { 
 
     color:#FFFFFF; 
 
     font-family: Arimo; 
 
     margin-top: 10px; 
 
     margin-left: 10px; 
 

 
     } 
 

 
     footer 
 
     { 
 
      text-align: center; 
 
      color:#990000; 
 

 
      } 
 

 

 
     </style> 
 
     </head> 
 
      <body> 
 

 

 
    
 

 
    
 

 
     <section id="home"> 
 
      <header>Web Programming Learning</header> 
 
    
 
      <p>HOME 
 
       MATRIALS 
 
       COMPETITION 
 
       PASTYEARS 
 
       ABOUT 
 

 
       </p> 
 

 
       <section id="intro"> 
 

 
       <h2>CAPGEMINI</h2> 
 
        <h3>Cascading Style Sheet</h3> 
 

 
       <table> 
 
      <tr><td>Comprehensive curriculum</td><td>Insightful Guest 
 
      Lectures</td><td>interaction with sponsors</td><td>$30,000+in Total 
 
      Prizes</td></tr> 
 

 

 

 
      </table> 
 

 
     </section> 
 

 
     <footer>Copyright © 2017 teknoturf</footer> 
 
     </section> 
 

 
</body> 
 
</html>