使用 HTML+CSS+JS 制作的夏日风格日历-CFANZ编程社区

作者：海拥

在线预览：haiyong.site/demo/rili/

今天我们实现的是 jQuery 的简单 UI 样式

使用 HTML+CSS+JS 制作的夏日风格日历_html

实现步骤，首先我们需要创建一个存放日历的div，在HTML中放入如下代码：

<div class='datepicker'>
    <div class="datepicker-header"></div>
</div>

然后我们引入一些需要的JS：

&lt;script&nbsp;src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
&lt;script&nbsp;src=&quot;//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
&nbsp;&nbsp;$(&quot;.datepicker&quot;).datepicker({
&nbsp;&nbsp;&nbsp;&nbsp;prevText:&nbsp;&#39;&lt;i&nbsp;class=&quot;fa&nbsp;fa-fw&nbsp;fa-angle-left&quot;&gt;&lt;/i>',
&nbsp;&nbsp;&nbsp;&nbsp;nextText:&nbsp;&#39;&lt;i&nbsp;class=&quot;fa&nbsp;fa-fw&nbsp;fa-angle-right&quot;&gt;&lt;/i>'
&nbsp;&nbsp;});
});

上面我们放入了两个图标，是用来选择上月或者下个月的日历。

现在我们显示出的效果是这样：

使用 HTML+CSS+JS 制作的夏日风格日历_前端_02

加入一些基本的CSS样式后效果如下：

*,&nbsp;*:before,&nbsp;*:after&nbsp;{
&nbsp;&nbsp;box-sizing:&nbsp;border-box;
}

html&nbsp;{
&nbsp;&nbsp;font-size:&nbsp;18px;
}

body&nbsp;{
&nbsp;&nbsp;font-family:&nbsp;&quot;Roboto&quot;,&nbsp;sans-serif;
&nbsp;&nbsp;font-size:&nbsp;1em;
&nbsp;&nbsp;line-height:&nbsp;1.6;
}

使用 HTML+CSS+JS 制作的夏日风格日历_html_03

.datepicker&nbsp;{
&nbsp;&nbsp;width:&nbsp;400px;
&nbsp;&nbsp;background:&nbsp;#fff;
&nbsp;&nbsp;border-radius:&nbsp;10px;
&nbsp;&nbsp;box-shadow:&nbsp;0&nbsp;0&nbsp;50px&nbsp;0&nbsp;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0.2);
&nbsp;&nbsp;margin:&nbsp;50px&nbsp;auto;
&nbsp;&nbsp;overflow:&nbsp;hidden;
}
.datepicker&nbsp;.datepicker-header&nbsp;{
&nbsp;&nbsp;height:&nbsp;245px;
&nbsp;&nbsp;background-image:&nbsp;url("https://haiyong.site/img/demo/summer.jpg");
&nbsp;&nbsp;background-position:&nbsp;center&nbsp;center;
&nbsp;&nbsp;background-size:&nbsp;100%;
}

加上一张头图，并给它一个宽高，样式稍作调整，显示效果如下：

使用 HTML+CSS+JS 制作的夏日风格日历_前端_04

调整了一下图片跟日历的排版：

.datepicker&nbsp;.ui-datepicker-inline&nbsp;{
&nbsp;&nbsp;padding:&nbsp;30px;
}
.datepicker&nbsp;.ui-datepicker-header&nbsp;{
&nbsp;&nbsp;text-align:&nbsp;center;
&nbsp;&nbsp;padding-bottom:&nbsp;1em;
&nbsp;&nbsp;text-transform:&nbsp;uppercase;
&nbsp;&nbsp;letter-spacing:&nbsp;0.1em;
}

使用 HTML+CSS+JS 制作的夏日风格日历_jquery_05

然后设置一下标题，日期改为灰色，首行的样式也换一下

.datepicker&nbsp;.ui-datepicker-calendar&nbsp;{
&nbsp;&nbsp;width:&nbsp;100%;
&nbsp;&nbsp;text-align:&nbsp;center;
}
.datepicker&nbsp;.ui-datepicker-calendar&nbsp;thead&nbsp;{
&nbsp;&nbsp;color:&nbsp;#ccc;
}
.datepicker&nbsp;.ui-datepicker-calendar&nbsp;tr&nbsp;th,
.datepicker&nbsp;.ui-datepicker-calendar&nbsp;tr&nbsp;td&nbsp;{
&nbsp;&nbsp;padding-bottom:&nbsp;0.5em;
}

使用 HTML+CSS+JS 制作的夏日风格日历_jquery_06

.datepicker&nbsp;.ui-datepicker-calendar&nbsp;a&nbsp;{
&nbsp;&nbsp;color:&nbsp;#444;
&nbsp;&nbsp;text-decoration:&nbsp;none;
&nbsp;&nbsp;display:&nbsp;block;
&nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;
&nbsp;&nbsp;width:&nbsp;35px;
&nbsp;&nbsp;height:&nbsp;35px;
&nbsp;&nbsp;line-height:&nbsp;35px;
&nbsp;&nbsp;border-radius:&nbsp;50%;
&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;transparent;
&nbsp;&nbsp;cursor:&nbsp;pointer;
}
.datepicker&nbsp;.ui-datepicker-calendar&nbsp;.ui-state-highlight&nbsp;{
&nbsp;&nbsp;border-color:&nbsp;#d24d57;
&nbsp;&nbsp;color:&nbsp;#d24d57;
}

a 链接的样式改一下，然后将今天的日期标红圈出来

.datepicker&nbsp;.ui-datepicker-calendar&nbsp;a&nbsp;{
&nbsp;&nbsp;color:&nbsp;#444;
&nbsp;&nbsp;text-decoration:&nbsp;none;
&nbsp;&nbsp;display:&nbsp;block;
&nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;
&nbsp;&nbsp;width:&nbsp;35px;
&nbsp;&nbsp;height:&nbsp;35px;
&nbsp;&nbsp;line-height:&nbsp;35px;
&nbsp;&nbsp;border-radius:&nbsp;50%;
&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;transparent;
&nbsp;&nbsp;cursor:&nbsp;pointer;
}
.datepicker&nbsp;.ui-datepicker-calendar&nbsp;.ui-state-highlight&nbsp;{
&nbsp;&nbsp;border-color:&nbsp;#d24d57;
&nbsp;&nbsp;color:&nbsp;#d24d57;
}