寒假提升 ｜ Day9 CSS 第七部分 #640
寒假提升 ｜ Day9 CSS 第七部分
#640
giscus[bot]
bot
Replies: 2 comments 2 replies
-
|
今日打卡内容 # Day09 作业布置
## 一. 完成课堂所有的代码
## 二. 总结绝对定位的相对元素以及常见的解决方案
## 三. 总结浮动常见的规则内容
## 四. 通过浮动练习页面布局方案
## 五. 完成下面的案例练习
 |
Beta Was this translation helpful? Give feedback.
0 replies
-
Day09 作业布置一. 完成课堂所有的代码二. 总结绝对定位的相对元素以及常见的解决方案
三. 总结浮动常见的规则内容
<!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>
.content{
width: 500px;
height: 500px;
background-color: burlywood;
}
.item{
background-color: #f00;
width: 100px;
height: 100px;
}
.box1{
float: left;
background-color: #0f0;
margin-left: 20px;
}
.box2{
float: left;
background-color: #00f;
}
.box3{
float: left;
}
.box4{
width: 200px;
height: 100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
<div class="item box4">4</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>
ul, li{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body{
background-color: #f2f2f2;
}
ul > li{
float: left;
margin-left: 12px
}
ul > li > a{
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
background-color: #fff;
border-radius: 6px;
font-size: 16px;
}
ul > li > a:hover,ul > li.active > a {
background-color: violet;
color: #fff;
}
ul > li.next > a{
width: 80px;
}
</style>
</head>
<body>
<ul>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3</a></li>
<li class="item active"><a href="#">4</a></li>
<li class="item"><a href="#">5</a></li>
<li class="item"><a href="#">6</a></li>
<li class="item"><a href="#">7</a></li>
<li class="item"><a href="#">8</a></li>
<li class="item"><a href="#">9</a></li>
<li class="item"><a href="#">10</a></li>
<li class="item next"><a href="#">下一页 ></a></li>
</ul>
</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>
.item{
width: 140px;
margin: 0 auto;
}
.item .top {
position: relative;
}
.item .top img{
display: block;
}
.item .top .cover{
width: 140px;
height: 140px;
background-image: url(../图片资源/music_sprite01.png);
background-position: 0 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.item .top .info{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-left: 10px;
font-size: 12px;
color: #ccc;
line-height: 27px;
background-image: url(../图片资源/music_sprite01.png);
background-position: 0 -537px;
height: 27px;
}
.item .top .info .icon{
position: relative;
display: inline-block;
width: 14px;
height: 11px;
background-image: url(../图片资源/music_sprite02.png);
background-position: 0 -24px;
}
.item .top .info .icon-play{
position: absolute;
right: 10px;
bottom: 5px;
width: 16px;
height: 17px;
background-image: url(../图片资源/music_sprite02.png);
background-position: 0 0;
}
.item .bottom{
display: inline-block;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: black;
}
.item .bottom:hover{
text-decoration: underline;
}
.item .top .info .content{
margin-left: 5px;
}
</style>
</head>
<body>
<div class="item">
<div class="top">
<img src="../图片资源/music01.jpg" alt="音乐封面">
<a class="cover" href="https://music.163.com/#/playlist?id=1982066521" target="_blank"></a>
<div class="info">
<i class="icon"></i>
<span class="content">2481万</span>
<a class="icon-play" href="#"></a>
</div>
</div>
<a class="bottom" href="https://music.163.com/#/playlist?id=1982066521">
假如能回到过去，你想做什么
</a>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
这是寒假作业？ |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
🤔 不是，是自发组织的自学，主要是为了下一年的蓝桥杯 以及对前端的更进一步学习吧 |
Beta Was this translation helpful? Give feedback.
-
|
比较离谱的是我们班不知道为什么 被标记了好几个账号，目前在跟客服问情况，实在不行就再迁回自建评论去了 🤦 |
Beta Was this translation helpful? Give feedback.
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.
-
寒假提升 ｜ Day9 CSS 第七部分
Coding Blog
https://icodeq.com/2022/66e61ca49a99/
Beta Was this translation helpful? Give feedback.
All reactions