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

最新推荐文章于 2024-09-23 09:42:41 发布

OSurer

最新推荐文章于 2024-09-23 09:42:41 发布

阅读量7k

点赞数 4

分类专栏： Web前端开发文章标签： CSS样式列表表格奇偶选择器

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104166092

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 列表

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

1.1 list-style

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

1.2 list-style-image

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

1.2.1 文件组织形式

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

1.2.2 测试代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
<style type="text/css">
	#othernews {
		text-align:left;
		font-size:14px;
		line-height:1.5em;
		list-style-image:url(images/bullet1.gif);
	}
	a:link {
		color: #09f;/*浅蓝*/
		text-decoration: none;
	}
	a:visited {
		text-decoration: none;
		color: #930;/*红*/
	}
	a:hover {
		text-decoration: underline;
		color: #03c;/*深蓝*/
	}
	a:active {
		text-decoration: none;
		color: #03c;/*深蓝*/
	}
</style>
</head>

<body> 
	<div id = "othernews">
	相关阅读:
	<ul>
	  <li><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></li>
	  <li><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></li>
	  <li><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a></li>
	</ul>
	</div>
</body>
</html>

1.2.4 效果图

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

1.3 list-style-type

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

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

1.4 list-style-position

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

1.4.1 测试代码

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .inside{
            list-style-position: inside;
        }
        .outside{
            list-style-position: outside;
        }
    </style>
</head>

<body>
    <ul class="inside">
        <li>HTML——网页结构</li>
        <li>CSS——网页样式</li>
        <li>S——网页交互</li>
    </ul>

    <ul class="outside">
        <li>HTML-网页结构</li>
        <li>CSS——网页样式</li>
        <li>S——网页交互</li>
    </ul>
</body>
</html>

1.4.2 效果图

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

2. 表格

2.1 基本属性

2.2 基本属性测试代码

2.2.1 宽高边界

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
       table{
           width: 500px;
           height: 200px;
       }
        table,td{
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </table>
</body>
</html>

“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 测试代码及效果图

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
       table{
           width: 500px;
           height: 200px;
           border-collapse: collapse;
       }
        table,td{
            border: 1px solid #eee;
        }
        tr:nth-child(odd){
            background-color:#EAF2D3;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
    </table>
</body>
</html>

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

      th{
            background-color:olivedrab;
        }

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