2016-02-27 91 views
-1

我正在爲學校開發一個項目(我們需要爲計算器編寫代碼),並且我們首次使用了外部CSS。我一直在嘗試一個小時,但我猜我的外部CSS沒有正確鏈接?該計算器只是顯示出來,沒有任何造型。外部樣式表不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Crazy Calc</title> 
    <link rel="stylesheet" type="text/css" href="/style.css"> 
</head> 
<body> 

<h1>My Crazy Calculator<h1> 
<form name="calc"> 
<table> 
<tr> 
    <td colspan="4"><input class="textfield" type="text" name="input" ></td> 
</tr> 
<tr> 
    <td><input type="reset" value="clear" onclick="calc.input.value+='reset'"></td> 
    <td><input type="button" value="M" onclick="calc.store.value=calc.input.value;calc.input.value=''"></td> 
    <td><input type="button" value="MR" onclick="calc.input.value+=calc.store.value"></td> 
    <td><input type="button" value="/" onclick="calc.input.value+='/'"></td> 
</tr> 
<tr> 
    <td> 
    <input type="button" value="7" onclick="calc.input.value+='7'"> 
    </td> 
    <td> 
    <input type="button" value="8" onclick="calc.input.value+='8'"> 
    </td> 
    <td> 
    <input type="button" value="9" onclick="calc.input.value+='9'"> 
    </td> 
    <td> 
    <input type="button" value="*" onclick="calc.input.value+='*'"> 
    </td> 
</tr> 
<tr> 
    <td> 
    <input type="button" value="4" onclick="calc.input.value+='4'"> 
    </td> 
    <td> 
    <input type="button" value="5" onclick="calc.input.value+='5'"> 
    </td> 
    <td> 
    <input type="button" value="6" onclick="calc.input.value+='6'"> 
    </td> 
    <td> 
    <input type="button" value="-" onclick="calc.input.value+='-'"> 
    </td> 
</tr> 
<tr> 
    <td><input type="button" value="1" onclick="calc.input.value+='1'"></td> 
    <td><input type="button" value="2" onclick="calc.input.value+='2'"></td> 
    <td><input type="button" value="3" onclick="calc.input.value+='3'"></td> 
    <td><input type="button" value="+" onclick="calc.input.value+='+'"></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="button" value="0" onclick="calc.input.value+='0'"></td> 
    <td colspan="2"><input type="button" value="=" onclick="calc.input.value=eval(calc.input.value)"></td> 
</tr> 
<tr> 
    <td><input type="button" value="." onclick="calc.input.value+='.'"></td> 
    <td><input type="button" value="sin" onclick="calc.input.value=Math.sin(calc.input.value*Math.PI/180)"></td> 
    <td><input type="button" value="cos" onclick="calc.input.value=Math.cos(calc.input.value*Math.PI/180)"></td> 
    <td><input type="button" value="tan" onclick="calc.input.value=Math.tan(calc.input.value*Math.PI/180)"></td> 
</tr> 
<tr> 
    <td><input type="button" value="|x|" onclick="calc.input.value=Math.abs(calc.input.value)"></td> 
    <td><input type="button" value="log(x)" onclick="calc.input.value=Math.log(calc.input.value)"></td> 
    <td><input type="button" value="sqrt(x)" onclick="calc.input.value=Math.sqrt(calc.input.value)"></td> 
    <td><input type="button" value="e^x" onclick="calc.input.value=Math.exp(calc.input.value)"></td> 
    <td><input type="hidden" name="store"></td> 
</tr> 
</form> 

</body> 
</html> 

樣式表:

body { 
     background-color: black; 
     } 

    h1 { 
     color:white; 
     text-align:center; 
     font-family:calibri; 
    } 

    table{ 
     margin-left:auto; 
     margin-right:auto; 
     border:3px solid blue; 
     border-radius:25px; 
    } 
+2

檢查瀏覽器的開發人員工具以查看您遇到的錯誤。 – j08691

+0

它應該工作:檢查控制檯(在Windows中的Ctr轉換I上的Chrome)。 –

+0

這兩個文件的目錄是相同的? – devpro

回答

-1

我錯誤地指出,未關閉的鏈接元素可能是問題。

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>My Crazy Calc</title> 
     <link rel="stylesheet" type="text/css" href="calcstyle.css"/> 
    </head> 
+0

沒關係。請參閱https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link – j08691

0
  1. 如果樣式表文件是在同一個文件夾,添加一個斜槓: <link rel="stylesheet" type="text/css" href="/calcstyle.css">
  2. 文件名通常是區分大小寫的,因此確保您使用的是完全相同的名稱。同時檢查代碼或文件名稱中的空格。
+0

text和css之間的正斜槓?所以文字\ css? –

+0

in href property:href =「/ calcstyle.css」 – ViaSat

+0

仍然無法正常工作。我不認爲chrome因爲某種原因找到我的樣式表 –