流程圖與CSS/HTML

目前我正在試圖讓一個流程圖，這是迄今爲止我已經得到了代碼：流程圖與CSS/HTML

#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」）爲每個部分是粗體和大？（而不是後面的內容，「等等，然後這個等」）

另外，我怎樣才能使圓角，而不是尖銳的邊緣？

來源

2012-03-31 Matthew Galloway

1. font-weight：bold;和font-size：2em; 2.border半徑：3px的; – 2012-03-31 16:10:01

謝謝Sven，但我只想標題而不是文本的其他部分進行更改（我調整了我發佈的內容以使其更清晰）。如果這是我想要的所有文本，我可以自己做足夠的修改:-P :-P – 2012-03-31 16:15:12

然後將您希望顯式更改的文本放在一個類中，然後將樣式附加到該類class – 2012-03-31 16:19:07

爲了使步驟x風格不同，你需要用它在<span class="flowchartHeader">...</span>標籤，然後添加到您的CSS：

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

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

來源

2012-03-31 16:14:25 saluce

不幸的是，我只能選擇一個作爲答案，但我選擇了這一個，因爲它是最「完整」的答案，因爲它回答了我的問題的兩個部分。謝謝！ Stackoverflow上的社區再次給我留下了深刻的印象：--D – 2012-03-31 16:35:50

我做了一個你的魔杖傢伙快速小提琴。 http://jsfiddle.net/jalbertbowdenii/NY973/1/

來源

2012-03-31 16:13:17 albert

乾杯！因爲你的第一個帖子是我一直在使用的:-P 但是，現在我看到其他答覆，我還有一個問題.... 爲什麼你有這個額外的部分，其他人沒有建議： -webkit-border-radius：5px; -moz-border-radius：5px; -MS-邊界半徑：5像素; -0-邊界半徑：5像素; – 2012-03-31 16:27:57

涵蓋所有僅支持供應商前綴的瀏覽器;最後一個，邊界半徑本身就是倒退。它涵蓋了您在更多瀏覽器中的基礎 – albert 2012-03-31 16:41:58

'-webkit'，'-moz'和'-o'分別是Chrome/Safari，Firefox和Opera特定的前綴。他們在屬性中添加了CSS規範之前實現了這些功能（沒有前綴列出）。所有這些瀏覽器和IE的最新版本都支持border-radius屬性，但如果沒有前綴版本，舊版本可能會支持或不支持。 – saluce 2012-04-02 16:05:08

使用此功能可生成圓角CSS你border-radius.com

.myClass{ 

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

}

來源

2012-03-31 16:14:15

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

來源

2012-03-31 16:16:46

流程圖與CSS/HTML

回答

相關問題