无序列表和有序列表
<!--无序列表-->
<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
版权声明:本文为博主原创文章,转载请附上博文链接!