风格笔记本电脑vs桌面

时间：2014-11-17 20:13:39

标签： css layout

每次我从桌面更换到笔记本电脑时，我页面上的样式都在不断变化我为什么不知所措。我也收到以下警告：

  

TextArea（CSS 3级）的W3C CSS Validator结果

     

抱歉！我们发现了以下错误（2）URI：TextArea   120 #container Parse Error opacity = 40）226 #footer Parse Error   不透明度= 40）

     

166属性-webkit-transform是未知的供应商扩展

     

167属性-moz-transform是一个未知的供应商扩展

     

168属性-o-transform是未知的供应商扩展

     

169属性-webkit-transition-duration是未知的供应商扩展

     

170属性-moz-transition-duration是未知的供应商扩展

     

171属性-o-transition-duration是未知的供应商扩展

HTML 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta http-equiv="Content-Type" content="text/html;  charset=ISO-8859-1"  />
      <script type="text/javascript" src="js/scripts.js"  charset="utf-8"></script> 
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.css" />
      <title> Cake  </title>
  </head>


<body>

<div id="header">
  <a href="index.php"><img src="images/background.jpg" alt="HTML tags" /></a>

</div>


<div id="container">  

<div id="navBar">
<div class="nav-container">
  <ul class="nav">
    <li class="active">
      <a href="index.php">
        <span class="text"><i class="fa fa-home"></i>Home</span>
      </a>
    </li>
    <li>
      <a href="about.php">
       <i class="fa fa-book"></i> <span class="text">&nbsp;About us</span>
      </a>
      </li>
    <li>
      <a href="contact.php">
        <i class="fa fa-envelope-o"></i><span class="text">&nbsp;Contact us</span>
      </a>
      </li>
    <li>
      <a href="webDesign.php">
        <i class="fa fa-cog"></i><span class="text">&nbsp;Web design</span>    
      </a>
    </li>
    <li>
      <a href="tutorials.php">
      <i class="fa fa-graduation-cap"></i><span class="text">&nbsp;Tutorials</span>
      </a>
    </li>
  </ul>
</div>
</div>
  <div id="mainContent">      

      <div id = "firstColumn">
      <div class="spin">
                  <a href="webDesign.php">    <i class="fa fa-html5"></i></a>
      </div>
          <br />
          <p><a href="tutorials.php">Tutorials</a></p>
      </div><!--End of first column-->
  <div id = "secondColumn">
                      <div class="spin">
                  <a href="webDesign.php">    <i class="fa fa-at"></i></a>
      </div>
  </div><!--End of second column-->
  <div id = "thirdColumn">
                      <div class="spin">
                  <a href="webDesign.php">    <i class="fa fa-html5"></i></a>
      </div>
  </div><!--End of third column-->
  <div id = "fourthColumn">

      <a href="tutorials.php">
                          <div class="spin">
                  <a href="webDesign.php">    <i class="fa fa-html5"></i></a>
      </div>
  </div><!--End of fourth column-->



</div><!--mainContent-->  


</div><!--Container div-->
<div id="footer">
   <a href="sitemap.php">Site map</a>
</div><!--footer div-->       
</body> 
</html>
     

CSS：

@charset "UTF-8";

*{
  box-sizing: border-box;
  margin:0px;
  padding:0px;
  font:  Verdana, Arial, Helvetica, sans-serif;

}
body {
background-image:url(../images/backgroundm.jpg);
background-size: 100%;

} 


 /*Navigation bar style*/
#navBar{


      }

.nav-container{
  width:100%;
  margin-top:10px;
  transition: all 0.3s linear;
  float:left;
  margin-top:-4px;
}



.nav li{
  float: left;
  list-style: none;
  background: linear-gradient(#292929, #242424);
}
.nav a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:inline-block;
  min-width: 190px;
  height:100%;
  line-height:30px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px 15px;
  border-bottom:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
  text-align: center;
   text-shadow: 2px 3px #000000;
}
.active a{
  color: #B93632;
  border-bottom:5px solid #B93632;
  background-color: #1B1B1B;
  outline:0;
   text-shadow: 2px 3px #000000;
}
li:not(.active):hover a{
  color: #eee;
  border-bottom: 5px solid #FCFCFC;
  background-color: #1B1B1B;
}


@media only screen and (max-width : 1024px){

  .text{
    display:none;
  }

  .nav-container , a{
    width: 190px;

  }

  a:hover{
    width:190px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
   text-shadow: 2px 3px #000000;
  }

  a:hover  .text {
    display:block;
    padding-left:30%;
   text-shadow: 2px 3px #000000;
  }
}
@media only screen and (max-width : 1024px){
  .nav-container, a{ width:90px;}

}



/*Style header*/          
#header{
      width:1100px;
      margin-left:auto;
      margin-right:auto;
      box-shadow: 10px 10px 5px #000000;
      margin-bottom:2px;

}     

#header img{
      width:100%;
} 

/*Style container*/       
#container{
      background-color:rgba(255,255,255,0.7);
      filter: alpha(opacity=40); /* For IE8 and earlier */    
      height:500px;
      width:1100px;
      margin-left:auto;
      margin-right:auto;
      box-shadow:10px 10px 5px #000000;

}
      /*style main content*/
#mainContent{

      width:100%;
      margin-left:auto;
      margin-right:auto;
      margin-top:-5px;
}



/*first div starting from left of screen*/            
#firstColumn{
  width:230px;
  height:250px;
  float:left;
  padding-left:65px;
  margin-top:100px;
  text-align: center;
  font-size:24px;
}


#firstColumn img{
  width:120px;
  height:100px;
  padding-left:20px;

}

.spin {
  width: 240px;
  height: 240px;
  margin: 0 auto;
  text-align: center;
}
.spin i {font-size: 240px; text-align: center; color:black;}
.spin:hover {
  -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
  -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
} 


#secondColumn{
  width:230px;
  height:250px;
  float:left;
  padding-left:65px;
  margin-top:100px;
  text-align: center;
  font-size:24px;

} 


#secondColumn img{
  width:120px;
  height:100px;
  padding-left:20px;


} 

#thirdColumn{
  width:230px;
  height:250px;
  float:left;
  padding-left:65px;
  margin-top:100px;
  text-align: center;
  font-size:24px;
} 



#fourthColumn {
  width:230px;
  height:250px;
  float:left;
  padding-left:65px;
  margin-top:100px;
  text-align: center;
  font-size:24px;
}


/*style footer*/
#footer{
  width:1100px;
  height:40px;
  margin-left:auto;
  margin-right:auto;
  background-color:rgba(255,255,255,0.7);
  filter: alpha(opacity=40); /* For IE8 and earlier */
  border-top:solid 1px;
  box-shadow: 10px 10px 5px #000000;

  margin-top:0px;

}

2 个答案:

答案 0 :(得分：3)

很有可能，因为您正在使用媒体查询。

     @media only screen and (max-width : 1024px){ }

媒体查询将根据您的规范更改您呈现给最终用户的样式。在这种情况下，只要用户仅使用屏幕（而不是打印或电视媒体）并且最大宽度为1024px，媒体查询就会引入新样式。

就-webkit-transform，-moz-transform，-o-transform而言，这些是供应商特定的（webkit浏览器，Firefox和Opera）样式，它们会影响元素受影响的效果，速度和间隔。他们没有加载或捕获错误，因为它们并非专为Internet Explorer设计（根据错误，20美元表示您正在使用的内容）。

答案 1 :(得分：0)

 /*Navigation bar style*/
#navBar{
        margin-top:-3px;
        height:50px;
        }
#navBar .nav-container{
    width:100%;
  margin-top:10px;
  transition: all 0.3s linear;
  float:left;
  margin-top:-4px;
  height:50px;
}
#navBar .nav li{
    float: left;
    list-style: none;
  background: linear-gradient(#292929, #242424);
  height:auto;
  width:220px;
}
#navBar .nav a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:inline-block;
  min-width: 190px;
  height:height:50px;
  line-height:30px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px 15px;
  border-bottom:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
  text-align: center;
   text-shadow: 2px 3px #000000;
}
#navBar.active a{
  color: #B93632;
  border-bottom:5px solid #B93632;
  background-color: #1B1B1B;
  text-shadow: 2px 3px #000000;
}
#navBar li:not(.active):hover a{
  color: #eee;
  border-bottom: 5px solid #FCFCFC;
  background-color: #1B1B1B;

}
 #navBar .text{
    display:inline-block;
  }
#navBar  .nav-container  a{
    width: 220px;
    display:inline-block;
  }  
 #navBar a:hover{
    width:220px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
     text-shadow: 2px 3px #000000;
       border-bottom:5px solid #B93632;
  }
相关问题
最新问题