求助!把CSS文件放在不同位置~效果为什么不一样
我有一个CSS文件
如果把CSS文件的内容放在网页内。可以正常显示,我想要的效果。但是,另存为CSS格式后,在网页内调用,就不能出来效果。
CSS内容
<style type= "text/css ">
.top1{
position:absolute;
top: 0px;
height:20px;
width: 1000px;
left:0px;
padding: 1px;
z-index:7;
filter:progid:DXImageTransform.Microsoft.Gradient(
gradientType=1,startColorStr=#FFFFFF,endColorStr=#1E77D3)
}
.top2{
position:absolute;
top: 20px;
height:82px;
width: 990px;
left:0px;
padding: 1px;
border-bottom-style:solid;
border-bottom-color:#CCCCCC;
z-index:6;
filter:progid:DXImageTransform.Microsoft.Gradient(
gradientType=1,startColorStr=#0A6CCF,endColorStr=#FFFFFF)
}
.left{
position:absolute;
top: 84px;
height:450px;
width: 330px;
left:0px;
padding: 1px;
border-right-style:solid;
border-right-color:#CCCCCC;
z-index:3;
filter:progid:DXImageTransform.Microsoft.Gradient(
gradientType=0,startColorStr=#FEFFFF,endColorStr=#CCDFF4)
}
#content {
position:absolute;
top:84px;
left:330px;
width:662px;
height:450px;
background-color:#EFEFF2;
border-bottom-color:#FFFFFF;
z-index:2;
}
#dowm {
position:absolute;
height:90px;
width: 990px;
left:0px;
padding: 1px;
top: 530px;
z-index:3;
border-top-style:solid;
border-top-color:#CCCCCC;
filter:progid:DXImageTransform.Microsoft.Gradient(
gradientType=1,startColorStr=#FCFEFD,endColorStr=#1E77D3)
}
#by{
position:absolute;
height:20px;
width: 280px;
left:10px;
padding: 1px;
top: 580px;
z-index:4;
filter:progid:DXImageTransform.Microsoft.Gradient(
gradientType=1,startColorStr=#FCFEFD,endColorStr=#C1DAF2)
}
#table{
position:absolute;
left:150px;
top:120px;
height:250px;
width: 200px;
background-color:#EFEFF2;
}
#msg{
font-weight:700;
color:#FF0033;
}
</style>
网页内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
</head>
<body bgcolor= "#1E77D3 ">
<link rel= "stylesheet " type= "text/css " href= "css/login.css " />
<div class= "top1 "> </div>
<div class= "top2 "> </div>
<div class= "left "> </div>
<div id= "content ">
<div id= "table ">
<table height= "20 " align= "center ">
<form action= " " method= "post ">
<tr>
<td colspan= "2 "> 用户名 </td>
<td colspan= "3 "> <input name= "text " type= "text " /> </td>
</tr>
<tr>
<td colspan= "2 "> 密 码 </td>
<td colspan= "3 "> <input name= "pwd " type= "password "/> </td>
</tr>
<tr>
<td id= "msg " colspan= "6 "> </td>
</tr>
<tr>
<td colspan= "2 "> </td>
<td colspan= "1 " align= "left "> <input type= "submit " value= "登录 " style= "width:60px;height:26px "/> </td>
<td colspan= "1 " align= "right "> <input type= "button " value= "离开 " style= "width:60px;height:26px " /> </td>
</tr>
</form>
</table>
</div>
</div>
<div id= "by " > </div>
<div id= "dowm ">
</div>
</body>
</html>
就是DIV1 显示不出来。。
[解决办法]
这个问题很简单,把login.css中最前面一行: <style type= "text/css ">
和最后一行: </style> 删除保存即可!
另:css文件被包含在哪儿都无所谓,只要遵循一个规则就可以了:要放在设置class= ".. "之前就可以了。