2013-02-28 66 views
-1

您好我的CSS剛剛停止工作從192線或「主題部分」一切以上的作品,但之後的任何東西都不工作了有人請看看我的代碼,看看是否你可以預先看到任何錯誤!CSS無法工作後192行

body { 
border-top : 1em solid #333; 
font : 300 62.5% "Open Sans"; 
line-height : 1.5; 
} 
.heading-large { 
font-size : 2em; 
} 
.heading-medium { 
text-transform : uppercase; 
font-size : 1.8em; 
} 
.title-medium { 
font-size : 1.6em; 
} 
p { 
font-size : 1.4em; 
} 
footer p { 
color : #959595; 
} 
a { 
color : inherit; 
text-decoration : none; 
} 
a:hover .title-medium { 
color : #D73300; 
transition : all 0.5s ease; 
} 
article { 
margin : 1em 0; 
} 
li { 
margin : 1em 0; 
} 
br { 
margin : 0 0 1em; 
} 
img { 
display : block; 
margin : 0 0 0.5em; 
max-width : 100%; 
} 
hr { 
margin : 0.5em 0; 
height : 0.3em; 
border : 0; 
background : url('../img/border-dots-1.png'); 
} 
footer hr { 
margin : 0.5em 0; 
height : 0.3em; 
border : 0; 
background : url('../img/border-dots-2.png'); 
} 
input, select, textarea { 
border : #CCC solid 0.1em; 
font : 300 1.4em "Open Sans"; 
transition : border 0.5s ease; 
} 
input, select { 
margin : 0 1em 1em 0; 
padding : 0.5em; 
width : 20em; 
} 
input[type="submit"] { 
margin : 1em 0; 
} 
textarea { 
padding : 0.5em; 
max-width : 100%; 
width : 65em; 
height : 15em; 
} 
.button { 
padding : 0.5em; 
width : 20em; 
outline : #FFF; 
background : #D73300; 
color : #FFF; 
text-align : center; 
} 
.button:active { 
outline : 0.1em solid #FFF; 
outline-offset : -0.3em; 
} 
*, *:before, *:after { 
box-sizing : border-box; 
} 
.layout-row { 
margin : 0 auto; 
width : 96em; 
} 
.layout-row .layout-row { 
width : auto; 
} 
.layout-row:before, .layout-row:after { 
display : block; 
visibility : hidden; 
height : 0; 
content : "\0020"; 
} 
.layout-row:after { 
clear : both; 
} 
.layout-column { 
position : relative; 
display : inline; 
float : left; 
padding : 1em; 
} 
.layout-column .layout-column { 
padding : 0; 
} 
.one { 
width : 8.33333%; 
} 
.two { 
width : 16.66667%; 
} 
.three { 
width : 25%; 
} 
.four { 
width : 33.33333%; 
} 
.five { 
width : 41.66667%; 
} 
.six { 
width : 50%; 
} 
.seven { 
width : 58.33333%; 
} 
.eight { 
width : 66.66667%; 
} 
.nine { 
width : 75%; 
} 
.ten { 
width : 83.33333%; 
} 
.eleven { 
width : 91.66667%; 
} 
.twelve { 
width : 100%; 
} 
.layout-navigation { 
margin : -2em 0 0; 
} 
.layout-navigation li { 
float : left; 
padding : 3em 0.75em 0.5em; 
text-align : center; 
} 
.widget-contacts li { 
float : left; 
margin : 0.5em 0; 
width : 50%; 
} 
.layout-footer-background { 
background : #333; 
} 
footer .layout-navigation { 
margin : 0; 
} 
footer .layout-navigation li { 
padding : 0 0.75em 0 0; 
} 
.selected { 
margin : -0.1em 0 0; 
border-top : 1.1em solid #D73300; 
background : #F3F3F3; 
} 
.selected .title-medium { 
color : #D73300; 
} 
.highlight { 
color : #D73300; 
} 

/* THEME SECTION */ 

.icon-small:before { 
display : block; 
float : left; 
overflow : hidden; 
margin : 0.3em 0.5em 0 0; 
width : 16px; 
height : 16px; 
background-image : url(../img/icon-sprite-16.png); 
content : ""; 
} 
.address:before { 
background-position : 0 0; 
content : ""; 
} 
.phone:before { 
background-position : -1.2em 0; 
content : ""; 
} 
.email:before { 
background-position : -2.4em 0; 
content : ""; 
} 
.twitter:before { 
background-position : -3.6em 0; 
content : ""; 
} 
a .twitter:hover:before { 
background-position : -3.6em -1.3em; 
} 
.pen:before { 
background-position : -4.6em 0; 
content : ""; 
} 
a .pen:hover:before { 
background-position : -4.6em -1.3em; 
} 
.file:before { 
background-position : -5.8em 0; 
content : ""; 
} 
a .file:hover:before { 
background-position : -5.8em -1.3em; 
} 
.delete:before { 
background-position : -6.9em 0; 
content : ""; 
} 
a .delete:hover:before { 
background-position : -6.9em -1.3em; 
} 
.author:before { 
background-position : -8em 0; 
content : ""; 
} 
.calendar:before { 
background-position : -9.2em 0; 
content : ""; 
} 
.category:before { 
background-position : -10.4em 0; 
content : ""; 
} 
a .category:hover:before { 
background-position : -10.4em -1.3em; 
} 
.facebook:before { 
background-position : -11.4em 0; 
content : ""; 
} 
a .facebook:hover:before { 
background-position : -11.4em -1.3em; 
} 
.linkedin:before { 
background-position : -12.6em 0; 
content : ""; 
} 
a .linkedin:hover:before { 
background-position : -12.6em -1.3em; 
} 
.google:before { 
background-position : -13.7em 0; 
content : ""; 
} 
a .google:hover:before { 
background-position : -13.7em -1.3em; 
} 
.check:before { 
background-position : -14.8em 0; 
content : ""; 
} 
.icon-large:before { 
display : block; 
float : left; 
overflow : hidden; 
margin : 0.3em 0.5em 0 0; 
width : 48px; 
height : 48px; 
background-image : url(../img/icon-sprite-48.png); 
content : ""; 
} 
.graph:before { 
background-position : 0 0; 
content : ""; 
} 
.lightning:before { 
background-position : -3.4em 0; 
content : ""; 
} 
.pencil:before { 
background-position : -6.8em 0; 
content : ""; 
} 
a .pencil:hover:before { 
background-position : -6.8em -3.6em; 
} 
.frame:before { 
background-position : -10.2em 0; 
content : ""; 
} 
a .frame:hover:before { 
background-position : -10.2em -3.6em; 
} 
.man:before { 
background-position : -13.8em 0; 
content : ""; 
} 
a .man:hover:before { 
background-position : -13.8em -3.6em; 
} 
.align-left { 
float : left; 
padding : 0 2em 0 0; 
} 
.align-right { 
float : right; 
padding : 0 0 0 2em; 
} 
.text-align-center { 
text-align : center; 
} 
.text-align-left { 
text-align : left; 
} 
.text-align-right { 
text-align : right; 
} 
#container { 
min-height : 20em; 
} 
img[id*="drag"] { 
padding : 0.5em; 
width : 15.1em; 
height : 10em; 
cursor : move; 
} 
#drop { 
margin : 1em 0 0; 
min-height : 10em; 
border : #CCC solid 0.1em; 
} 
#drop img { 
display : block; 
float : left; 
width : 15.1em; 
height : 10em; 
} 
+0

你嘗試驗證呢? http://jigsaw.w3.org/css-validator/也許你的標記需要驗證呢? – cimmanon 2013-02-28 21:41:48

+0

在評論問題得到解決後,我確實爲他檢查了它,奇怪的是,儘管缺少了引號,但它得到驗證。 。 。 – talemyn 2013-02-28 21:55:12

回答

9

您必須註釋掉文件中的任何非CSS內容。將THEME SECTION更改爲/* THEME SECTION */

另外,.icon-small:before的定義在background-image的URL沒有引號。它應該是:

{ 
display : block; 
float : left; 
overflow : hidden; 
margin : 0.3em 0.5em 0 0; 
width : 16px; 
height : 16px; 
background-image : url('../img/icon-sprite-16.png'); 
content : ""; 
} 

看起來您也會遇到與.icon-large:before相同的問題。

+0

對不起,它被註釋掉了它的只是stackoverflow剝離了我粘貼的評論,所以我只是鍵入它認爲它不會分開的代碼 – 2013-02-28 21:40:00

+0

_更新在answer_ – talemyn 2013-02-28 21:44:39

+2

其他CSS錯誤其實,引號是可選的。你*一般*只需要他們,如果有涉及空間。 http://stackoverflow.com/questions/2168855/css-url-are-quotes-needed – cimmanon 2013-02-28 22:12:03

3

你有沒有試過註釋說THEME SECTION的那一行?

/* THEME SECTION */ 

這可能會糾正你的問題

2

主題部分沒有被註釋掉,而不是有效的CSS

/* THEME SECTION*/