最新某某《 前端小白入门系列课程》

无序列表和有序列表
<!--无序列表-->
<ul style="list-style: none">   <!--unorder  line       去掉小圆点style="list-style: none(squre为正方形)"-->
    <li>李白</li>
    <li>杜甫</li>
    <li>申公豹</li>
</ul>
 
<!--ul>li*5  会出现一个ul嵌套5个li-->
 
<!--有序列表   ol order list  type="a"  start="3"以小写字母开始,从字母的第三个位置开始-->
<ol>
    <li>123</li><!--按住鼠标滚轮往下拖动鼠标,就会一次输入多个相同的数据-->
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>
 
<ol type="I" start="1">
    <li style="height:50px">你好</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
 
<!--自定义列表 define list-->
<!--缩进属性 text-indent:32px-->
<dl>
    <dt style="height:30px;text-indent: 44px">配送方式</dt>  <!--define title标题-->
    <dd>上门自提</dd>  <!--数据 define data-->
    <dd>上门自提</dd>
</dl>
表格
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式css
    1.写到标签身上 行内   缺点:冗杂  没有实现结构和样式相分离
    2.文本内样式,语法:在head标签里引入一个style标签
    优点:符合标准,样式分离
    注意:必须写到head标签里
    -->
    <style>
        /*挑谁? 挑选过程--》css选择器--》选择元素
        方式1:标签选择器{
            写你给这些元素加的公共样式(属性名字:属性值;)
                    }
        align更多强调的是文本局中
        */
        td{
            width: 100px;
            background-color: blue;
            color: darkred;
            /*文本局中*/
            text-align: center;
        }
    </style>
</head>
<body>
 
 
<!--表格 table-->
 
<!--
跨行:从上到下 rowspan="跨越的行数"  colspan="跨越的列数"
-->
<table align="center" border="1" cellpadding="10px" cellspacing="0px"> <!--align="center" border="1"表格局中,边框大小为1,cellpadding="10px设置单元格内容与边框的距离,cellspacing="0px"边框之间的距离-->
 
    <!--标题-->
    <caption style="font-size: 30px;color: burlywood">产品信息</caption>
    <!--表格头部-->
    <thead>
    <!--行 tr table row-->
    <tr style="height: 50px">
 
        <!--th作为字段的话是自动局中的-->
        <th>序号</th>
        <th>名称</th>
        <th>评价</th>
    </tr>
    </thead>
 
    <!--表格身体-->
    <tbody>
    <tr>
        <td colspan="2">1001</td>  <!--跨行合并-->
        <!--<td>枣花</td>-->  <!--合并后把下一列注释掉-->
        <td rowspan="2">好用</td><!--跨列合并-->
    </tr>
    <tr>
        <td>1002</td>
        <td>梨花</td>
        <!--<td>好用</td>-->
    </tr>
    <tr>
        <td>1003</td>
        <td>贴花</td>
        <td>真好用</td>
    </tr>
    </tbody>
</table>
<!--结构和样式相分离-->
 

--------------------- 
作者:一匹脱缰的野马 
来源:CSDN 
原文:https://blog.csdn.net/qq_39112101/article/details/88660630 
版权声明:本文为博主原创文章,转载请附上博文链接!

猜你喜欢

转载自blog.csdn.net/zuiren777/article/details/88759535