寒假提升 ｜ Day8 CSS 第六部分 #638
寒假提升 ｜ Day8 CSS 第六部分
#638
giscus[bot]
bot
Replies: 2 comments
-
|
今日打卡内容 # Day08 作业布置
## 一. 完成课堂所有的代码
## 二. 说出结构伪类的 nth-child 和 nth-of-type 的区别，并且写出案例练习
## 三. 自己练习使用字体图标
* 从 ·iconfont· 中下载图标练习
## 四. 自己找精灵图进行练习
## 五. 结合CSS元素定位，并且找出对应的练习案例（2个） |
Beta Was this translation helpful? Give feedback.
0 replies
-
Day08 作业布置一. 完成课堂所有的代码二. 说出结构伪类的nth-child和nth-of-type的区别，并且写出案例练习
div > div:nth-child(5){
color:red
}设置的是父元素中的第五个元素颜色为红色
div > li:nth-of-child（5）{
color：red
}这样设置的便是div元素中li元素的第五个颜色为红色 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul > li:nth-child(3){
color: aqua;
}
div > div:nth-child(4n + 1){
color: red;
}
div > div:nth-child(4n + 2){
color: #008c8c;
}
div > div:nth-child(4n + 3){
color: blue;
}
div > div:nth-child(4n){
color: plum;
}
</style>
</head>
<body>
<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
<li>列表内容6</li>
</ul>
<div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
<div>列表内容</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 需求：选择box中的div元素，并且是第三个子元素 */
.box>div:nth-child(3){
color: red;
}
/* 需求：选择box中的第三个div元素（排除干扰项） */
.box > div:nth-of-type(3){
color: blue;
}
</style>
</head>
<body>
<div class="box">
<div>列表内容1</div>
<p>p元素</p>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<div>列表内容2</div>
<div>列表内容3</div>
<div>列表内容4</div>
<div>列表内容5</div>
<div>列表内容6</div>
<div>列表内容7</div>
<div>列表内容8</div>
<div>列表内容9</div>
<div>列表内容10</div>
</div>
</body>
</html>三. 自己练习使用字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfonts/iconfont2.css">
</head>
<style>
.box{
background-color: #008c8c;
}
</style>
<body>
<div class="box">
<i class="iconfont icon-music"></i>
<i class="iconfont icon-musicfill"></i>
<i class="iconfont icon-music1"></i>
<i class="iconfont icon-music2"></i>
</div>
</body>
</html>四. 自己找精灵图进行练习<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: #333;
height: 400px;
}
.sprite{
background-image: url(../图片资源/jd_sprite_01.png);
background-repeat: no-repeat;
display: inline-block;
}
.box > i{
width: 36px;
height: 42px;
}
i.d{
background-position: 0 -192px;
}
i.k{
background-position: -41px -192px;
}
i.h{
background-position: -82px -192px;
}
i.s{
background-position: -123px -192px;
}
</style>
</head>
<body>
<div class="box">
<i class="sprite d"></i>
<i class="sprite k"></i>
<i class="sprite h"></i>
<i class="sprite s"></i>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: #333;
}
.topbar{
background-image: url(../图片资源/topbar.png);
background-repeat: no-repeat;
display: inline-block;
}
i.hot-icon{
background-position: -192px 0;
width: 26px;
height: 13px;
}
i.logo-icon{
background-position: 0 -19px;
width: 157px;
height: 33px;
}
</style>
</head>
<body>
<div class="box">
<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>
</div>
</body>
</html>五. 结合CSS元素定位，并且找出对应的练习案例（2个）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #999;
}
.handle{
position: fixed;
right: 50px;
bottom: 200px;
}
.handle .item{
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
}
.handle .item:hover{
background-color: #f00;
}
</style>
</head>
<body>
<div class="handle">
<div class="item ms">京东秒杀</div>
<div class="item yx">特色优选</div>
<div class="item tj">为你推荐</div>
<div class="item kf">客服</div>
<div class="item fk">反馈</div>
<div class="item top">回到顶部</div>
</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.handle{
position: fixed;
right: 30px;
bottom: 30px;
}
.handle .item{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #008c8c;
color: #fff;
border-radius: 8px;
cursor: pointer;
}
.top{
margin-bottom: 10px;
}
.handle .item:hover{
background-color: #f00;
}
</style>
</head>
<body>
<div class="handle">
<div class="item top">顶部</div>
<div class="item bottom">反馈</div>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
掘金的调用框不错！ |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
寒假提升 ｜ Day8 CSS 第六部分
Coding Blog
https://icodeq.com/2022/de6714599f8b/
Beta Was this translation helpful? Give feedback.
All reactions