HTML列表分类:有序列表,无序列表,定义列表
有序列表:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
//输出为
1.Coffee
2.Tea
3.Milk
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
//输出为
50.Coffee
51.Tea
52.Milk
无序列表:使用<ul>标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
//输出为无序,前加点号
(注释:去掉点号,在CSS里设置
list-style:none;
即可)
自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
//输出为
Coffee
- black hot drink
Milk
- white cold drink
表格边框相关:
①表格边框圆角属性设置:
先让table的display:inline-block;(显示内嵌块)然后给table 添加圆角属性border-radius
在table标签里加入
style="display:inline-block"
或者当布局较为简单时直接定义div块级,然后块里加表格
②列表添加表格边框
<table border=1>
<tr>
<td class="width_sort">分类</td>
<td class="width_name">名称</td>
<td class="width_price">单价(元)</td>
<td class="width_unit">单位</td>
<td class="width_cart"></td>
</tr>
</table>
或者CSS里设置
td{
border: 1px solid;
}
③列表宽度设置
可以在HTML里table标签前加入设置:
width 属性规定 col 元素的宽度
通常,col 元素占用的空间就是它显示内容需要的空间,width 属性用于为 col 元素设置预定义的宽度。
注释:该属性会覆盖 colgroup 元素中的任何宽度设置
例:
<col width="value">
<col width="value">
<table border=1>
<tr>
<td></td>
<td></td>
</tr>
</table>
或者定义td类,在CSS里设置宽度
④列表边框重叠
(1)CSS里设置
td{
line-height:60%
}
小于100%时会有重叠,可以设置大些,例:line-height:200%
(2)查看HTML块级区域是否重叠
(3)给元素设置相对位置:
.class{ position: relative; }
注释:绝对位置:position:absolute;
④单元格间距
cellspacing="0" cellpadding="0"单元格贴合
或者还可以:
table
{
border-collapse:collapse;
}
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit规定应该从父元素继承 border-collapse 属性的值。
在table里加border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"
另外,如果在td上加border时,会有空隙,加上上述样式即可【取消空隙】
⑤如果表格边框和字考得太紧,显得太挤时可以用内边框属性
table,th,td{
padding: 10px;
}