斜杆上的Navbar(Navbar on Slanted Div)

 我创建了一个与我的导航栏一起使用的预定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>
 
 Navbar 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;
}

I have created a slated div to use with my navbar, but it messes up the rest of the formatting for the website. The navbar is in the top right and the slanted div is underneath it, but it messes up everything else on the webpage. I've been trying everything to no avail. 
http://imgur.com/a/bmv6l 
Navbar 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>
 
Navbar 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;
}
 
"Bobcats Services" Div HTML: 
<body>
  <div id="nav">
    {{> navbar}}
  </div>
  <div id="center">
      <h1>Bobcats Services</h1>
      <h2>Everything you need!</h2>
  </div>
</body>
 
"Bobcats Services" 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;
}

原文：https://stackoverflow.com/questions/38650894

2023-04-06 21:04

满意答案

 IIUIC，这是一种方法。 比方说，  
 直径终点之间的gap是gap ，（红线的长度）  
 base是当前圈的左径点  
 base + d给你当前圈的中心  
 newbase是下一圈的左侧直径点  
 
 
  
  var myData1 = [5, 10, 15]
var mySvg1 = d3.select('body').append('svg')

var base = 90
var newbase = 90
var gap = 20
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d, i){
      base = newbase
    	newbase = newbase + 2*d + gap
    	return base + d
      })
    .attr('cy', '55')
    .attr('r', function(d){return d}) 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 
 
 https://jsfiddle.net/utfk44tL/ 

IIUIC, Here's one way. Let's say, 
Gap between diameter endpoints is gap, (length of red lines) 
base is current circle's left diameter point 
base + d gives you current circle's center 
newbase is next circle's left diameter point 
 
 
  
  var myData1 = [5, 10, 15]
var mySvg1 = d3.select('body').append('svg')

var base = 90
var newbase = 90
var gap = 20
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d, i){
      base = newbase
    	newbase = newbase + 2*d + gap
    	return base + d
      })
    .attr('cy', '55')
    .attr('r', function(d){return d}) 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 
 
https://jsfiddle.net/utfk44tL/

如何在圆圈之间均匀分割d3链接(How to evenly split d3 links between circles)

如果要使用圆半径和间距定义，则计算列中第i个圆的y坐标的公式可以是这样的： Yith = Y+[i-(n+1)/2]*(diameter+padding) 其中Y是第一个（蓝色）圆的y坐标， i是列中的第i个圆， n表示列中的圆数，（直径+填充）显示在图像上。它代表球的直径与间距。 The formula for calculating y-coordinate for ith circle in the column could be like this if you would like...

D3.js语义缩放行为不当(D3.js semantic zoom misbehaving)

您的代码非常接近正确：工作演示。使用比例来映射对象的位置除了保存对象的确切位置，然后使用range和domain设置为[0, 1]的缩放比例，请使用比例为您执行映射： for (j = _i = 0; _i <= 6; j = ++_i) { for (i = _j = 0; _j <= 12; i = ++_j) { circles.push({ r: 25, cx: i, cy: j, color: "#000" })...

如何在D3.js中均匀排列圆圈并保持圆周之间的距离相等(how to evenly arrange circles in D3.js and keep equal distance between circumferences)

IIUIC，这是一种方法。比方说，直径终点之间的gap是gap ，（红线的长度） base是当前圈的左径点 base + d给你当前圈的中心 newbase是下一圈的左侧直径点 var myData1 = [5, 10, 15] var mySvg1 = d3.select('body').append('svg') var base = 90 var newbase = 90 var gap = 20 mySvg1.selectAll('circle').data(myData...

用D3.js动画圈子(Animating circles with D3.js)

解决方案演示：注意缺乏对称性： http://jsfiddle.net/blakedietz/R5cRK/1/embedded/result/ 做法：确定一个能正确模拟你想要的运动的数学函数。在这种情况下，我们需要一个正弦波。我们可以修改每个气泡特征的各个方面，为每个气泡提供独特的运动模式。建立或找到一个解决方案，利用这个问题所需的关键概念。我喜欢在bl.ocks.org/mbostock上搜索具有我试图解决的问题的基础部分的示例。在网站上我找到了这个例子： http ： //bl...

d3.js鼠标悬停重叠的圆圈(d3.js mouseover overlapping circles)

您应该按降序对padeedits字段对接收到的数据进行排序，因此较小的圆圈会在较小的圆圈之前插入，并且不会有任何重叠。所以以这种方式修改你的代码： ... svg.selectAll(".loading").remove(); // code block for inserting data.sort(function(a,b) { if (a.pageedits > b.pageedits) return -1; if (a.pageedits ...

在d3.js中添加新圆后，无法在圆之间创建链接(Can't create links between circles after appending new circles in d3.js)

只要问你是否需要解释我会尽我所能，但现在不是这次我必须回家就像我在d3上的每个图表之前所说的那样，在制作它之前先了解结构，了解这个结构图，如果你看到工作中的数据数组，你会看到没有子对象和2个数组之间的id或源有相同的值。我假设您的数据在2数据数组，ID和源之间没有相同的数据值，这就是您拥有的原因错误：遗失：哺乳动物我将缺少的mamal添加到children对象中如果您控制节点和链接，您会发现此图表类型生成vx和vy TypeError：无法在字符串'mammal'上创建属性'vx' 是一...

如何在d3.js中为路径上的多个圆圈制作动画？(How to animate multiple circles on a path in d3.js?)

代码中的基本问题是您同时为所有点应用相同的翻译。实际上你的所有圈子都沿着路径移动，但它们互相覆盖 - 所以你已经完成了任务的主要部分。但是，如果您希望不同的圆圈位于不同的坐标处，则必须为它们应用不同的补间。也就是说，即使你为每个圆计算出startPoints是不同的，你也不要在动画中使用它，所以所有的圆都在一起移动。我通过将点的索引作为新参数添加到translateAlong函数，并使用一些基本数学计算圆的位置来解决这个问题，因此它变为： function translateAlong(p...

如何在d3.js中排列行中的矩形(How to arrange rectangles in rows in d3.js)

首先，您可以将数据简化为： .data(d3.range(100)); 要使用矩形制作矩阵，您可以使用： .attr("x", (d,i) => i%10 * 45) .attr("y", (d,i) => Math.floor(i/10)%10 * 45) 这是一个演示： var ContainerWidth = document.querySelector('#mainContainer').offsetWidth; var rectWidth = ContainerWidth / ...

D3.js中的圆圈仅显示没有圆圈的文本(Circle in D3.js only displaying text without circle)

您在HTML中附加了<circle>元素，而不是SVG。它没有任何意义，所以它不会被渲染。您需要附加一个svg元素，然后将您的圆和文本节点附加到该元素。填充，描边宽度和笔划也应该使用.style而不是.attr 。一些相关的代码更改是： var svg = d3.select('.circles').append('svg') // added .append('svg') .attr('height', /* set the height */) .attr('width...

d3.js圈子没有出现(d3.js circles are not appearing)

在你的代码中没有工作的第一件事是你没有创建一个svg元素，你将在其中绘制你的圆圈。所以你必须更换 var nodesG = d3.selectAll("g"); 通过 var nodesG = d3.select('body').append('svg'); 然后，您没有很好地定义圆圈的属性x和y。我想这些属性取决于每个节点的属性x和y 。因此，您必须替换以下内容： .attr("cx", x) .attr("cy", y) 通过： ...

gwt 部署在div 中的问题。

按照这片文章（http://developerlife.com/tutorials/?p=231）将我 ...

div 与 iframe页面缩小问题 [JavaScript]

<div　width="20%"></div> < ...

如何用正则表达示匹配一个div标签

div布局代替frame布局后该如何跳转呢？

进入base.jsp页面后，frame可以分别跳转到top,left,right,bottom之类的子 ...

jquery 效果实现,div失去焦点

我想做一个弹出层.input的失去焦点的时候. [点击层内的link不关闭该层.点击该层外则关闭该层] ...

《DIV.CSS应用视频教程》(DIV+CSS)[压缩包]

中文名: DIV.CSS应用视频教程英文名: DIV+CSS 资源格式: 压缩包 ...

解决点击没有内容的空白div没有响应click事件的方法

给一个div绑定一个click事件，如果这个div没有内容，在一般浏览器下都没有问题，在IE8下点击的 ...

html中一个div的id是“1:222”的话，怎么利用id给它定义css啊？

如 <style> #1:2{ height:100px; width:100px ...

在列表li里两个浮动div兼容IE6问题

本来一个很简单功能，却难以兼容IE6， <ul class="ulDiv&quot ...

div中table100%宽度的浏览器兼容性问题

先上代码，请看： <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)

我用Google搜索了一个解决方案。 “EnumDisplayModeProvider”是我自己设置网站的各种模式的枚举。 public EnumDisplayModeProvider GetDisplayModeId() { foreach (var mode in DisplayModeProvider.Instance.Modes) if (mode.CanHandleContext(HttpContext)) {

如何通过引用返回对象？(How is returning an object by reference possible?)

这相对简单：在类的构造函数中，您可以分配内存，例如使用new 。如果你制作一个对象的副本，你不是每次都分配新的内存，而是只复制指向原始内存块的指针，同时递增一个也存储在内存中的引用计数器，使得每个副本都是对象可以访问它。如果引用计数降至零，则销毁对象将减少引用计数并仅释放分配的内存。您只需要一个自定义复制构造函数和赋值运算符。这基本上是共享指针的工作方式。 This is relatively easy: In the class' constructor, you allocate m

矩阵如何存储在内存中？(How are matrices stored in memory?)

正如它在“熵编码”中所说的那样，使用Z字形图案，与RLE一起使用，在许多情况下，RLE已经减小了尺寸。但是，据我所知，DCT本身并没有给出稀疏矩阵。但它通常会增强矩阵的熵。这是compressen变得有损的点：输入矩阵用DCT传输，然后量化量化然后使用霍夫曼编码。 As it says in "Entropy coding" a zig-zag pattern is used, together with RLE which will already reduce size for man

每个请求的Java新会话？(Java New Session For Each Request?)

你是如何进行重定向的？您是否事先调用了HttpServletResponse.encodeRedirectURL（）？在这里阅读javadoc 您可以使用它像response.sendRedirect(response.encodeRedirectURL(path)); The issue was with the path in the JSESSIONID cookie. I still can't figure out why it was being set to the tomca

css：浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)

我认为word-break ，如果你想在一个单词中打破行，你可以指定它，这样做可以解决问题： .column { word-break:break-all; } jsFiddle演示。您可以在此处阅读有关word-break属性的更多信息。 I think word-break, with which you can specify if you want to break line within a word, will do the trick: .column { word-break

无论图像如何，Caffe预测同一类(Caffe predicts same class regardless of image)

我认为您忘记在分类时间内缩放输入图像，如train_test.prototxt文件的第11行所示。您可能应该在C ++代码中的某个位置乘以该因子，或者使用Caffe图层来缩放输入（请查看ELTWISE或POWER图层）。编辑：在评论中进行了一次对话之后，结果发现在classification.cpp文件中错误地删除了图像均值，而在原始训练/测试管道中没有减去图像均值。 I think you have forgotten to scale the input image during cl

xcode语法颜色编码解释？(xcode syntax color coding explained?)

转到： Xcode => Preferences => Fonts & Colors 您将看到每个语法高亮颜色旁边都有一个简短的解释。 Go to: Xcode => Preferences => Fonts & Colors You'll see that each syntax highlighting colour has a brief explanation next to it.

在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)

你考虑过第三方拼写检查吗？您可以将在C＃中开发的自定义WinForms控件插入访问数据库吗？ VB6控件怎么样？如果你能找到一个使用第三方库进行拼写检查的控件，那可能会有效。 Have you considered a third party spell checker? Can you insert a custom WinForms controls developed in C# into an access database? What about a VB6 control? If

从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)

我有同样的问题，因为我在远程服务器上有两个图像，我需要在每天的预定义时间复制到我的本地服务器，这是我能够提出的代码... try { if(@copy('url/to/source/image.ext', 'local/absolute/path/on/server/' . date("d-m-Y") . ".gif")) { } else { $errors = error_get_last(); throw new Exception($err

从旧版本复制文件并保留它们（旧/新版本）(Copy a file from old revision and keep both of them (old / new revision))

我不确定我完全明白你在说什么。你能编辑你的帖子并包含你正在做的Subversion命令/操作的特定顺序吗？最好使用命令行svn客户端，以便容易为其他人重现问题。如果您只是想获取文件的旧副本（即使该文件不再存在），您可以使用如下命令： svn copy ${repo}/trunk/moduleA/file1@${rev} ${repo}/trunk/moduleB/file1 其中${repo}是您的存储库的URL， ${rev}是您想要的文件的版本。这将恢复该文件的旧版本，包括最高版本