Zusammenfassung der CSS-Webseiten-Layout-Tipps

Dieser Artikel enthält eine Zusammenfassung der CSS-Webseiten-Layout-Tipps. Freunde in Not können darauf verweisen.

Es gibt viele Techniken für das CSS-Webseitenlayout. Hier ist eine Zusammenfassung der für Anfänger geeigneten CSS-Webseiten-Layout-Tipps, die für Sie möglicherweise ein praktischerer Referenzwert sind:

1 Das ul-Tag hat standardmäßig einen Auffüllwert, im IE jedoch nur einen Rand ist 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 das Attribut derselben Bezeichnung im IE angezeigt wird, wenn es aktiviert ist ist auf A gesetzt und in Mozilla muss es auf B gesetzt werden, um normal angezeigt zu werden, sonst sind die beiden umgekehrt.

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 Ihr CSS später ä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> sollte so geschrieben sein: <script type="text/JavaScript"><p>Der Titel ist Titel, und der Text des Titels ist der Titeltext. Manchmal muss der Titel nicht unbedingt Text anzeigen, daher wird <h1>Titelinhalt in <h1><span>Titelinhalt<p><🎜; geändert > 15. Perfekte Einzelpixel-Umrisstabelle (kann den Test in IE5, IE6, IE7 und FF1.0.4 oder höher bestehen) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">Example Source Code</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Der Code lautet wie folgt: </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 Extraktion Negative Werte können bei der relativen Positionierung eine Rolle spielen, wenn das Etikett eine absolute Positionierung verwendet. 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;p 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 ändern in: </p><p>Beispielquellcode</p><p>Der Code lautet wie folgt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">&lt;!–[if !IE]&gt;Put your commentary in here…&lt;![endif]–&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>20. So verwenden Sie CSS zum Aufrufen externer Schriftarten </p><p> Syntax: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">@font-face{font-family:name;src:url（url）；sRules}</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Wert: </p><p>Name: Schriftartname. Beliebiger möglicher Wert für das Attribut „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-Zustand, 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>当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式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/></script>

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Webseiten-Layout-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!