我正在尝试使用材料设计技术通过聚合物制作我的新网页,我制作了固定标题,其中包含按钮,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;
}