Web前端开发——CSS样式（Ⅲ）列表、表格样式

1. 列表

这里的列表样式指的是无序列表u1、有序列表ol的共用样式

1.1 list-style

表示将列表的所有子样式，都放在一个属性当中声明出来

1.2 list-style-image

它可以规定这个列表的标号是一幅图片，起到美化界面的效果

1.2.1 文件组织形式

images内是一幅作为标号的图片

1.2.2 测试代码

  
  



 
	

	相关阅读:
	

	  
迪拜华商财富缩水 瞻望前景信心犹豫
	  
全球华商总资产恢复增至3.9万亿美元
	  
华商基金胡宇权：行业不平衡将带来投资机会
	
	

1.2.4 效果图

可以看到标号前是一副图片

1.3 list-style-type

type属性设置标志的类型，对于无序和有序列表可以取得以下的值：

 

其中前五条针对的是无序列表，第六条开始的表示的数字部分是针对有序列表

1.4 list-style-position

它设置的是这个标号或者说标志的位置，常用的有inside和outside两个取值

1.4.1 测试代码

    
    



    

        
HTML——网页结构
        
CSS——网页样式
        
S——网页交互
    

    

        
HTML-网页结构
        
CSS——网页样式
        
S——网页交互
    

1.4.2 效果图

 

第一段无序列表它的标号是向右缩进到竖线列表的区域之内，第二种无序列表它的标号是突出在这个列表它的左侧，这是inside和outside-个区别

2. 表格

2.1 基本属性

2.2 基本属性测试代码

2.2.1 宽高边界

    
    



    

        

            
内容1
            
内容2
        
        

            
内容1
            
内容2
        
    

 

“table，td”表示同时设置表格和单元格的属性

2.2.2 collapse属性

table{
           width: 500px;
           height: 200px;
           border-collapse: collapse;
       }

在上述代码的table选择器中添加border-collapse的设定，效果如下：

可以看到表格的边框和单元格的边框被合并了，将border-collapse设置成collapse，也就是叠加或者是坍缩的意思，这样表格边框和单元格边框就重叠成一个了

 

2.3 奇偶选择器

表格在星现数据的时候，为了方便观看，格行显示不同的颜色，这种情况下我们用到一种特殊的选择器，这种选择器被称为奇偶选择器

2.3.1 基本语法

tr:nth-child(odd){
            background-color:#EAF2D3;
        }
/*表示：tr的父元素table的奇数个子元素，不管这些子元素是tr还是th*/

2.3.2 测试代码及效果图

    
    



    

        

            
内容1
            
内容2
        
        

            
内容1
            
内容2
        
    

可以看到即使是第一行是th标签，奇偶选择器也是从第一行就开始生效，我们设计表格时往往表头是另一种颜色，这是我们就需要对th标签的样式再设置以下，我们在上述代码中添加：

      th{
            background-color:olivedrab;
        }

 

这个时候我们想要的效果出来了