欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

程序员文章站 2022-03-15 18:42:02
...

本文目标:

1、掌握CSS中结构性伪类选择器—nth-child的用法

问题:

1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-child

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

当鼠标悬停在某个单元格上时,背景变成紫色

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

附加说明:

1、每个单元格宽145,带1个像素边框,左边padding为5,上下padding为15

2、标题字体为20px,加粗

现在来具体操作

1、准备素材:无,不需要准备额外的素材图片

2、创建好index.html,写好架构,架构如何分析呢

思路分析:

1、目标其实是一张表格,我们可以通过很多方式实现它,但是为了更好的显示出nth-child的作用,我们就用ul,li来布局

2、每个li的颜色都是规律性的变化

好,先按照分析,写好思路,暂时不管css的实现

代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-child</title>
</head>

<body>
    <div class="table">
        <div class="caption">项目基本情况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通状况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>销售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目标消费群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>竣工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>销售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>停车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

3、写样式 ,创建css文件夹,里面新建index.css,里面的样式怎么写了,以下是分析思路

思路分析:

整体表格.table

1、根据要求得知,每列的宽是均分的,所以该容器的宽=145*4+8个边框 = 608,且带灰色边框显示

所以index.css中添加代码如下:

.table {
   width: 608px;
   border: 1px solid gray;
}

标题

1、背景色为灰色,字体颜色为白色,上下存有间距,字体大小为20,加粗,居中显示

所以index.css中添加代码如下:

.caption {
   background-color: gray;
   color: white;
   padding: 15px 0px;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

ul,li

1、ul默认是有padding,所以为了不影响布局,需要取消默认padding,margin

2、根据以上要求,li不带黑色圆点,带灰色边框,宽145,上下存有间距,且水平排列所以必须要浮动float

所以index.css中添加代码如下:

ul{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
   border:1px solid lightgray;
   width: 145px;
   padding:15px 0 15px 5px;
   float: left;
}

清除浮动的li

1、为了让ul还是能包裹住浮动的li,所以最后一列要清除浮动,但是为了不影响布局,所以宽高要设置0,padding,margin也要设置0,否则也还是会有padding

所以index.css中添加代码如下:

.clear{
   width:0;
   height: 0;
   float: none;
   clear: both;
   padding: 0;
   margin: 0;
}

带红色字体的li

1、我们发现带红色字体的li,其实它的li的序号分别为3,7,11,15,19,23......这个是有规律的,所以我们可以使用nth-child选择器来实现,nth-child()括号里可以填写表达式,比如2n这些,表达式的n是从0开始的,所以根据这个规律我们可以得出表达式为4n+3,我们可以把n从0开始代入可以发现会得出序号3,7,11,15,19,23......所以表达式是对的

所以index.css中添加代码如下:

ul>:nth-child(4n+3){
   color:red;
}

带绿色字体的li

1、我们发现带绿色字体的li,其实它的li的序号分别为1,5,9,13,17,21,25.....这个也是有规律的,所以我们可以使用nth-child选择器来实现,那么这个表达式怎么写呢,仔细研究发现表达式为

4n+1,我们可以把n从0开始代入可以发现会得出序号1,5,9,13......所以表达式是对的

所以index.css中添加代码如下:

ul>:nth-child(4n+1){
   color:green;
}

带蓝色字体的li

1、我们发现带蓝色字体的li,其实它的li的序号分别为2,4,6,8,10,12.....这个也是有规律的,其实就是偶数列,只是少了0,所以我们可以使用nth-child选择器来实现,那么这个表达式怎么写呢,仔细研究发现表达式为2n+2,我们可以把n从0开始代入可以发现会得出序号2,4,6,8,10,12......所以表达式是对的,其实表达式也可以写成2n,只不过因为0列不存在所以也是对的,不影响最终效果

所以index.css中添加代码如下:

ul>:nth-child( 2n+2 ){
   color:blue;
}

最后4列

1、最后4列(序号为33,34,35,36的li)我们发现底部边框是不需要的,所以需要去除掉,因为最外层的容器的已经有个边框了

所以index.css中添加代码如下:

ul>:nth-child(33){
   border-bottom: 0;
}
ul>:nth-child(34){
   border-bottom: 0;
}
ul>:nth-child(35){
   border-bottom: 0;
}
ul>:nth-child(36){
   border-bottom: 0;
}

鼠标悬浮效果

1、当鼠标悬浮的时候,背景需要变色变成紫色

所以index.css中添加代码如下:

li:hover{
   background-color: plum;
   cursor: pointer;
}

到此为止,index.css代码如下:

.table {
   width: 608px;
   border: 1px solid gray;
}
.caption {
   background-color: gray;
   color: white;
   padding: 15px 0px;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

ul{
   padding: 0;
   margin: 0;
}
li{
   list-style: none;
   border:1px solid lightgray;
   width: 145px;
   padding:15px 0 15px 5px;
   float: left;
}
.clear{
   width:0;
   height: 0;
   float: none;
   clear: both;
   padding: 0;
   margin: 0;
}

ul>:nth-child(4n+3){
   color:red;
}
 ul>:nth-child(4n+1){
   color:green;
}
ul>:nth-child( 2n+2 ){
   color:blue;
}
ul>:nth-child(33){
   border-bottom: 0;
}
ul>:nth-child(34){
   border-bottom: 0;
}
ul>:nth-child(35){
   border-bottom: 0;
}
ul>:nth-child(36){
   border-bottom: 0;
}
li:hover{
   background-color: plum;
   cursor: pointer;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-child</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="table">
        <div class="caption">项目基本情况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通状况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>销售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目标消费群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>竣工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>销售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>停车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

最终运行效果如下:

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

总结:

1、学习了结构性伪类选择器—nth-child的用法,这里的难点就是在于要写表达式,所以写表达式的时候需要多花点耐心去总结规律

以上就是结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )的详细内容,更多请关注其它相关文章!

相关标签: CSS