备案控制台
开发者社区 开发与运维 文章 正文

伪类选择器设置奇偶数标签(1+X Web前端开发 例题)

2022-11-04 191
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 伪类用于定义元素的特殊状态。 例如，它可以用于：设置鼠标悬停在元素上时的样式，为已访问和未访问链接设置不同的样式，设置元素获得焦点时的样式

📄题目要求

image.png

🔗html代码

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>timeline</title><linktype="text/css"href="css/style.css"rel="stylesheet"/></head><body><divclass="cont"><divclass="biz_title"><h2>发展历程</h2><p>CONMPANY HISTORY</p></div><divclass="biz_timtline-box"><divclass="biz_timeline"><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2012.12</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">公司成立</div></div></div><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2013.02</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">园区业务方向</div></div></div><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2014.03</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">获天使轮投资900万元</div></div></div><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2013.09</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">业务转型互联网营销</div></div></div><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2016.06</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">V1.0版本上线</div></div></div><divclass="biz-timeline-box  clearfix"><divclass="biz_timeline-time">2017.03</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">期待。。。。</div></div></div></div><divclass="biz_longString"></div></div></div></body></html>

🔗css代码

@charset"utf-8";
ul,li{
list-style: none;
}
body{
font-family: "microsoft yahei";
margin:0;
padding:0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
/* ______(1)______;溢出隐藏  */overflow:auto;/*溢出隐藏*/clear: both;
}
.cont{
width:1000px;
margin:0auto;
/* ______(2)______;设置内边距上20px 左右为0,下为50px */padding: 20px050px;/*设置内边距上20px 左右为0,下为50px*/}
.biz-timeline-box{
width:785px;
/* ______(3)______;设置外边距上为0，左右自动，下为45px */margin: 0auto45px;/*设置外边距上为0，左右自动，下为45px*/}
/*选择类.biz-timeline-box的奇数个元素*//* .biz-timeline-box:______(4)______ .biz_timeline-eventbox{ */.biz-timeline-box:nth-child(2n+1) .biz_timeline-eventbox{
/* _____(6)______;设置圆角，左上角为0，右上角为40px，右下角为40px,左下角为0 *//* _____(7)______;向右浮动 */border-radius: 040px40px0;/*设置圆角，左上角为0，右上角为40px，右下角为40px,左下角为0*/float: right;/*向右浮动*/}
/*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:nth-child(2n) .biz_timeline-eventbox{
border-radius: 40px0040px;
float: left;/*向左浮动*/}
/*选择类.biz-timeline-box的奇数个元素*//* .biz-timeline-box:______(4)______ .biz_timeline-event{ */.biz-timeline-box:nth-child(2n+1) .biz_timeline-event{
border-radius:030px30px0;
}
/*选择类.biz-timeline-box的偶数个元素*//* .biz-timeline-box:_____(5)______ .biz_timeline-event{ */.biz-timeline-box:nth-child(2n) .biz_timeline-event{
border-radius: 30px0030px;
}
/*选择类.biz-timeline-box的奇数个元素*//* .biz-timeline-box:______(4)______ .biz_timeline-time{ */.biz-timeline-box:nth-child(2n+1) .biz_timeline-time{
/* _____(8)______;向左浮动 */float: left;/*向左浮动*/width:344px;
text-align: right;
}
/*选择类.biz-timeline-box的偶数个元素*//* .biz-timeline-box:_____(5)______ .biz_timeline-time{ */.biz-timeline-box:nth-child(2n) .biz_timeline-time{
/* _____(7)______;向右浮动 */float: right;/*向右浮动*/width:344px;
text-align: left;
}
/*选择类.biz-timeline-box的偶数个元素*//* .biz-timeline-box:_____(5)______ .biz_timeline-node{ */.biz-timeline-box:nth-child(2n) .biz_timeline-node{
/* _____(7)______;向右浮动 */float: right;/*向右浮动*/}
/*选择类.biz-timeline-box的奇数个元素*//* .biz-timeline-box:______(4)______ .biz_timeline-node{ */.biz-timeline-box:nth-child(2n+1) .biz_timeline-node{
/* _____(8)______;向左浮动 */float: left;/*向左浮动*/}
.biz_timeline-time{
font-size:16px;
color:#d81919;
/* _____(9)______: 600;设置文字加粗 */font-weight: 600;/*设置文字加粗*//* _____(10)______:73px;设置行高 */line-height:73px;/*设置行高*/}
.biz_timeline-eventbox{
width: 336px;
height: 69px;
/* _____(11)______;设置边框宽为4px,边框线为实心线 */border: 4pxsolid#d94646;/*设置边框宽为4px,边框线为实心线*/text-align: center;
}
.biz_timeline-event{
width:323px;
height:57px;
margin:6px;
color:#fff;
background:#d94646;
text-align: center;
font-size:16px;
line-height:57px;
}
.biz_timeline-node{
width:8px;
height:8px;
/* _____(12)______;设置圆角 */border-radius: 50%;/*设置圆角*/background: #fff;
border:4pxsolid#b22b2b;
margin:29px40px;
}
.biz_longString{
/* _____(13)______;设置绝对定位 */position: absolute;/*设置绝对定位*/left:50%;
width:8px;
height:700px;
background:#bfbfbf;
top:-57px;
/* _____(14)______:10;设置层级 */z-index:10;/*设置层级*/margin-left:-4px;
}
.biz_timtline-box{
/* _____(15)______;设置相对定位 */position: relative;/*设置相对定位*/margin-top:100px;
}
.biz_timeline{
/* _____(14)______:20;设置层级 *//* _____(15)______;设置相对定位 */z-index:20;/*设置层级*/position: relative;/*设置相对定位*/}
.biz_title{
text-align: center;
margin:0auto35px;
}
.biz_titleh2{
font-size:28px;
color:#d81919;
}
.biz_titlep{
color:#eca7a7;
margin-top:15px;
}

🎯要点分析

CSS3 :nth-child() 选择器

image.png

用法

image.png

设置奇偶数标签

带入公式

2n(偶数)

image.png

2n+1(奇数)

image.png

🧩最终效果

image.png

文章标签：
前端开发
关键词：
前端web
web前端
前端标签
设置前端
web标签
黛琳ghz
目录
相关文章
北飞的山羊
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
北飞的山羊
7 0
叫个什么名字
|
5天前
|
前端开发 JavaScript 开发者
新一代前端框架：革命性的Web开发利器
传统的前端框架在满足日益复杂的Web开发需求上逐渐显露出局限性，而新一代前端框架的出现，以其革命性的设计和功能，重新定义了Web开发的标准。本文将介绍这些新一代前端框架的特点和优势，并探讨它们在实际项目中的应用。
叫个什么名字
12 1
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
爱吃糖的范同学
25 5
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
爱吃糖的范同学
28 4
爱吃糖的范同学
|
10天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项？
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项？
爱吃糖的范同学
24 0
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
爱吃糖的范同学
22 2
爱吃糖的范同学
|
10天前
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
爱吃糖的范同学
22 4
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
爱吃糖的范同学
30 0
爱吃糖的范同学
|
11天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
爱吃糖的范同学
33 5
坠入极夜的夏
|
10天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
坠入极夜的夏
23 2

热门文章

最新文章

  • 1
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 2
    前端最常见的JS面试题大全
  • 3
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 4
    使用机器学习优化前端用户体验
  • 5
    前端代码整洁与规范之CSS篇
  • 6
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 7
    如何使用浏览器调试前端代码？
  • 8
    常见的前端加密方式有哪些？运用场景有哪些？
  • 9
    uniapp上传图片 前端以及java后端代码实现
  • 10
    【前端设计】HTML+CSS+JavaScript基本特性
  • 1
    探索现代Web应用中的微前端架构
    32
  • 2
    如何在本地安装Flask并将其web界面发布到公网上远程访问协同开发
    65
  • 3
    前端开发新趋势：Web3、区块链和虚拟现实
    42
  • 4
    构建响应式Web界面：Flexbox布局的力量
    20
  • 5
    JAVA Web项目开发SSM框架搭建（第一天）
    28
  • 6
    JAVA Web项目开发创建Web项目（第一天）
    24
  • 7
    JAVA Web项目开发eclipse工具包配置（第一天）
    37
  • 8
    构建响应式Web界面：Flutter的跨界前端技术
    69
  • 9
    Web应用程序测试工具Selenium用法详解
    38
  • 10
    Django实战：从零到一构建安全高效的Web应用
    63

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）