CSS，HTML列表属性

阅读更多

HTML列表分类：有序列表，无序列表，定义列表

有序列表：

  
Coffee
  
Tea
  
Milk

//输出为
1.Coffee
2.Tea
3.Milk

  
Coffee
  
Tea
  
Milk

//输出为
50.Coffee
51.Tea
52.Milk

无序列表：使用

标签

Coffee
Milk

//输出为无序，前加点号

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

list-style:none;

 即可）

自定义列表以

标签开始,每个自定义列表项以

开始,每个自定义列表项的定义以

开始

Coffee
- black hot drink
Milk
- white cold drink

//输出为
Coffee
- black hot drink
Milk
- white cold drink

 

表格边框相关：

①表格边框圆角属性设置：

先让table的display:inline-block;（显示内嵌块）然后给table 添加圆角属性border-radius

 在table标签里加入

style="display:inline-block"

 或者当布局较为简单时直接定义div块级，然后块里加表格

 

②列表添加表格边框

                

                    
分类
                    
名称
                    
单价(元)
                    
单位
                    

                

 或者CSS里设置

td{
    border: 1px solid;
}

 

③列表宽度设置

可以在HTML里table标签前加入设置：

width 属性规定 col 元素的宽度

通常，col 元素占用的空间就是它显示内容需要的空间，width 属性用于为 col 元素设置预定义的宽度。

注释：该属性会覆盖 colgroup 元素中的任何宽度设置

例：

 或者定义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;

}

• 
• 大小: 52.4 KB

• 查看图片附件