Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Einige Details, die beim Layout von div+css beachtet werden sollten

炎欲天舞
Freigeben: 2017-08-03 17:16:32
Original
1345 Leute haben es durchsucht

 Der erste zu beachtende Punkt: die Verwendung von Selektoren (Label, Klasse, ID)

Unter den drei Selektoren hat ID (#) die höchste Priorität, Filter basierend auf ID Benennen Sie das eindeutige Element aus;

Geben Sie Folgendes ein:

Die zweite ist Klasse (.), die eine höhere Priorität hat und wird basierend auf dem ID-Namen herausgefiltert. Das eindeutige Element wird wie folgt eingegeben:
#menu{ width:1200px; height:45px; background:#90F}
<p id="menu"></p>
Nach dem Login kopieren

The Die Etikettenpriorität ist am schlechtesten und wird entsprechend dem Etikettennamen ausgewählt.

Eingabe wie folgt:
.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}
<p class="text"></p>
Nach dem Login kopieren

 

p{text-align:center; vertical-align:middle; line-height:100px}
<p>微软雅黑</p>
Nach dem Login kopieren
Der zweite Hinweis: Rand, Polsterung und Die Verwendung von Floating Float

Die Verwendung von Außenrand und Innenrandpolsterung wird relativ zum Rand angepasst. Die vier Ränder werden im Uhrzeigersinn entsprechend oben, rechts angepasst , unten und links;

Besondere Verwendung: Der äußere Rand wird im Allgemeinen in Verbindung mit dem Fließschwimmer verwendet. Der Fließschwimmer gibt eine Richtung für das betätigte Objekt an (von links nach links, von rechts nach links). rechts) und das bediente Objekt wird in dieser Richtung angeordnet Wie folgt (Erstellung der Navigationsleiste):

Zusätzlich Polsterung: Wenn Polsterung hinzugefügt wird, wird das Element wird entsprechend größer und muss im entsprechenden Höhenattribut sein. Nehmen Sie Anpassungen vor:

.text{ 
       width:200px; 
    height:45px; 
    float:left; 
    text-align:center; 
    line-height:45px; 
    vertical-align:middle
   }    
.text:hover{ 
            background-color:#000; 
       color:#F00; 
      cursor:pointer
      }
  <p id="menu">
    <p class="text">首页</p>        
    <p class="text">产品介绍</p>        
    <p class="text">产品图片</p>        
    <p class="text">产品参数</p>        
    <p class="text">关于服务</p>        
    <p class="text">联系我们</p>  
  </p>
Nach dem Login kopieren
 

Der dritte Hinweis: Bedingungen für die Verwendung hierarchischer Z- Index

Hierarchisch verwenden Der Z-Index muss in Verbindung mit dem Positionsattribut angepasst werden, wenn die Einstellung des Attributs Position fehlt, gibt es keinen Anzeigeeffekt.
<p style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></p>(这里height由100px调整为80px,加padding效果)
Nach dem Login kopieren

Geben Sie wie folgt ein:

Das obige ist der detaillierte Inhalt vonEinige Details, die beim Layout von div+css beachtet werden sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!