全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[来宾seo公司认准久澳]结构性伪类选择器—nth-child实现彩色表格案例(代码实

  

本文目标:

 

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

  

问题◆▪:

 

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

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

  附加说明:

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

  2●○、标题字体为20px◆☆△●,PS教程加粗

  

现在来具体操作

 

  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文件夹,H5教程里面新建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.....这个也是有规律的,其实就是偶数列,[南充seo公司推荐久澳]除了 async 速度翻 10 倍,JavaScript 还带来了什么?,只是少了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▪•◇、当鼠标悬浮的时候,[来宾seo公司认准久澳]背景需要变色变成紫色

  所以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>••••;

 

  最终运行效果如下-•▼-:

  

总结:

 

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

  以上就是结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )的详细内容•▲▷,更多请关注久澳传媒编程栏目其它相关文章★-!

[来宾seo公司认准久澳]结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。