Home > Web Front-end > HTML Tutorial > # HTML && CSS

# HTML && CSS

高洛峰
Release: 2016-10-15 16:04:33
Original
2890 people have browsed it

1. The Div is centered left and right

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

2. The Div is centered up, down, left, and right

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

3. The background image is centered up, down, left, and right

background-position:center;
Copy after login

4. The border becomes a small triangle
We get a small triangle with a width of 10px, a black downward direction, and the background The color is red

div{
width:0;
height:0;
border:10px solid red;
border-top-color:black;
}
Copy after login

5. About line wrapping

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

6. Regarding the transmission problem of margin-top
It can be solved by adding a border to its parent element

7. Clear the default style

body,h1,h2,h3,h4,h5,h6,dl,dd,p{marhon:0;}
ul,ol{margin:0; padding:0;}
th.td{padding:0;}
Copy after login

8. Table

<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;
Copy after login

9. Form

/*for和id相同*/<label for=&#39;username&#39;>用户名</lable>
<input type=&#39;text&#39; id=&#39;username&#39; value=&#39;Input your name&#39;/>
Copy after login

10. Clear float

.clearfix:after{
display:block;
content:&#39;&#39;;
clear:both;
}
.clearfix{
zoom:1;  /* for IE6*/
}
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template