css正面或背面位置

时间:2015-02-27 15:55:52

标签: jquery html css

我有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>

0 个答案:

没有答案