美文网首页我爱编程
html学习----标签(二)

html学习----标签(二)

作者: 这个姑凉儿 | 来源:发表于2018-04-16 11:25 被阅读0次

    标签

    此篇所记标签

    • &nbsp空格占位符
    • tabletr代表列,td代表行,th代表表头, cellpadding表格左右间距 、cellspacing表格上下间距,colspan跨列,rowspan跨行
    • ul:无序列表 (style="list-style-type:disc"圆点列表,style="list-style-type:circle"圆圈列表,style="list-style-type:square"正方形列表)
    • ol:有序列表(type="A"大写字母列表,type="a"小写字母列表,type="I"罗马数字列表,type="i"小写罗马数字列表)
    • li:定义列表项
    • dl:定义列表
    • dt:自定义列表项目
    • dd: 定义自列表项的描述
    html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>web学习</title>
        <link rel="stylesheet" href="text.css"> <!-- 引用外部的css -->
    </head>
    <body>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="center" class="biaoti" height="60">统计表</td>
        </tr>
        <tr>
            <td align="right" height="25">2018-04-16---2018-05-02</td>
        </tr>
    </table>
    
    
    <table border="0" width="100%" cellspacing="1" cellpadding="4" class="tabtop13" bgcolor="#cccccc">
        <tr>
            <td rowspan="2" class="btbg font-center titfont">姓名</td>
            <td rowspan="2" class="btbg font-center titfont">年龄</td>
            <td colspan="2" class="btbg font-center titfont">爱好</td>
            <td colspan="3" class="btbg font-center titfont">身体指标</td>
        </tr>
        <tr>
            <td class="btbg font-center titfont">游泳</td>
            <td class="btbg font-center titfont">绘画</td>
            <td class="btbg font-center titfont">体重</td>
            <td class="btbg font-center titfont">身高</td>
            <td class="btbg font-center titfont">心率</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr>
            <td class="btbg font-center titfont">合计</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
    </table>
    </body>
    </html>
    
    css:
    @charset "utf-8";
    /* CSS Document */
    .tabtop13 {
        margin-top: 13px; /*margin-top 属性设置元素的上外边距*/
    }
    .tabtop13 td{
        background-color:#ffffff;
        height:25px;
        line-height:150%;
    }
    .font-center{ text-align:center}
    .btbg{background:#e9faff !important;}
    .biaoti{
        font-family: 微软雅黑;
        font-size: 26px;
        font-weight: bold;
        border-bottom:1px dashed #CCCCCC;
        color: #255e95;
    }
    .titfont {
    
        font-family: 微软雅黑;
        font-size: 16px;
        font-weight: bold;
        color: #255e95;
        background: url(../images/ico3.gif) no-repeat 15px center;
        background-color:#e9faff;
    }
    
    
    //无序列表
    <ul>
        <li>coffee</li>
        <li>tea</li>
        <li>milk</li>
    </ul>
    //有序列表
    <ol  type="A">
        <li>coffee</li>
        <li>tea</li>
        <li>milk</li>
    </ol>
    
    <dl>
      <dt>Coffee</dt>
      <dd>- black hot drink</dd>
      <dt>Milk</dt>
      <dd>- white cold drink</dd>
    </dl>
    
    

    相关文章

      网友评论

        本文标题:html学习----标签(二)

        本文链接:https://www.haomeiwen.com/subject/rxslkftx.html