我正在爲學校開發一個項目(我們需要爲計算器編寫代碼),並且我們首次使用了外部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;
}
檢查瀏覽器的開發人員工具以查看您遇到的錯誤。 – j08691
它應該工作:檢查控制檯(在Windows中的Ctr轉換I上的Chrome)。 –
這兩個文件的目錄是相同的? – devpro