个人中心
gpt4 book ai didi

html - 倾斜 Div 上的导航栏

转载 作者：行者123 更新时间：2023-11-28 05:28:18 24 4
gpt4 key购买 nike

我已经创建了一个预定的 div 来与我的导航栏一起使用，但是它弄乱了网站的其余格式。导航栏位于右上角，倾斜的 div 位于其下方，但它弄乱了网页上的所有其他内容。我一直在尝试一切都无济于事。

http://imgur.com/a/bmv6l

导航栏 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;
}

“山猫服务”Div HTML:

<body>
  <div id="nav">
    {{> navbar}}
  </div>
  <div id="center">
      <h1>Bobcats Services</h1>
      <h2>Everything you need!</h2>
  </div>
</body>

“山猫服务”Div 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;
}

最佳答案

在使用float的时候需要清空，这样后面的元素才能看对。我在这里添加:https://jsfiddle.net/44x11g34/一个例子。

我在两个主要 block 之间添加的内容:

<div class="clear"></div>

和一些小的CSS

.clear {
  clear: both;
}

希望对您有所帮助。

关于html - 倾斜 Div 上的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38650894/

24 4 0
文章推荐： c++ - 程序不工作(前导零)
文章推荐： c++ - 在qt中单击按钮重写文件内容
文章推荐： c++ - 在笛卡尔平面上旋转 X、Y 坐标的问题
文章推荐： jquery - Addclass 使 img 元素在位置方面不粘