我有2个css页面:
@charset "utf-8";
/* CSS Document */
/*
<div id="temp">
<div id="chart_nowmeter"></div>
<div id="chart_cpunowmeter"></div>
<div id="traffic">
<div id="traffic_graph"></div>
<div style="clear:both"></div>
<div id="traffic_div"></div>
</div>
</div>
<div id="chart_temphistory"></div>
<div id="chart_cpuhistory"></div>
*/
#gencontainer {
width: 100%;
margin: 0 auto;
}
#topmenu {
}
#temp {
width=100%;
overflow:hidden;
display:inline-block;
}
#chart_nowmeter {
position:relative;
float:left;
margin-left:100px;
width:256px;
height:256px;
display:inline-block;
}
#chart_cpunowmeter {
position:relative;
float:left;
width:256px;
height:256px;
display:inline-block;
}
#traffic_div{
float:center;
}
#traffic{
height:250px;
width:100%;
float:center;
}
#chart_temphistory{
}
#chart_cpuhistory{
另一个css:
* {
padding:0;
margin:0;
}
header {
width:100%;
}
header nav {
width:90%;
margin:20px auto;
max-width:1000px;
background:#024959;
}
.menu_bar {
display:none;
}
header nav ul {
list-style:none;
overflow:hidden;
}
header nav ul li {
float: left;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a{
display:block;
padding:20px;
color:#fff;
text-decoration:none;
}
header nav ul li a:hover {
background:#037E8C;
}
section {
padding:20px;
}
@media screen and (max-width:800px) {
header nav {
width:80%;
height:100%;
margin:0;
position: fixed;
left:-100%;
/*top:0px;*/
overflow:auto;
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
}
.menu_bar .bt-menu {
display:block;
padding-top: 25px;
padding-left: 10px;
background:#024959;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background-image: url("/images/logo.png");
background-size: 70% 100%;
background-repeat: no-repeat;
background-position: right;
overflow: hidden;
font-size:25px;
font-weight:bold;
color:#fff;
text-decoration:none;
}
.menu_bar span {
float:right;
font-size:40px;
}
header nav ul li {
display:block;
float:none;
border-bottom:1px solid rgba(255,255,255,.3);
}
第一个是显示一些数据的表,第二个是顶级菜单。页面加载时一切正常,但点击菜单时,它会显示在表格下方。
<?include ("http://erbicam.es/seguridad1.php");?>
<html>
<head>
<meta charset="UTF-8">
<title>ERBICAM</title>
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="fonts.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>ERBICAM</title>
<body background="/images/fondo.jpg")>
</head>
<body>
<header>
<div class="menu_bar">
<a class="bt-menu" href="#"><span class="icon-list2"></span>MENU</a>
</div>
<nav>
<ul>
<li><a href="index2.php"><span class="icon-house"></span>INICIO</a></li>
<li><a href="camara21.php"><span class="icon-suitcase"></span>CAMARAS</a></li>
<li><a href="imagenes1.php"><span class="icon-rocket"></span>IMAGENES</a></li>
<li><a href="videos1.php"><span class="icon-earth"></span>VIDEOS</a></li>
<li><a href="control31.php"><span class="icon-mail"></span>LUCES</a></li>
<li><a href="3g1.php"><span class="icon-mail"></span>CONSUMO</a></li>
<li><a href="sucesos1.php"><span class="icon-mail"></span>SUCESOS</a></li>
</ul>
</nav>
</header>
<center>
<SCRIPT Language="Javascript">
function go() {
document.location = "/cgi-bin/alarmaon1.cgi";
}
</SCRIPT>
<br><IMG SRC="/images/alarmaon.png" style="width:49%" onClick="go()">
<SCRIPT Language="Javascript">
function go_to() {
document.location = "/cgi-bin/alarmaoff1.cgi";
}
</SCRIPT>
<IMG SRC="/images/alarmaoff.png" style="width:49%" onClick="go_to()">
</center>
<script src="jquery-latest.js"></script>
<script src="menu.js"></script>
</body>
</html>