仓酷云

标题: CSS教程之CSS网页制造实例:制造有弹性的日历表 [打印本页]

作者: 小女巫 时间: 2015-1-15 23:27
标题: CSS教程之CSS网页制造实例:制造有弹性的日历表
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介：css教程-怎样用纯CSS打造一个日历.
传统的日历是在一张页面分别出几个格子.作为一个网页计划师,你有权力用表格来做出效果,我也不会说你错了.

那末做为一个尺度的WEB计划师来讲,恪守WEB的尺度优点是不言而语的.那末我们来看下怎样利用CSS来做出一个有弹性的日历表出来--为何说是有弹性的,由于日历的巨细能够跟着扫瞄器主动调剂.

最后的效果演示
点击这里下载

三个有序列表(ol)

我们往返想一下日历的格局,明显一个月的日历并非单一的有序列表,而是有三个.为何说是有三个,别急我们往下看.我们在看日历表的时分,是否是会看到每月的一号纷歧定是从礼拜一入手下手,最初一号是以礼拜天停止的.因而在每月的日期前后各加一个有序例表.(如今晓得了吧,不晓得的面避往^_^)

==========================

<olclass="calendar"start="6">

<liid="lastmonth">
<olstart="29">
<li>29</li>
<li>30</li>
</ol>
</li>

<liid="thismonth">
<ol>
<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>10</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>
</ol>
</li>

<liid="nextmonth">
<ol>
<li>1</li>
<li>2</li>
</ol>
</li>

</ol>
==========================

上面是CSS款式表

========================
/*
*CSSCalendar
*TimWright
*ChrisCoyier
-----------------------------*/

*{margin:0;padding:0;}
body{font:1em/1.4Verdana,Arial,Helvetica,sans-serif;
background:url(images/bg.jpg)topcenterno-repeat#545454;}
body*{display:inline;}
ol.calendar{width:52em;margin:0auto;display:block;min-height:200px;
background:url(images/tl.png)topleftno-repeat;padding:12px0020px;}
li{list-style:none;}
p.link{text-align:center;display:block;}
h1{display:block;width:200px;height:76px;
background:url(images/july.png);text-indent:-9999px;margin:15pxauto;}

/*
*Daystyles
-------------------------*/
lili{width:6em;height:6em;float:left;margin:.2em;padding:.2em;overflow:auto;
background:url(images/day-bg.png)bottomrightno-repeat;}

/*
*Daycontent(UL/OL&P)
-------------------------*/
lilip{font-size:.7em;display:block;}
liliol{width:auto;}
liliulli,
liliolli{font-size:.7em;display:block;height:auto;width:auto;background:none;
margin:0;padding:.2em0;float:none;}

/*
*Holidayclass
-------------------------*/
lili.holiday{}

/*
*Inactivemonths
-------------------------*/
li#lastmonthli,
li#nextmonthli{background:url(images/day-bg-inactive.png);}
=========================

</p>
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

作者: 莫相离 时间: 2015-1-16 16:20
标题: CSS教程之CSS网页制造实例:制造有弹性的日历表
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 若相依 时间: 2015-1-18 18:51
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 海妖 时间: 2015-1-27 17:56
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 再见西城 时间: 2015-2-5 14:37
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: admin 时间: 2015-2-12 07:54
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 小妖女 时间: 2015-3-3 02:09
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 老尸 时间: 2015-3-11 09:09
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 再现理想 时间: 2015-3-25 21:55
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://www.ckuyun.com/)