CSS 实现日历样式

最新推荐文章于 2024-04-26 14:38:08 发布

但缓且不息

最新推荐文章于 2024-04-26 14:38:08 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_49930465/article/details/124852770

版权

前端专栏收录该内容

12 篇文章 4 订阅

订阅专栏

一些解释附在代码注释中

HTML代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
    <link rel="stylesheet" href="1.css" type="text/css">
</head>
<body>
	<h1>CSS 日历</h1>

	<div class="month">
		<ul>
			<li class="prev">❮</li>
			<li class="next">❯</li>
			<li style="text-align:center">
				August<br>
				<span style="font-size:18px">2016</span>
			</li>
		</ul>
	</div>

	<ul class="weekdays">
		<li>Mo</li>
		<li>Tu</li>
		<li>We</li>
		<li>Th</li>
		<li>Fr</li>
		<li>Sa</li>
		<li>Su</li>
	</ul>

	<ul class="days">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li><span class="active">10</span></li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
		<li>21</li>
		<li>22</li>
		<li>23</li>
		<li>24</li>
		<li>25</li>
		<li>26</li>
		<li>27</li>
		<li>28</li>
		<li>29</li>
		<li>30</li>
		<li>31</li>
	</ul>
</body>
</html>

CSS代码

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
}

body {
    font-family: Verdana, sans-serif;
}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size: 12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important   /* 使用一个 !important 规则时，此声明将覆盖任何其他声明 */
}                               /* 使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了 */

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {  /* 在屏幕可视窗口尺寸小于 720 像素的设备上修改样式 */

    .weekdays li,
    .days li {
        width: 13.1%;
    }
}

@media screen and (max-width: 420px) {  /* 在屏幕可视窗口尺寸小于 420 像素的设备上修改样式 */

    .weekdays li,
    .days li {
        width: 12.5%;
    }

    .days li .active {
        padding: 2px;
    }
}

@media screen and (max-width: 290px) {   /*  在屏幕可视窗口尺寸小于 290 像素的设备上修改样式   */

    .weekdays li,
    .days li {
        width: 12.2%;
    }
}