首页 > 其他分享> > 简单万年历实现

简单万年历实现

2021-03-09 09:02:18 作者：互联网

一、项目介绍

项目名称：万年历
项目简介：点击实现主要月份切换，并实现备忘录的更新
项目目标：用简洁的代码实现美观且通顺的需求

二、项目逻辑

有一张万年历
用无序列表实现每一个月份的排序
遍历所有的月份，进行active的设置
换月份实现同步换备忘录

三、项目实现

1. style

<style>
        *{margin: 0;list-style: none;padding: 0;}
        #box1{width: 405px;height: 700px;background: #ecfff4;border: 1px solid #a3a3a3;margin: 100px auto;padding-top: 40px;padding-left: 40px;cursor: pointer;}
        #box1 li{width: 100px;height: 100px;background: rgb(171, 211, 180);border: 1px solid black;float: left;margin: 10px;text-align: center;color: rgb(25, 107, 69);}
        ul li:nth-child(10){margin-bottom: 30px;}
        li h2{font-size: 35px;line-height: 60px;}
        li p{font-size: 30px;}
        .box2{float: left;width: 360px;height: 160px;background: rgba(230, 252, 210, 0.623);border: 1px solid rgb(46, 94, 62);margin-left: 2px;padding-left: 20px;padding-top: 20px;box-sizing: border-box;}
        #box1 .active{background: rgb(43, 95, 79);color: rgb(228, 255, 240);border: 1px solid black;}
        .box2 h3{font-size: 26px;color: cadetblue;line-height: 50px;}
        .box2 p{font-size: 24px;color: cadetblue;}
    </style>

2. body

<body>
    <div id="box1">
        <ul>
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>JAN</p></li>
            <li><h2>3</h2><p>JAN</p></li>
            <li><h2>4</h2><p>JAN</p></li>
            <li><h2>5</h2><p>JAN</p></li>
            <li><h2>6</h2><p>JAN</p></li>
            <li><h2>7</h2><p>JAN</p></li>
            <li><h2>8</h2><p>JAN</p></li>
            <li><h2>9</h2><p>JAN</p></li>
            <li><h2>10</h2><p>JAN</p></li>
            <li><h2>11</h2><p>JAN</p></li>
            <li><h2>12</h2><p>JAN</p></li>
        </ul>
        <div class="box2">
            <h3>1月活动</h3>
            <p>'今天我很开心！标签：万年历,实现,height,padding,rgb,简单,var,li,box2	

来源： https://blog.csdn.net/wangYaj/article/details/114340095