Question

我的父亲一直想要一个带有研讨会图表的网站，该图表由圆圈和线条组成，连接它们作为他网站上文章的主要导航。该网站将有一个页眉和页脚之间，研讨会就像图表（有点像流程图，但只有cirlces）。我不是一个程序员，想为我父亲这样做。做了一些研究，发现了两个选择。使用图像作为圆圈或使用CSS3。任何人都可以指出我正确的方向。这是我手边的尝试。

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circles</title>
    <link rel="stylesheet" href="circle.css">
</head>
<body>
    <div id="wrapper">

        <div id="header"><h1>Header</h1></div>

        <div id="content">

                <div class="c1"><a href="http://www.google.com" class="with-style">Hello</a></div>
                <div class="c1"><a href="http://www.google.com" class="with-style">Hello</a></div>

        </div>

        <div id="footer">My Footer</div>

    </div>  
</body>

我的CSS：

 #wrapper {
background-color: black;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
}
#header {
height: 8.3%;
width: 100%;
background-color: gray;
text-align: center;
}
#content {
color: green;
}

a.with-style {
display: block;
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
line-height:100px;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #f15;
color: white;
background: blue;
}

a.with-style:hover {
border: 4px double #bbb;
color: #aaa;
text-decoration: none;
background: #e6e6e6;
}

div.c1 { display: inline; }

#footer {
background-color: grey;
text-align: center;
position: absolute;
bottom: 0px;    
height: 8.3%;
width: 100%;
 }

Answer 1

您可以像this article中一样使用CSS3圆角。它很直接，得到了广泛的支持。

另一种选择是使用JQuery及其扩展，JQuery UI实现相同的结果，但增加了与旧浏览器的兼容性。不幸的是，它会略微增加加载时间，并使事情变得更复杂。这样说，它比实现你自己的CSS3和图像混合更简单。

Answer 2

你检查过Raphael.js吗？在我看来很好。您还可以获得曲线和更灵活的选项使用Raphael.js圈http://raphaeljs.com/reference.html#Paper.circle

这是我用Raphael创建的，而不是图表，但会给出你能做什么的想法。

Answer 3

主要使用

    border-radius:50%

总是使div成为一个圆圈，但它与IE 8及以下版本不兼容。因此，如果您不针对这些浏览器，此方法应该有所帮助，否则请使用图像。

Answer 4

您选择的选项取决于您希望实现的浏览器支持。

选项1 - 使用CSS 此选项仅适用于现代浏览器： http://caniuse.com/border-radius 但如果你不关心这个问题，我会选择这个选项。

选项2 - 图像使用此选项，您可以在图形程序（如photoshop，烟花等）中创建大圆形图形。然后将该图形缩小到所需的大小。这个选项更难，需要更多的努力。

对于CSS中的圆圈，请使用“border-radius：50％;”。 50％确保无论div元素的大小是多少，它都将是一个圆圈（如果高度和宽度不同，则为椭圆形）。

但是，如果您尝试创建某些搜索的图表，则可以使用一些库/插件。我最喜欢的是： http://www.highcharts.com/demo/ 这是一个非常广泛的图表库，对于非商业网站是免费的。

使用圆圈的网站

4 个答案: