您的位置 首页 技术

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

本文目标: 1、掌握CSS中结构性伪类选择器—nth-child的用法 问题: 1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-child 当鼠标悬停在…

本文目标:

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

问题:

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

实现目标.png

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

实现目标2.png

附加说明:

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>

最终运行效果如下:

实现目标.png

实现目标2.png

总结:

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

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

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/72588.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部