Question

我正在尝试使用材料设计技术通过聚合物制作我的新网页，我制作了固定标题，其中包含按钮，H1，图片和文字。当您调整页面大小或缩放时，所有内容都会闪烁，并且该标题上的所有内容都会移动。我还有一个“隐藏”的侧边栏，当您点击按钮时，它会从左侧移动。当我缩放它自己的网络。请帮助：X

HTML和PHP代码：

<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
  <head>
    <title>RostaCZE</title>
    <link rel="stylesheet" type="text/css" href="css.php"> 
    <link rel="import" href="../components/paper-tabs/paper-tabs.html">  
    <link rel="import" href="../components/paper-ripple/paper-ripple.html">  
    <script src="jquery-2.1.3.js">
    </script>
    <script src="../components/webcomponentsjs/webcomponents.js">
    </script>
    <script>
    $(document).ready(function(){
        var width=$('.sidebar').width();
        $('.sidebar').css('left',-width);
        var rig=$('.sidebar').position().left;
            $(".button").click(function() {
                var rig=$('.sidebar').position().left;
                if(rig == 0 )
                {
                    $('.sidebar').animate({left:-width}, 400);  
                }
                else
                {
                    $('.sidebar').animate({left:'0px'}, 400);
                }
            });
      });
  </script>   
  <script>
      var tabs = document.querySelector('paper-tabs');
      tabs.addEventListener('core-select', function() {
          console.log("Selected: " + tabs.selected);
      });
  </script>
  <?php
      $_SESSION['dark_blue'] = '#1E88E5';  
      $_SESSION['light_blue'] = '#E3F2FD';
      $_SESSION['grey'] = '#BDBDBD';
  ?>
  </head>
  <body>
    <header>  
      <paper-ripple id="header_ripple"></paper-ripple>
      <div class="button raised">
        <div class="center" fit>MENU</div>
        <paper-ripple fit></paper-ripple>
      </div>
      <div class="time">
        <?php 
          $today = date("Y-m-d H:i:s"); 
          echo "$today";
        ?>
      </div>
      <div class="name">
        <img src="face.png" alt="me"/>
        <h1>Rostislav Danko</h1>
      </div> 
    </header>
    <div class="sidebar">
    </div>
    <div id="main">
    </div>
    <footer>
    </footer>
  </body>
</html>  
<style>
</style>

CSS代码（某些css颜色未填充，我通过PHP变量制作）

<?php
session_start();
?>
<?php header("Content-type: text/css; charset: UTF-8"); ?>
html, body {
  position: relative; 
  margin: 0px;
  height: 100%;
}
header {
  position: fixed;
  background-color: <?php echo $_SESSION["dark_blue"]; ?>;
  height: 10%;
  width: 100%;
  -webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
  -moz-box-shadow:    0px 3px 30px 0px rgba(50, 50, 50, 0.7);
  box-shadow:         0px 3px 30px 0px rgba(50, 50, 50, 0.7);
  z-index: 20;
  font-color: <?php echo $_SESSION["light_blue"]; ?>;
  z-index: 10;
}
.name {  
  position: relative;
  margin-left: 4%;
  margin-top: -5%;
}
.name img {
  position: relative;
  height: 150%; 
  width: 7%;
  margin-top: -3.8%;
  margin-left: 30%;
}
.time {
  position: relative;
  margin-left: 90%;
  margin-top: 1.5%;
  font-color: <?php echo $_SESSION["light_blue"]; ?>;
  color: <?php echo $_SESSION["light_blue"]; ?>; 
  z-index: 20;
  font-size: 20px;
}
h1 {
   position: relative;
   margin-top: -5%;
   text-align: center;
   color: <?php echo $_SESSION["light_blue"]; ?>;
   z-index: 20;
}   
#main {
  float: left;
  background-color: <?php echo $_SESSION["light_blue"]; ?>;
  width: 100%;   
  height: 110%;
  z-index: 10; 
}
.sidebar {
   position: fixed;
   height: 100%;
   width: 20%;
   margin-top: 7.1%;
   background-color: <?php echo $_SESSION["dark_blue"]; ?>;;
   z-index: 30;
   border-top: solid 1px <?php echo $_SESSION["light_blue"]; ?>;
}
#header_ripple {
  position: absolute;
  color: #E3F2FD;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.button {  
  display: inline-block;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
  font-size: 0.9em;
  z-index: 100;   
  position: absolute;
  margin-left: 5%;
  margin-top: 2%;
  text-align: center;  
  cursor: pointer;
  background-color: <?php echo $_SESSION["light_blue"]; ?>;
  font-color: <?php echo $_SESSION["grey"]; ?>;
}
.button > paper-ripple {
  color: <?php echo $_SESSION["dark_blue"]; ?>;
  border-radius: 2px;
  overflow: hidden;
}

.button.narrow {
  width: 60px;
}
.button.raised {
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

网络 - 在调整大小/缩放时，一切都会移动

0 个答案: