1

父は、自分のサイトの記事への主要なナビゲーションとして、円と線で構成されるセミナー チャートを備えた Web サイトを常に望んでいました。サイトにはヘッダーとフッターがあり、その間にセミナーのようなチャート（フローチャートのようなものですが、円のみ）があります。私はプログラマーではありませんが、父のためにこれをやりたいと思っています。いくつかの調査を行い、2つのオプションを見つけました。画像を円として使用するか、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

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 に答える
1

この記事のように、CSS3 の丸みを帯びた角を使用できます。それは簡単で、広く支持されています。

もう 1 つのオプションは、JQuery とその拡張機能である JQuery UI を使用することです。これにより、同じ結果が得られますが、古いブラウザーとの互換性が向上します。残念ながら、ロード時間がわずかに長くなり、物事が少し複雑になります。そうは言っても、CSS3 と画像の独自の調合をフォールバックとして実装するよりも簡単です。

于 2013-03-05T04:44:15.313 に答える
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 に答える