Heim > Web-Frontend > HTML-Tutorial > # HTML && CSS

# HTML && CSS

高洛峰
Freigeben: 2016-10-15 16:04:33
Original
2878 Leute haben es durchsucht

1. Div ist links und rechts zentriert

<div>1<div>div{
width;300px;height:300px;margin:0 auto;
}
Nach dem Login kopieren

2. Div ist oben, unten, links und rechts zentriert

<div class=&#39;father&#39;>
   <div class=&#39;son&#39;></div></div>.son{position:absolute;top:50%;left:50%;width:300px;heigeht:300px;
margin-top:-150px; /*等于高度的一半*/margin-left:-150px; /*等于宽度的一半*/}
Nach dem Login kopieren

3 , links und rechts

background-position:center;
Nach dem Login kopieren

4. Der Rand wird zu einem kleinen Dreieck
, um ein kleines Dreieck mit einer Breite von 10 Pixeln zu erhalten, wobei Schwarz nach unten zeigt und die Hintergrundfarbe rot ist

div{
width:0;
height:0;
border:10px solid red;
border-top-color:black;
}
Nach dem Login kopieren

5. Über Zeilenumbrüche

white-space:nowrap;/*不换行*/
white-space:normal;/*换行*/
Nach dem Login kopieren

6. Über das Problem der Randübergabe
kann durch Hinzufügen eines Rahmens zum übergeordneten Element

7. Löschen Sie den Standardstil

body,h1,h2,h3,h4,h5,h6,dl,dd,p{marhon:0;}
ul,ol{margin:0; padding:0;}
th.td{padding:0;}
Nach dem Login kopieren

8. Tabelle

<table border=&#39;1&#39;>
<thead><tr><th>sex</th><th>age</th></tr></thead>
<tbody>
<tr><td>man</td><td>18</td></tr>
<tr><td>female</td><td>28</td></tr>
</tbody>

table{border-collapse:collapse;}
跨行合并:rowspan;
跨列合并:colspan;
Nach dem Login kopieren

10

/*for和id相同*/<label for=&#39;username&#39;>用户名</lable>
<input type=&#39;text&#39; id=&#39;username&#39; value=&#39;Input your name&#39;/>
Nach dem Login kopieren
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