web前端|css教程
CSS
web前端-css教程
本文目标：
个人中心的html源码,ubuntu资源管理,tomcat7和15的区别,可爱便宜的爬虫,百度早年用php吗,seo布局方式lzw
1、掌握CSS中结构性伪类选择器—nth-child的用法
股票 交易源码,ubuntu 多硬盘 挂载,tomcat一闪没了,爬虫数据修改,如何启动php子进程,开眼数据+seolzw
问题：
问卷调查统计分析平台 源码,vscode调试断点无效,ubuntu sim卡,tomcat 请求耗时,用sqlite3创建库,动物园之星怎么建爬虫馆,php 登陆界面代码,专业seo优化包括什么,织梦网站更改,微信公众号最新模板下载安装lzw
1、实现以下效果，且使用纯DIV+CSS，必须使用结构性伪类选择器—nth-child
当鼠标悬停在某个单元格上时，背景变成紫色
附加说明：
1、每个单元格宽145，带1个像素边框，左边padding为5，上下padding为15
2、标题字体为20px，加粗
现在来具体操作
1、准备素材：无，不需要准备额外的素材图片
2、创建好index.html，写好架构，架构如何分析呢
思路分析：
1、目标其实是一张表格，我们可以通过很多方式实现它，但是为了更好的显示出nth-child的作用，我们就用ul,li来布局
2、每个li的颜色都是规律性的变化
好，先按照分析，写好思路，暂时不管css的实现
代码如下：
项目基本情况
项目名称 xxxxxx 地理位置 xxxxxx 交通状况 xxxxxx 开发商 xxxxxx 销售代理公司 xxxxxx 商业运营公司 xxxxxx 项目性质 xxxxxx 功能定位 xxxxxx 目标消费群 xxxxxx 开盘时间 xxxxxx 竣工时间 xxxxxx 开业时间 xxxxxx 售楼电话 xxxxxx 销售招商位置 xxxxxx 总建筑面积 xxxxxx 商业面积 xxxxxx 停车位面积 xxxxxx 产权年限 xxxxxx
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中
项目基本情况
项目名称 xxxxxx 地理位置 xxxxxx 交通状况 xxxxxx 开发商 xxxxxx 销售代理公司 xxxxxx 商业运营公司 xxxxxx 项目性质 xxxxxx 功能定位 xxxxxx 目标消费群 xxxxxx 开盘时间 xxxxxx 竣工时间 xxxxxx 开业时间 xxxxxx 售楼电话 xxxxxx 销售招商位置 xxxxxx 总建筑面积 xxxxxx 商业面积 xxxxxx 停车位面积 xxxxxx 产权年限 xxxxxx
最终运行效果如下：
总结：
1、学习了结构性伪类选择器—nth-child的用法，这里的难点就是在于要写表达式，所以写表达式的时候需要多花点耐心去总结规律
