日历 ——练习CSS结构伪类选择器

最新推荐文章于 2022-12-05 18:35:46 发布

weixin_47207556

最新推荐文章于 2022-12-05 18:35:46 发布

阅读量207

点赞数

分类专栏：适合练习CSS的精美小案例文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_47207556/article/details/120579491

版权

CSS 伪类选择器日历布局 HTML 前端开发

关键词由CSDN通过智能技术生成

适合练习CSS的精美小案例专栏收录该内容

15 篇文章 1 订阅

订阅专栏

今天拿到一个日历的练习题，试着实现了一下。
题目照片如下：
在这里插入图片描述
然后下面是我最后实现的

感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rili</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .wrapper{
            margin-top: 50px;
            width: 400px;
            height: 385px;
            border: 3px solid #6ab3ff;
            display: flex;
            flex-direction: column;
        }
        .wrapper div{
            height: 60px;
            width: 100%;
            margin: 0;
            display: flex;
            border-bottom: 1px solid #aaaaaa;
        }
        div span{
            padding: 10px;
            text-align: center;
            line-height: 39px;
            display: inline-block;
            font-family: 'Open Sans', sans-serif;
            font-size: 1.2rem;
            font-weight: bold;
            flex:1;
            cursor: default;
        }
        div span:first-child{
            color: red;
        }
        div span:last-child{
            color: red;
        }
        .wrapper div:nth-child(n+2) span:hover{
            background-color: #FFB866;
            color: white;
            cursor: pointer;
        }
        .wrapper div:nth-child(2) span:first-child{
            color: #d5d5d5;
            cursor: default;
        }
        .wrapper div:nth-child(2) span:first-child:hover{
            color: #d5d5d5;
            cursor:default ;
            background-color: white;
        }
        .wrapper div:last-child span:nth-last-child(-n+3){
            color: #d5d5d5;
            cursor: default;
        }
        .wrapper div:last-child span:nth-last-child(-n+3){
            color: #d5d5d5;
            cursor:default ;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div>
            <span>30</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
        <div>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
        </div>
        <div>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
            <span>19</span>
            <span>20</span>
        </div>
        <div>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
            <span>25</span>
            <span>26</span>
            <span>27</span>
        </div>
        <div>
            <span>28</span>
            <span>29</span>
            <span>30</span>
            <span>31</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
</body>
</html>

weixin_47207556

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
日历 ——练习CSS结构伪类选择器

今天拿到一个日历的练习题，试着实现了一下。题目照片如下：然后下面是我最后实现的感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rili</title> <style> *{ box-sizing:
复制链接

扫一扫

专栏目录