绝对定位、文本的效果：
绝对定位：
<html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> div{ width: 400px; height: 400px; /*设置边框*/ border: solid 1px red; position: relative; /*这里使用相对定位relative的目的并不是要让标签偏离原来的位置 而是让它作为子元素的参照物*/ } span:nth-of-type(1){ /*生成的绝对定位*/ position: absolute; top: 20px; } span:nth-of-type(2){ position: relative; top: 11px; } </style> </head> <body> <div> <span>文字1</span> <span>文字2</span> <span>文字3</span> <span>文字4</span> </div> </body> </html>
文本效果：
<html> <head> <meta charset="UTF-8"> <title>文本效果</title> <style> .bold_text{ /*定义字体粗细*/ font-weight: bold; /* normal 定义标准字符 bold 定义粗的字符 bolder 定义更粗的字符 lighter 定义更细的字符 100-900 400 = normal 700 = bold */ } .italic_text{ /*设置字体的样式*/ font-style: italic; /*italic 斜体的字体样式 normal 标准的字体样式*/ } .underline_text{ text-decoration: underline; /*underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 穿过文本的一条线*/ } </style> </head> <body> 普通文本<br> <span>普通文本，span标签没有斜体效果，表示一般内容</span><br><br> <strong>加粗文本，strong标签带有很强的强调含义，用于标示内容的重要性</strong><br> <b>加粗文本，b标签强调含义比较弱</b><br> <span class="bold_text">加粗文本 使用样式形成加粗效果 没有任何强调的意味</span><br><br> <em>斜体文本 em标签带有很强的强调含义 用于标签内容的重要性</em><br> <i>斜体文本 i标签强调含义比较弱</i><br> <span class="italic_text">斜体文本 使用样式形成斜体效果 没有任何强调意味</span><br><br> <ins>下划线文本 ins带有插入含义 表示新增的内容</ins><br> <u>下划线文本 u标签没有特殊含义 只是增加下划线效果</u><br> <span class="underline_text">下划线文本 使用样式形成下划线效果 没有任何强调意味</span><br><br> <del>删除线文本 del带有很强的删除含义 表示已经废除的内容</del><br> <s>删除线文本 含义弱</s><br><br> 普通文本<br> <small>小字号 比正常字号略小的文本</small><br><br> <sup>上标文字</sup>正常字号<sub>下标文字</sub> </body> </html>
