1

我父亲一直想要一个带有研讨会图表的网站，该图表由连接它们的圆圈和线条组成，作为他网站上文章的主要导航。该网站将有一个页眉和页脚，以及像图表一样的研讨会（有点像流程图，但只有圆圈）。我不是程序员，我想为我父亲做这件事。做了一些研究，发现了两种选择。使用图像作为圆圈或使用 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%;
 }
4

4 回答 4

1

您可以使用本文中的 CSS3 圆角。它直截了当，并得到广泛支持。

另一种选择是使用 JQuery 及其扩展，即 JQuery UI，它实现了相同的结果，但增加了与旧浏览器的兼容性。不幸的是，它会稍微增加加载时间，并使事情变得更加复杂。话虽如此，这比实现自己的 CSS3 和图像组合作为后备要简单。

于 2013-03-05T04:44:15.313 回答
1

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

这是我使用 Raphael 创建的东西，不是图表，但会给出你可以做什么的想法。

http://jsfiddle.net/Ajinkya_Parakh/J3zJF/embedded/result/

于 2013-03-05T05:50:50.263 回答
0

主要使用

    border-radius:50%

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

于 2013-03-05T05:42:57.897 回答
0

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

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

选项 2 - 图像 使用此选项，您想在 Photoshop、烟花等图形程序中创建一个大圆形图形。然后将该图形缩小到您想要的大小。这个选项更难，需要更多的努力。

对于 CSS 中的圆圈，使用“border-radius: 50%;”。50% 确保无论 div 元素是什么大小，它始终是一个圆形（如果高度和宽度不同，则为椭圆形）。

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

于 2013-03-05T06:03:52.893 回答