首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > 网页设计 >

!把CSS文件放在不同位置~效果为什么不一样

2012-03-19 
求助!把CSS文件放在不同位置~效果为什么不一样我有一个CSS文件如果把CSS文件的内容放在网页内。可以正常显

求助!把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 ">   密&nbsp;&nbsp;码 </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= ".. "之前就可以了。

热点排行