Css 如何制作日历_Css_Html - Fatal编程技术网

Css 如何制作日历

css html

Css 如何制作日历,css,html,Css,Html,作为家庭作业，我需要用纯代码重新创建这个屏幕截图。我现在一直在做日历。当我出于某种原因尝试制作我的时，我无法获得一天中的数字天数。正如你所看到的，连续7天，但连续8天。我怎样才能解决这个问题我需要对代码进行哪些更改才能修复它这是HTML代码： <h2>Calendar</h2> <p class="october">October 2017</p> <ul class="weekdays"> <li>M</

作为家庭作业，我需要用纯代码重新创建这个屏幕截图。我现在一直在做日历。当我出于某种原因尝试制作我的时，我无法获得一天中的数字天数。正如你所看到的，连续7天，但连续8天。我怎样才能解决这个问题

我需要对代码进行哪些更改才能修复它这是HTML代码：

<h2>Calendar</h2>

<p class="october">October 2017</p>
<ul class="weekdays">
  <li>M</li>
  <li>T</li>
  <li>W</li>
  <li>T</li>
  <li>F</li>
  <li>S</li>
  <li>S</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>

顺便说一句，我还没有完全处理完所有其他的事情，这就是为什么它看起来仍然很邋遢的原因。出于您的目的，您可以使用类似的：

见现场直播：

这将解决数字的放置问题，并将其与日期对齐。我将把颜色样式留给你，因为这不是你所说的你的问题

出于您的目的，您可以使用类似的：

见现场直播：

这将解决数字的放置问题，并将其与日期对齐。我将把颜色样式留给你，因为这不是你所说的你的问题

你可以试试这个。它将向您展示一个很好的calondar结果，并使用css在图片中精确显示

里面的所有内容在css文件中分开

<!DOCTYPE html>
<html>
<head>

<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

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

.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
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>

<h1>CSS Calendar</h1>

<div class="month">      
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>
      August<br>
      <span style="font-size:18px">2017</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>


*{框大小：边框框；}
ul{列表样式类型：无；}
正文{字体系列：Verdana，无衬线；}
.月{
填充：70px 25px；
宽度：100%；
背景：#1abc9c；
文本对齐：居中；
}
月保险费{
保证金：0；
填充：0；
}
李先生{
颜色：白色；
字体大小：20px；
文本转换：大写；
字母间距：3px；
}
.month.prev{
浮动：左；
填充顶部：10px；
}
.下个月.下个月{
浮动：对；
填充顶部：10px；
}
.平日{
保证金：0；
填充：10px0；
背景色：#ddd；
}
.工作日李{
显示：内联块；
宽度：13.6%；
颜色：#666；
文本对齐：居中；
}
.天{
填充：10px0；
背景：#eee；
保证金：0；
}
李天{
列表样式类型：无；
显示：内联块；
宽度：13.6%；
文本对齐：居中；
边缘底部：5px；
字体大小：12px；
颜色：#777；
}
.李天.活动{
填充物：5px；
背景：#1abc9c；
颜色：白色！重要
}
/*为较小屏幕添加媒体查询*/
@媒体屏幕和屏幕（最大宽度：720px）{
.工作日李，.工作日李{宽度：13.1%；}
}
@媒体屏幕和屏幕（最大宽度：420px）{
.工作日李，.工作日李{宽度：12.5%；}
.days li.active{padding:2px；}
}
@媒体屏幕和屏幕（最大宽度：290像素）{
.工作日李，.工作日李{宽度：12.2%；}
}
CSS日历

和#10094
和#10095

八月

2017



钼
屠
我们
Th
Fr
Sa
苏


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八
十九,
二十
二十一,
二十二
二十三
二十四
二十五
二十六
二十七
二十八
二十九
三十
三十一

你可以试试这个。它将向您展示一个很好的calondar结果，并使用css在图片中精确显示

里面的所有内容在css文件中分开

<!DOCTYPE html>
<html>
<head>

<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

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

.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
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>

<h1>CSS Calendar</h1>

<div class="month">      
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>
      August<br>
      <span style="font-size:18px">2017</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>


*{框大小：边框框；}
ul{列表样式类型：无；}
正文{字体系列：Verdana，无衬线；}
.月{
填充：70px 25px；
宽度：100%；
背景：#1abc9c；
文本对齐：居中；
}
月保险费{
保证金：0；
填充：0；
}
李先生{
颜色：白色；
字体大小：20px；
文本转换：大写；
字母间距：3px；
}
.month.prev{
浮动：左；
填充顶部：10px；
}
.下个月.下个月{
浮动：对；
填充顶部：10px；
}
.平日{
保证金：0；
填充：10px0；
背景色：#ddd；
}
.工作日李{
显示：内联块；
宽度：13.6%；
颜色：#666；
文本对齐：居中；
}
.天{
填充：10px0；
背景：#eee；
保证金：0；
}
李天{
列表样式类型：无；
显示：内联块；
宽度：13.6%；
文本对齐：居中；
边缘底部：5px；
字体大小：12px；
颜色：#777；
}
.李天.活动{
填充物：5px；
背景：#1abc9c；
颜色：白色！重要
}
/*为较小屏幕添加媒体查询*/
@媒体屏幕和屏幕（最大宽度：720px）{
.工作日李，.工作日李{宽度：13.1%；}
}
@媒体屏幕和屏幕（最大宽度：420px）{
.工作日李，.工作日李{宽度：12.5%；}
.days li.active{padding:2px；}
}
@媒体屏幕和屏幕（最大宽度：290像素）{
.工作日李，.工作日李{宽度：12.2%；}
}
CSS日历

和#10094
和#10095

八月

2017



钼
屠
我们
Th
Fr
Sa
苏


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八