H5学习之绝对定位、文本效果

黄良钵

分类: 程序开发 759 0

文本效果

绝对定位、文本的效果:

绝对定位:

<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>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
H5学习、文本效果、绝对定位

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “H5学习之绝对定位、文本效果”

Loading...