CSS，HTML列表属性

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>
//输出为无序，前加点号

（注释：去掉点号，在ＣＳＳ里设置

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;

}

猜你喜欢