2016-07-26 84 views
0

當我想要設計它時,類「cta」沒有做任何事情。我錯過了什麼或者犯了一個錯字嗎?請有人幫助我,因爲它讓我瘋狂。抱歉,這個愚蠢的事情告訴我增添更多信息一些IM只是寫廢話,現在哈哈所以就忘了這部分,但真的appericate一些幫助我的Css類不能與我的html文件一起工作

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF=8"> 
    <meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0, 
    initial-width=1.0" /> 
    <title>Welcome to Drunken Anticz</title> 
    <link rel="stylesheet" type="text/css" href="css/screen_style.css" /> 
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and 
    (max-width:500px)" href="css/scrren_layout_small.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and 
    (max-width:750px)" href="css/scrren_layout_medium.css" /> 
    <!--[if lt IE 9]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif] --> 
</head> 
    <body> 
     <div class="page"> 

      <header> 
       <a class="logo" href="#"></a> 
      </header> 

      <article> 
       <h1>Welcome</h1> 
       <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah 
       blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
       blah blah blahblah blah blah</p> 
      </article> 

      <div class="promo-container"> 
       <div class="promo"> 
        <div class="content"> 
         <h3><a href="#">Events</a></h3> 
         <p>list of eventslist of eventslist of eventslist of eventslist of events 
         list of eventslist of eventslist of eventslist of eventslist of events</p> 
         <p><a class="cta" href="#">More info.</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="promo-container"> 
       <div class="promo"> 
        <div class="content"> 
         <h3><a href="#">Loyalty Cards</a></h3> 
         <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards 
         info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
         <p><a class="cta" href="#">More info.</a></p> 
        </div> 
       </div> 
      </div> 


     <nav> 
      <a href="#">Home</a> 
      <a href="#">Event's</a> 
      <a href="#">Book Us</a> 
      <a href="#">Loyalty Card</a> 
      <a href="#">Contact Us</a> 
     </nav> 

     </div> 
    </body> 

@charset "UTF=8"; 

body { 
color: #575c7a; 
line-height: 1.5em; 
font-family: arial; 
font-size: 14px; 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
} 

.page { 
max-width: 980px; 
margin: 0px auto 0px auto; 
position: relative; 
background-color: #DDDDDF; 
} 

h1 { 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
} 

h2 { 
font-size: 1.7em; margin: 0 0 1em 0; 
} 

h3 { 
font-size: 1.5em; margin: 0 0 1em 0; 
} 

p { 
margin: 0 0 .75em 0; 
} 

a { 
color: #7A7979; 
} 

a:hover { 
color: #009eff; 
} 

footer { 
font-size: .85em; color: #7A7979; background-color: url(../images/background-black-white.jpg; padding: 10px 10px 10px 0px; 
} 

a.cta { 
font-size: 40px; 
} 
+0

我注意到的一件事是你正在使用@charset「UTF = 8」。它應該是字符集「UTF-8」 – MiltoxBeyond

+0

感謝這麼多問題解決:) – supersimion21

回答

1

你的問題結果相當容易解決。在你的a.cta風格之前,你在背景風格中略去了後面的括號,這使得分析器在引用後臺URL之後採用了所有風格。

@charset "UTF-8"; 
 

 
body { 
 
color: #575c7a; 
 
line-height: 1.5em; 
 
font-family: arial; 
 
font-size: 14px; 
 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
 
} 
 

 
.page { 
 
max-width: 980px; 
 
margin: 0px auto 0px auto; 
 
position: relative; 
 
background-color: #DDDDDF; 
 
} 
 

 
h1 { 
 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
 
} 
 

 
h2 { 
 
font-size: 1.7em; margin: 0 0 1em 0; 
 
} 
 

 
h3 { 
 
font-size: 1.5em; margin: 0 0 1em 0; 
 
} 
 

 
p { 
 
margin: 0 0 .75em 0; 
 
} 
 

 
a { 
 
color: #7A7979; 
 
} 
 

 
a:hover { 
 
color: #009eff; 
 
} 
 

 
footer { 
 
font-size: .85em; 
 
color: #7A7979; 
 
background/*-color -- Color doesn't take a url value*/: url(../images/background-black-white.jpg) 
 
/* YOU FORGOT THE CLOSING PARENTHESES */; 
 
padding: 10px 10px 10px 0px; 
 
} 
 

 
a.cta { 
 
font-size: 40px; 
 
}
<div class="page"> 
 
    <header> 
 
    <a class="logo" href="#"></a> 
 
    </header> 
 
    <article> 
 
    <h1>Welcome</h1> 
 
    <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blah</p> 
 
    </article> 
 

 
    <div class="promo-container"> 
 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3><a href="#">Events</a></h3> 
 
     <p>list of eventslist of eventslist of eventslist of eventslist of events list of eventslist of eventslist of eventslist of eventslist of events</p> 
 
     <p><a class="cta" href="#">More info.</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="promo-container"> 
 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3><a href="#">Loyalty Cards</a></h3> 
 
     <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

0

如果我所說的.cta類它的工作原理,你只需要刪除UTF-8參考,並使用正確的關閉標記爲您的身體和HTML標籤:

body { 
 
color: #575c7a; 
 
line-height: 1.5em; 
 
font-family: arial; 
 
font-size: 14px; 
 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
 
} 
 

 
.page { 
 
max-width: 980px; 
 
margin: 0px auto 0px auto; 
 
position: relative; 
 
background-color: #DDDDDF; 
 
} 
 

 
h1 { 
 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
 
} 
 

 
h2 { 
 
font-size: 1.7em; margin: 0 0 1em 0; 
 
} 
 

 
h3 { 
 
font-size: 1.5em; margin: 0 0 1em 0; 
 
} 
 

 
p { 
 
margin: 0 0 .75em 0; 
 
} 
 

 
a { 
 
color: #7A7979; 
 
} 
 

 
.cta { 
 
color: red; 
 
}
<!doctype html> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF=8"> 
 
    <meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0, 
 
    initial-width=1.0" /> 
 
    <title>Welcome to Drunken Anticz</title> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_style.css" /> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and 
 
    (max-width:500px)" href="css/scrren_layout_small.css" /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and 
 
    (max-width:750px)" href="css/scrren_layout_medium.css" /> 
 
    <!--[if lt IE 9]> 
 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif] --> 
 
</head> 
 
    <body> 
 
     <div class="page"> 
 

 
      <header> 
 
       <a class="logo" href="#"></a> 
 
      </header> 
 

 
      <article> 
 
       <h1>Welcome</h1> 
 
       <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah 
 
       blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
 
       blah blah blahblah blah blah</p> 
 
      </article> 
 

 
      <div class="promo-container"> 
 
       <div class="promo"> 
 
        <div class="content"> 
 
         <h3><a href="#">Events</a></h3> 
 
         <p>list of eventslist of eventslist of eventslist of eventslist of events 
 
         list of eventslist of eventslist of eventslist of eventslist of events</p> 
 
         <p><a class="cta" href="#">More info.</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="promo-container"> 
 
       <div class="promo"> 
 
        <div class="content"> 
 
         <h3><a href="#">Loyalty Cards</a></h3> 
 
         <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards 
 
         info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
 
         <p><a class="cta" href="#">More info.</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</body> 
 
</html> 
 

 
     <nav> 
 
      <a href="#">Home</a> 
 
      <a href="#">Event's</a> 
 
      <a href="#">Book Us</a> 
 
      <a href="#">Loyalty Card</a> 
 
      <a href="#">Contact Us</a> 
 
     </nav> 
 

 
     </div> 
 
    </body>

相關問題