Flowchart mit CSS/HTML

Derzeit Ich versuche, ein Flussdiagramm zu machen, das ist der Code, den ich bisher habe:Flowchart mit 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>

Wie kann ich nur die Überschriften machen ("Schritt x") für jeden Abschnitt fett und größer? (und nicht der Inhalt nach, "blah blah dann das usw.")

Auch, wie kann ich abgerundete Ecken statt scharfe Kanten machen?

Quelle

2012-03-31 Matthew Galloway

1. Schriftgrad: fett; und Schriftgröße: 2em; 2.border-Radius: 3px; –

Danke Sven, aber ich will nur die Überschriften und nicht den Rest des Textes geändert werden (ich zwickte, was ich postete, um das klarer zu machen). Wenn es der gesamte Text war wollte ich die Änderung vorgenommen werden, ich weiß genug, um das selbst zu tun :-P :-P –

dann legen Sie den Text, der explizit in einer span mit einer Klasse geändert werden soll und fügen Sie die Stile an Klasse –

den Step x anders gestylt zu machen, können Sie es in einem <span class="flowchartHeader">...</span> Tag wickeln müssen, dann fügen Sie diese zu Ihrem CSS:

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

Wie zum Runden, fügen border-radius: 6px-.no1.

Quelle

2012-03-31 16:14:25 saluce

Leider konnte ich nur eine als Antwort auswählen, aber ich wählte diese, weil es die "vollständigste" Antwort war, weil sie beide Teile meiner Frage beantwortet hat. Vielen Dank! Ich bin wieder sehr beeindruckt von der Community bei Stackoverflow :-D –

Ich machte eine schnelle Geige von dem, was Sie Zauberstab Kumpel. http://jsfiddle.net/jalbertbowdenii/NY973/1/

Quelle

2012-03-31 16:13:17 albert

Prost! Als deins wurde zuerst geschrieben, was ich verwendet habe :-P Allerdings sehe ich jetzt die anderen Antworten Ich habe noch eine Frage .... Warum haben Sie diese extra Portion, die die anderen nicht haben vorgeschlagen: -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -0-Rand-Radius: 5px; –

, die alle Browser abdeckt, die nur Anbieterpräfixe unterstützen; der letzte, Grenzradius an sich, ist nur der Fallback. Es deckt Ihre Basis in mehreren Browsern ab. – albert

'-webkit',' -moz' und '-o' sind Präfixe, die für Chrome/Safari, Firefox bzw. Opera spezifisch sind. Sie haben diese Funktionen implementiert, bevor die CSS-Spezifikation im Attribut hinzugefügt wurde (das ohne das Präfix aufgeführt ist). Die neueste Version all dieser Browser und IE unterstützt das border-radius-Attribut, aber ältere Versionen unterstützen es möglicherweise ohne die Präfix-Version. – saluce

verwenden die runden Ecken CSS zu generieren für Sie border-radius.com

.myClass{ 

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

}

Quelle

2012-03-31 16:14:15

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

Quelle

2012-03-31 16:16:46

Antwort

Verwandte Themen