0
我已经创建了一个使用我的导航栏的预设div，但是它为网站格式化的其余部分弄乱了。导航栏位于右上方，倾斜的div位于其下方，但它会混淆网页上的其他所有内容。我一直在尝试一切都无济于事。Navbar on Slanted Div
导航栏HTML：
<template name="navbar">
<div class="navbar">
<ul>
<li><a href="https://www.meteor.com/try">Contact</a></li>
<li><a href="http://guide.meteor.com">Services</a></li>
<li><a href="https://docs.meteor.com">Experience</a></li>
<li><a href="https://forums.meteor.com" class="active">Home</a></li>
</ul>
</div>
</template>
导航栏CSS：
.navbar {
position: relative;
display: inline-block;
padding: 0em 0em 1em 10em;
overflow: hidden;
color: #fff;
float: right;
}
.navbar:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(45deg);
-ms-transform: skew(45deg);
transform: skew(45deg);
z-index: -1;
}
ul {
list-style-type: none;
margin-left: 100px;
margin: 0;
padding: 0;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5px;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
-webkit-font-smoothing: antialiased;
z-index: -1;
}
li {
margin-left: 1em;
margin-right: 2em;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
border: 5px;
border-style: solid;
border-radius: 10px;
border-color: white;
transition: background 0.2s ease,
padding 0.8s linear;
}
li a:hover {
background-color: #111;
}
.active {
border-radius: 8px;
border-color: white;
background-color: #555;
}
“山猫服务” 除HTML：
<body>
<div id="nav">
{{> navbar}}
</div>
<div id="center">
<h1>Bobcats Services</h1>
<h2>Everything you need!</h2>
</div>
</body>
“山猫服务” 迪v CSS：
/* CSS declarations go here */
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
/*background-color: #0193ff;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
background: rgb(135,224,253); /* Old browsers */
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); /* IE6-9 */
/* Image instead of standard color
background-image: url("images/watch-plane.png");
background-repeat: no-repeat;
background-size: cover;
*/
}
#nav {
}
#center {
width: 30%;
padding-bottom: 2em;
padding-top: 2em;
margin: auto;
margin-top: 2em;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-style: solid;
border-radius: 5px;
border-color: #008fc8;
font-family: 'Open Sans', sans-serif;
}
我不知道我完全理解这个问题。问题是什么，它如何混淆网页？你想成为导航的地方，你想让内容在哪里摆平？现场示例也可以帮助。 –
@ValentinVrinceanu是的，说山猫服务应该进一步下去，我把它放在边缘位置，但似乎完全忽略了它。 –
请分享说明山猫服务 –