CSS 实现日历样式

一些解释附在代码注释中

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%;}
}

CSS 实现日历样式相关推荐

php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
html怎么给变量添加样式,通过CSS变量修改样式
js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类.在style中动态插入新的样式等. 那么这里再来一种方法,设置css变量(var),通过 ...
net中 css 控制 GridView 样式
net中 css 控制 GridView 样式 .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...

CSS 实现日历样式

一些解释附在代码注释中

CSS 实现日历样式相关推荐

最新文章

热门文章