Блок-схема с CSS / HTML

Question

В настоящее время я пытаюсь создать блок-схему, вот код, который я получил до сих пор:

 #flowchart {
        width: 580px; 
        text-align: center;
        font-family: sans-serif;
        font-size: .8em;
        margin: auto;
    }  
    #flowchart a {
        display: block;
        color: white;
        text-decoration: none;
        background-color: #2F41B1;
        padding: 2em 1em;
    }
    #flowchart a:hover {
        color: #111;
        background-color: #EFA707;
    }
    .no1 {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
    }
    .line1 {
        width: 1px;
        height: 20px;
        background-color: #000;
        margin: 0 auto;
    } 
    .clear {
        clear:both;
    }         

    <div id="flowchart">
        <div class="no1"><a href="http://example.com/page1">Step 1:
    Blah blah blah, do this.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="http://example.com/page2">Step 2: 
    Then this and that.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="example.com/page3">Step 3: 
    Now finally go here and there.</a></div>
    
    </div>​

Как сделать так, чтобы только заголовки ("шаг x") для каждого раздела были жирными и большими? (а не содержание после "бла-бла, это и т. д.")

Кроме того, как я могу сделать закругленные углы вместо острых краев?

Answer 1

Я быстро поигрался с тем, что ты, палочка, чувак. http://jsfiddle.net/jalbertbowdenii/NY973/1/

Answer 2

Чтобы стиль Step x был другим, вам нужно обернуть его в тег <span class="flowchartHeader">...</span>, а затем добавить его в свой CSS:

.flowchartHeader {
    font-size: 1.2em;
    font-weight: bold;
}

Что касается округления, добавьтеborder-radius: 6px до .no1.

Answer 3

 .no1
    {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
        border-radius:5px;  //add this
    }

Answer 4

Используйте это, чтобы сгенерировать css для круглых углов border-radius.com

.myClass{

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

}