html+CSS 进阶

来源:互联网 发布:单片机中断程序编写 编辑:程序博客网 时间:2024/06/03 19:50

这个课讲述html和css中经常用并且十分重要的知识点。

一、内边距padding

举例:

<table border="1">   <tr>       <td style="padding:30px;">           这个表格单元的每个边拥有相等的内边距。        </td>    </tr></table>

padding举例

style="padding:30px 0;"

效果:这里写图片描述

还可以写成:padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)

二、字体font-family

<p>I'm a girl.</p><p style="font-family:Times New Roman">I'm a girl.</p>

这里写图片描述

三、text-align 水平对齐方式

<h1 style="text-align:center;">这是标题1。</h1><h2 style="text-align:right;">这是标题2。</h2><h3 style="text-align:left;">这是标题3。</h3>

这里写图片描述

四、float
漂浮在一行,而不是另起一行。

<p style="float:left;margin-right:30px;">Reactions</p><p style="float:left;margin-right:30px;">Entertainment</p><p style="float:left;margin-right:30px;">Sports</p><p style="float:left;margin-right:30px;">Stickers</p><p style="float:left;">Artists</p>

效果
这里写图片描述

五、position

absolute绝对位置,
img和p都可以用。

<img src="https://resource.bcgame-face2face.haorenao.cn/cxy/html+css/5-3.jpg-255x255" style="position:absolute;top:100px;left:200px;">

这里写图片描述

六、div
分区

<div  style="border:solid 1px;position:absolute;top:300px;left:200px;"><h3>比熊的名字</h3><p style="text-align:center;">502</p></div>

这里写图片描述

END.

原创粉丝点击