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

# HTML && CSS

高洛峰
高洛峰Original
2016-10-15 16:04:332878Durchsuche

1. Div ist links und rechts zentriert

<div>1<div>div{
width;300px;height:300px;margin:0 auto;
}

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; /*等于宽度的一半*/}

3 , links und rechts

background-position:center;

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;
}

5. Über Zeilenumbrüche

white-space:nowrap;/*不换行*/
white-space:normal;/*换行*/

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;}

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;

10

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