Experten geben 25 praktische Tipps für das CSS-Webseitenlayout

Dieser Artikel enthält praktische Tipps zum CSS-Webseitenlayout. Ich hoffe, dass er für Freunde hilfreich ist.

1 Das ul-Tag hat in Mozilla standardmäßig einen Füllwert, aber im IE hat nur margin einen Wert.

2. Derselbe Klassenselektor kann wiederholt in einem Dokument erscheinen, der ID-Selektor kann jedoch nur einmal für die CSS-Definition eines Tags verwendet werden Die Definition des Selektors ist gültig, da das Gewicht von ID größer als CLASS ist.

3. Eine dumme Möglichkeit, die Kompatibilität anzupassen (IE und Mozilla): Anfänger können auf eine solche Situation stoßen: Es ist normal, dass dasselbe Label-Attribut im IE als A angezeigt wird, aber es muss in Mozilla angezeigt werden . Für eine normale Anzeige muss der Wert auf B eingestellt sein, sonst sind die beiden vertauscht.

Vorübergehende Lösung: selector {Attributname: B !important; Attributname: A🎜>

4. Wenn zwischen einer Gruppe von Tags ein gewisser Abstand besteht, belassen Sie das Randattribut des innen liegenden Labels, anstatt den Abstand

des außen liegenden Labels zu definieren. 5. Es wird empfohlen, für das Symbol vor dem li-Tag „background-image“ anstelle von „list-style-image“ zu verwenden.

6. IE kann den Unterschied zwischen einer Erbschaftsbeziehung und einer Vater-Sohn-Beziehung nicht unterscheiden.

7. Vergessen Sie beim Hinzufügen von Selektoren zu Ihren Tags nicht, Kommentare zu den Selektoren in CSS hinzuzufügen. Sie werden wissen, warum Sie dies tun, wenn Sie später Ihr CSS ändern.

8. Wenn Sie ein dunkles Hintergrundbild und einen hellen Texteffekt für eine Beschriftung festlegen. Es wird empfohlen, zu diesem Zeitpunkt eine dunklere Hintergrundfarbe für Ihr Etikett festzulegen.

9. Achten Sie bei der Definition der vier Zustände des Links auf die Reihenfolge: Link besucht Hover aktiv

10. Bitte verwenden Sie Hintergrund für Bilder, die nichts mit dem Inhalt zu tun haben

11. Sie können Farben definieren. Abkürzung #8899FF=#89F

12. Tabelle schneidet in einigen Aspekten viel besser ab als andere Tags. Bitte verwenden Sie es dort, wo eine Spaltenausrichtung erforderlich ist.

13. <script> Es sollte wie folgt geschrieben werden: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;script type=”text/javascript”&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>Der Titel ist der Titel, und der Text des Titels ist der Titel. Manchmal muss der Titel nicht unbedingt Text anzeigen, daher ist das Folgende ein Zitatfragment: <p></p><h1>title content</h1> geändert in <h1><span>title content</span> &lt ;/h1><p></p>15. Perfekte Einzelpixel-Umrisstabelle (kann den Test in IE5, IE6, IE7 und FF1.0.4 oder höher bestehen) Das Folgende ist ein zitiertes Fragment: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">table{border-collapse:collapse;} td{border:#000 solid 1px;}</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>16. Negative Randwerte können bei der relativen Positionierung eine Rolle spielen. Wenn die Seite zentriert ist, ist das Attribut left:XXpx nicht für Ebenen mit absoluter Positionierung geeignet. Es empfiehlt sich, diese Ebene neben einem Etikett zu platzieren, das relativ positioniert werden muss, und dann negative Werte für den Rand zu verwenden. <p></p>17. Bei Verwendung der absoluten Positionierung kann der Randwert zur Positionierung relativ zu seiner eigenen Position verwendet werden, was sich von der Positionierung von Attributen wie oben und links relativ zum Fensterrand unterscheidet. Der Vorteil der absoluten Positionierung besteht darin, dass andere Elemente ihre Existenz ignorieren können. <p></p>18. Wenn der Text zu lang ist, ändern Sie den langen Teil in Auslassungspunkte und zeigen Sie ihn an: IE5, FF sind ungültig, können aber ausgeblendet werden, IE6 ist gültig <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">&lt;DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p><NOBR&gt ; Beispielsweise gibt es eine Zeile. Der Text ist sehr lang und kann nicht in einer Zeile in der Tabelle angezeigt werden. </NOBR><p></p>19. Wenn durch Kommentare im IE Probleme mit der Textduplizierung auftreten können, können Sie die Kommentare wie folgt ändern: <p></p><!–[if !IE]> Fügen Sie hier Ihren Kommentar ein…<![endif]–><p></p>20. So verwenden Sie CSS zum Aufrufen externer Schriftarten<p></p>Syntax:<p></p>@font-face{ Schriftfamilie :name;src:url(url);sRules} Wert: <p></p>name: Schriftartname. Jeder mögliche Wert des Attributs „font-family“ <p></p>url (url): Geben Sie die OpenType-Schriftartdatei mit einer absoluten oder relativen URL-Adresse an <p></p>sRegeln: Stylesheet-Definition <p></p> 21 . Wie kann man Text in einem Textfeld in einem Formular vertikal zentrieren? <p></p>Wenn die Verwendung von Zeilenhöhe und Höhengruppierung in FF keine Auswirkung hat, besteht die Möglichkeit darin, die obere und untere Polsterung zu definieren, um den gewünschten Effekt zu erzielen. <p></p>22. Kleine Punkte, auf die Sie bei der Definition des A-Tags achten sollten: <p></p>Wenn wir a{color:red;} definieren, stellt es die vier Zustände von A dar. Wenn Sie möchten Definieren Sie einen Mouseover-Status, definieren Sie einfach a:hover. Die anderen drei Zustände sind die in A definierten Stile. <p></p>Wenn nur ein a:link definiert ist, denken Sie unbedingt daran, die anderen drei Zustände zu definieren! <p></p>23. Nicht alle Stile müssen abgekürzt werden: <p></p>Wenn p{padding:1px 2px 3px 4px} vor dem Stylesheet definiert wird, wird im Folgenden <p></p> verwendet Projekte Es wurde ein weiterer Stil mit 5 Pixel oberer Polsterung und 6 Pixel unterer Polsterung hinzugefügt. <p></p>Wir müssen nicht unbedingt p.style1{padding:5px 6px 3px 4px} schreiben. <p></p>kann als p.style1{padding-top:5px;padding-right:6px;} geschrieben werden,<p></p>Sie haben vielleicht das Gefühl, dass das Schreiben auf diese Weise nicht so gut ist wie das Original, aber Haben Sie jemals darüber nachgedacht? , <p></p> Ihre Schreibweise bestimmt immer wieder den Stil, und Sie müssen nicht die ursprünglichen Werte für die untere Polsterung und die linke Polsterung finden! <p><p>如果以后前一个样式P变了话，你定义的p.style1的样式也要变。</p><p>24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。</p><p>25、几个常用到的CSS样式：</p><p>1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;</p><p>2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。</p><p>3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。</p><p>4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。</p><p>5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；</p><p>6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。</p><p>针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”</p><p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.pictures img { filter: alpha（opacity=45）； } .pictures a:hover img { filter: alpha（opacity=90）； }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>以上就是对CSS网页布局实用小技巧的全部介绍，如果您想了解更多有关<a href="http://www.php.cn/course/list/14.html" target="_self">CSS3教程，请关注PHP中文网。<p><br/><p> </script>

Das obige ist der detaillierte Inhalt vonExperten geben 25 praktische Tipps für das CSS-Webseitenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!