2015-05-29 43 views
0

所以我試圖做一個網站,但我遇到了一個問題。我的CSS的一部分工作,但很多都沒有。例如我的字體不工作。我將Open Sans鏈接爲Google字體,然後創建了輔助字體Arial,但都不起作用,它只顯示瀏覽器的默認字體。我試圖以不同的方式診斷它,但沒有任何工作。即使我的專業網站開發者朋友也不知道如何幫助我。我的一半CSS什麼都不做?

這裏是我的代碼:

#page { 
 
\t /* background-color: #1C6FB2; */ 
 
\t background-color: #FEFEFE; 
 
} 
 

 
#content { 
 
\t background-color: #FEFEFE; 
 
\t margin: 5%; 
 
\t margin-top: 0%; 
 
\t margin-bottom: 1%; 
 
\t padding: 10%; 
 
\t padding-top: 2.5%; 
 
\t padding-bottom: 2.5%; 
 
} \t 
 

 
#header { 
 
    background-color: #FFFFFF; 
 
    margin-left: 10%; 
 
\t margin-right: 5%; 
 
\t margin-bottom: 0%; 
 
\t margin-top: 2.5%; 
 
\t padding-bottom: 1%; 
 
\t padding-top: 1%; 
 
    padding-left: 5%; 
 

 
h1 { 
 
\t color: #FF0000; 
 
\t font-family: 'Vollkorn', serif; 
 
\t font-weight: 800; 
 
    font-size: 21px; 
 
\t text-align: left; 
 
\t 
 
} 
 

 
p { 
 
\t /*color: #0F0F0F;*/ 
 
    color: #FF0000; 
 
\t font-family: 'Open Sans', 'Arial', sans-serif; 
 
\t font-weight: 300; 
 
\t text-align: left; 
 
\t font-size: 12pt; 
 
} 
 

 
p1 { 
 
\t color: #0F0F0F; 
 
\t font-family: 'Open Sans', 'Arial', sans-serif; 
 
\t font-weight: 600; 
 
\t text-align: left; 
 
\t font-size: 14pt; 
 
} 
 

 
#tabbar { 
 
    display: none; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 
    <head> 
 
     <title>Home</title> 
 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
 
     <link href='http://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'> 
 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
 
     
 
    </head> 
 
    
 
    <body> 
 
     <div id="page"> 
 
       <div id="header"> 
 
        <h1>loremdesign</h1> 
 
       </div> 
 
      
 
      <div id="content">     
 
        <div id="left"> 
 
         <div id="text"> 
 
          <p1>Lorem ipsum dolor sit amet, <br></p1> <p>Consectetur adipiscing elit. Integer eget arcu tortor. Integer vitae lacus et turpis tincidunt pulvinar. Nam aliquam semper faucibus. Vestibulum a molestie justo, id facilisis nisi. Donec ultricies velit vitae nisi tempus efficitur. Nullam lacus massa, tincidunt ultricies dictum ut, luctus ac mi. Maecenas eget arcu mollis, aliquet arcu non, faucibus leo. Morbi tempor in nulla a scelerisque. Donec euismod, nunc a rhoncus tristique, augue quam vulputate neque, sit amet tempor magna lorem sit amet massa. Mauris eleifend feugiat enim sed bibendum. Quisque at leo nunc. Proin accumsan aliquam urna, nec pulvinar magna suscipit non. In vulputate convallis mi, vitae posuere leo placerat nec. Morbi ornare, dui quis tempus elementum, erat libero- pretium mi, posuere sollicitudin risus leo nec metus. Maecenas tempus, lectus nec sollicitudin vehicula, sapien massa lacinia felis, nec ultrices nisl diam vel lorem.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Vivamus ornare nulla ac sem suscipit finibus. Aenean accumsan vulputate turpis, sit amet dapibus ligula tincidunt quis. Ut mauris mi, eleifend nec sollicitudin vitae, maximus sed magna. Curabitur eleifend velit orci, sed eleifend leo dictum in. Nunc suscipit sem eget justo dapibus euismod. Etiam egestas iaculis orci et porttitor. Etiam vehicula, purus sit amet ornare aliquam, diam massa scelerisque neque, in faucibus augue eros quis sapien. Praesent nisi justo, sodales vel efficitur id, aliquam sit amet lacus. Cras lacinia, lacus sed lacinia scelerisque, turpis odio venenatis risus, eget ornare justo magna quis odio. In consectetur ex in venenatis convallis. Aenean at lacus non risus gravida dictum. Sed velit est, ullamcorper eu purus vel, vestibulum pulvinar magna. Donec vitae imperdiet tellus. Nullam dolor magna, blandit ut eros vel, vestibulum tempus lorem.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Ut eget eros sit amet leo rhoncus auctor. Phasellus eu eleifend nisi, vel auctor diam. Nullam quis augue in augue mollis porttitor nec at tellus. In hac habitasse platea dictumst. Mauris vel sem id leo ultrices volutpat. Quisque at nulla commodo, viverra dolor sed, tincidunt leo. Suspendisse eget iaculis massa. Mauris vitae orci eu arcu consectetur ultricies. Nullam sit amet ullamcorper mauris, eget blandit ex. Morbi porttitor eros et leo facilisis sagittis. Maecenas nec ex velit. Quisque ultricies leo finibus mauris dignissim, et dapibus quam accumsan. Nulla et lobortis leo. Sed quis felis ut metus aliquet vulputate. Nam fringilla nulla ac augue ullamcorper, at imperdiet ipsum cursus.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Aenean ut lacus a eros imperdiet egestas sit amet tincidunt velit. Nunc id turpis odio. Pellentesque vitae leo velit. Nulla ut feugiat mi. Aliquam sollicitudin, dolor non eleifend vehicula, tellus magna suscipit nulla, id egestas nisl elit a urna. Sed vitae porta orci. Sed mollis faucibus ex, vitae tristique elit vestibulum eu. Sed condimentum risus et dignissim feugiat. Phasellus imperdiet aliquam sapien, vel accumsan massa sodales non.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Pellentesque sit amet arcu sit amet neque tempor elementum eu nec sem. Nam euismod, eros at fermentum tincidunt, lectus orci tempor diam, dictum iaculis augue erat malesuada ante. In sollicitudin accumsan magna nec viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae cursus diam, a iaculis lorem. Morbi malesuada ex in lacus placerat aliquam. Aliquam nec sollicitudin metus. Etiam ut dolor at sem condimentum rhoncus. Sed ultricies dui vitae condimentum volutpat. Cras sodales felis vitae felis ultrices convallis. Nunc in ligula eu augue mollis ullamcorper id vitae odio. Quisque sit amet elit sed nisi finibus ullamcorper at sed dolor. Phasellus eget imperdiet risus.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Nulla euismod sollicitudin tincidunt. Suspendisse ac risus ac erat semper egestas semper id risus. Aliquam sed augue mauris. Morbi in massa arcu. Integer interdum nibh justo, in posuere tortor vulputate a. Quisque eu lacus suscipit risus semper dignissim. Vivamus molestie metus nec ante pharetra porta. Suspendisse sed orci sed est dignissim dictum sed id est. Nullam et tempor magna. Donec aliquam nibh sit amet suscipit egestas. Aenean vitae mattis eros, nec blandit dui. Pellentesque vulputate, elit a imperdiet accumsan, odio sem dapibus mauris, nec sodales ligula mauris in augue. Aliquam et iaculis mauris. In a nulla a dolor tincidunt semper at eget quam.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Quisque neque nulla, volutpat non finibus sit amet, auctor gravida sapien. Maecenas ornare in arcu eu semper. Nullam at elit lacinia, consequat erat id, malesuada sapien. Suspendisse rhoncus lacus ut libero ullamcorper, non semper orci vulputate. Aenean commodo sagittis mi nec laoreet. Vivamus ultrices auctor sapien vel lobortis. Fusce dolor mauris, ullamcorper eu scelerisque vitae, vulputate et dui. Aliquam dui sapien, aliquet id feugiat eu, condimentum id nisl. Nunc ultrices laoreet mi. Mauris nulla felis, vehicula eget risus nec, consequat tempor magna.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Praesent vel libero vel nunc ullamcorper cursus id vitae ipsum. Nam faucibus, risus sed pretium volutpat, nisl dui placerat urna, in blandit metus sapien et velit. Cras fringilla est ut tincidunt dapibus. Sed dignissim erat ut ex dapibus tempor. Sed consequat sit amet justo nec cursus. Maecenas tempus eget libero non pellentesque. Mauris eleifend pellentesque dictum. Nulla gravida tincidunt facilisis. Sed dapibus erat at metus cursus lobortis. Vivamus sit amet eros orci. Morbi et sem eget risus laoreet auctor vel eu dolor. Sed nec massa risus. Mauris quis lorem aliquet, dignissim lectus at, dapibus metus. Etiam dictum massa magna, at auctor ante mattis vitae. Quisque finibus lorem eu enim dictum mattis.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Maecenas dignissim massa ac pulvinar convallis. Morbi non suscipit lorem. Mauris non aliquam orci. Integer nulla eros, rhoncus quis ante et, iaculis congue massa. In efficitur gravida pellentesque. Vivamus lorem mi, mollis a dignissim et, vehicula id ligula. Cras porttitor porta vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pretium in eros quis tempus. Fusce pharetra varius dignissim. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br /><br /> 
 
          <br /></p> 
 

 
          <p>Cras sed arcu ut lorem consectetur convallis eu id turpis. Integer id dignissim erat. Donec quis vehicula mi. Sed blandit eu risus in aliquet. Vestibulum facilisis eget lacus pulvinar gravida. Sed fringilla aliquet maximus. Mauris volutpat sollicitudin erat, non feugiat enim rhoncus sit amet. Praesent sed nibh fermentum, commodo metus sed, tincidunt felis.</p> 
 
</div> 
 

 
        </div> 
 
        <div id="right"> 
 

 
        </div> 
 
      </div> 
 
     </div> 
 
     <div id="tabbar" class="show-for-small-only"> 
 
      <ul> 
 
       <li><a href="#home">Home</a></li> 
 
       <li><a href="#news">News</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <li><a href="#about">About</a></li> 
 
      </ul> 
 
     </div> 
 
    </body> 
 
    
 
</html>

正如你看到的,我所有的字體設置爲鮮紅色(用於調試)和無襯線,但在Chrome中,他們顯示爲一種黑色的襯線字體,這不是我設計的方式。 但是有些東西可以工作,就像我將#內容的背景顏色設置爲紅色一樣,但是文本根本不起作用。 有人能幫助我嗎? 謝謝, 傑里米

回答

5

#header

#header { 
    background-color: #FFFFFF; 
    margin-left: 10%; 
    margin-right: 5%; 
    margin-bottom: 0%; 
    margin-top: 2.5%; 
    padding-bottom: 1%; 
    padding-top: 1%; 
    padding-left: 5%; 

失蹤}應該

#header { 
    background-color: #FFFFFF; 
    margin-left: 10%; 
    margin-right: 5%; 
    margin-bottom: 0%; 
    margin-top: 2.5%; 
    padding-bottom: 1%; 
    padding-top: 1%; 
    padding-left: 5%; 
} 
+0

太謝謝你了!我無法相信我沒有注意到,我是一個白癡。它現在完美。 – JeremiS

+0

歡迎,你可以接受我的答案。 – Rasel

0

你能不能把這樣的點在樣式前和檢查?就像這樣:

.h1 { 
color: #FF0000; 
font-family: 'Vollkorn', serif; 
font-weight: 800; 
font-size: 21px; 
text-align: left; 
} 
+0

這是班級。問題是,我錯過了我的CSS中的結束花括號...我不能相信這是問題。 – JeremiS

+0

好的...有時候會發生.. :) – sudipta06

0
  1. 頭應該有結束}

  2. 使P1格 - 這樣的:

在HTML變化

<p1>Lorem ipsum dolor sit amet, <br></p1>

<div class="p1"> Lorem ipsum >Lorem ipsum dolor sit amet, <br></div>

在CSS P1應該成爲.P1

+0

你說我需要將第1段更改爲div?任何理由爲什麼? – JeremiS