带有 CSS/HTML 的流程图答案

【问题标题】：Flowchart with CSS/HTML带有 CSS/HTML 的流程图
【发布时间】：2012-03-31 16:06:05
【问题描述】：

目前我正在尝试制作流程图，这是我目前得到的代码：

 #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”）变粗并变大？（而不是后面的内容，“等等等等”）

另外，如何制作圆角而不是锐边？

【问题讨论】：

1.字体粗细：粗体；和字体大小：2em； 2.border-radius:3px;
感谢 Sven，但我只想更改标题而不是其余文本（我调整了我发布的内容以使其更清晰）。如果这是我想要更改的所有文本，我知道自己可以这样做:-P :-P
然后将您想要明确更改的文本放在一个带有类的跨度中，并将样式附加到该类

标签： html css rounded-corners flowchart html-heading

【解决方案1】：

我对你的魔杖做了一个快速的摆弄，伙计。 http://jsfiddle.net/jalbertbowdenii/NY973/1/

【讨论】：

干杯！正如您首先发布的内容是我一直在使用的：-P 但是，现在我看到其他回复，我还有一个问题....为什么您有其他人没有建议的额外部分：- webkit-border-radius: 5px; -moz-边界半径：5px； -ms-边界半径：5px； -0-border-radius:5px;
涵盖了所有只支持供应商前缀的浏览器；最后一个，边界半径本身，只是后备。它涵盖了您在更多浏览器中的基础
-webkit、-moz 和 -o 分别是特定于 Chrome/Safari、Firefox 和 Opera 的前缀。他们在属性中添加 CSS 规范之前实现了这些功能（没有前缀列出）。所有这些浏览器和 IE 的最新版本都支持border-radius 属性，但如果没有前缀版本，旧版本可能支持也可能不支持。

【解决方案2】：

要使 Step x 样式不同，您需要将其包装在 <span class="flowchartHeader">...</span> 标记中，然后将其添加到您的 CSS：

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

至于四舍五入，将border-radius: 6px添加到.no1。

【讨论】：

不幸的是，我只能选择一个作为答案，但我选择了这个，因为它是最“完整”的答案，因为它回答了我问题的两个部分。谢谢！ Stackoverflow 的社区再次给我留下了深刻的印象：-D

【解决方案3】：

使用它为您生成圆角 css border-radius.com

.myClass{

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

}

【讨论】：

【解决方案4】：

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

【讨论】：