！把CSS文件放在不同位置~效果为什么不一样
日期：2014-05-17 浏览次数：20761 次
求助！把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
我有一个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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
