汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

如何用CSS显示个性化的日历效果

作者:admin 发布时间:2019-08-11
上一节试验了,其实日历效果也是修改背景色产生的效果,经常在博客中看到非常个性化的日历效果,很是羡慕,实际上用CSS就可以打造出来,今天做做实验,学习一下,本示例来源:书籍 THE CSS ANTHOLOGY 作者:[英]rachel AndrewCSS代码: style type= text/css !--body{background-color:#FFFFFF;color:#000000;font-size:90%;}.clmonth{border-collapse:collapse;width:780px;}.clmonth caption{text-align:left;font:bold 110%;padding-bottom:0.4em;}.clmonth th{border:1px solid #AAAAAA;border-bottom:none;padding:0.2em 0.6em 0.2em 0.6em;background-color:#CCCCCC;color:#3F3F3F;font:80% Arial, Helvetica, sans-serif;width:110px; }.clmonth td{border:1px solid #EAEAEA;font:80% Arial, Helvetica, sans-serif;padding:0.2em 0.6em 0.2em 0.6em;vertical-align:top;}.clmonth td.previous,.clmonth td.next{background-color:#F6F6F6;color:#C6C6C6;}.clmonth td.active{background-color:#B1CBE1;color:#2B5070;border:2px solid #4682B4;}.clmonth ul{list-style-type:none;margin:0;padding-left:1em;padding-right:0.6em;}.clmonth li{margin-bottom:1em;}-- /style HTML代码: table ' open day /li li year 8 theater trip /li /ul /td     td 2 /td     td 3 /td     td 4 /td     td 5 /td     td 6 /td   /tr   tr     td ' evening /li li prizegiving /li /ul /td     td 19 /td     td 20 /td   /tr   tr     td 21 /td     td 22 /td     td 23 /td     td ' evening /li /ul /td     td 25 /td     td 26 /td     td 27 /td   /tr     tr     td 28 /td     td 29 /td td "600" height="417" alt="如何用CSS显示日历效果" src="http://www.i1766.com/zb_users/upload/201203181917104847.jpg" />如何用CSS显示日历效果看完这实例之后,觉得其实也没有多少代码,只是分别定义了背景,表格样式,TH样式,TD样式,ACTIVE样式,PREVIOUS,NEXT样式以及UL样式,将其分割起来,就容易理解了。相关:。
网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1