这是模仿视频做的一个CSS日历,先上效果图
整体思路是:一个大盒子分为左右两个子盒子,他们的display属性都设置为inline-block,但是因为设置为inline-block后两个盒子之间会有空隙,这里有个巧法就是把他们的父盒子的font-size设为0。
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<div class="left">
<div class="week">Monday</div>
<div class="day">13</div>
</div>
<div class="right">
<div class="year">July 2020</div>
<div class="calender">
<div class="weeks">
<div class="item">s</div>
<div class="item">m</div>
<div class="item">t</div>
<div class="item">w</div>
<div class="item">t</div>
<div class="item">f</div>
<div class="item">s</div>
</div>
<div class="days">
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day today">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
<div class="day">1</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS部分:
@import url(href="https://fonts.font.im/css?family=Karla" rel="stylesheet");
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: darkcyan;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 700px;
height: 400px;
background-color: white;
/*为了清除inline-block产生的距离*/
font-size: 0;
border-radius: 20px;
}
/*左边部分*/
.left {
display: inline-block;
width: 350px;
height: 400px;
text-align: center;
vertical-align: top;
background-color: rgb(43, 223, 223);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.week {
font-family: 'Karla', sans-serif;
text-transform: uppercase;
font-size: 35px;
color: white;
line-height: 100px;
}
.left .day {
font-size: 180px;
color: white;
}
/*右边部分*/
.right {
display: inline-block;
width: 350px;
height: 400px;
text-align: center;
}
.right .year {
font-family: 'Karla', sans-serif;
text-transform: uppercase;
font-size: 35px;
line-height: 100px;
color: rgb(43, 223, 223);
}
.calender {
padding: 0 35px;
}
.weeks .item {
display: inline-block;
text-transform: uppercase;
font-size: 18px;
width: 40px;
height: 40px;
line-height: 40px;
color: crimson;
font-weight: bolder;
}
.days .day {
display: inline-block;
width: 40px;
height: 40px;
font-size: 15px;
line-height: 40px;
transition: .2s;
}
.today {
background-color: crimson;
font-weight: bolder;
color: white;
}
.days .day:hover {
background-color: rgb(224, 57, 91);
color: white;
font-weight: bolder;
}
get new idea:
1.解决两个display属性值为inline-block的盒子中间的缝隙,我们可以给父盒子添加font-size:0;
2.text-transform可以转换不同元素中的文本,这里是转化成大写字母。
视频原地址:https://www.bilibili.com/video/BV1Ma4y1a76e