這篇文章主要講解了“如何使用HTML5和CSS3制作日歷圖標(biāo)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用HTML5和CSS3制作日歷圖標(biāo)”吧！

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)金東免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

可選方案

幾年前我們可能需要使用PNG或者FIG圖片來實(shí)現(xiàn)。你現(xiàn)在也可以繼續(xù)使用這種方案，不過這種方案缺點(diǎn)很多，不方便修改，沒法被搜索收錄，并且無法縮放。一種更好的方案就是使用SVG。使用SVG的方案會非常靈活，但是我們沒必要使用SVG。

因此，我將使用沒太多人知道的HTML5元素time來實(shí)現(xiàn)。它是用來顯示日期或者時間的——可能是一個日程或者節(jié)假日。下面是time元素最簡單的使用語法（2014年9月20號下午9:01）：

<time>2014-09-20T21:01:00Z</time>

你可以寫具體到天：2014-09-20，到月：2014-09后者到年：2014。最末尾的”Z”代表的是協(xié)調(diào)世界時（UTC）。你可以使用自己的時區(qū)替換它，例如+01:00、-06:00等。

雖然這樣的事件格式很適合機(jī)器閱讀，但是人并不好理解。因此，你可以給time元素添加一個datetime屬性，將你的日期或者時間放在里面，使用更容易理解的內(nèi)容，經(jīng)過國際化等等。

<time datetime="2014-09-20T21:01:00+08:00">9:01pm, Saturday September 20^th, 2014</time>

當(dāng)使用微數(shù)據(jù)或者微格式時，你需要認(rèn)真考慮time元素。

日歷圖標(biāo)的HTML

使用下面這樣的HTML來構(gòu)成我們的日歷圖標(biāo)：

<time datetime="2014-09-20" class="icon">

  <em>Saturday</em>

  <strong>September</strong>

  <span>20</span>

</time>

給這個time 元素添加樣式”icon”。

我使用em、strong和span元素來代表周幾、月和日，便于定義CSS樣式。它們都是無語義行內(nèi)元素，因此不需要其他樣式，日期也是可讀的。當(dāng)然，你也可以根據(jù)需要使用其他元素。

日歷圖標(biāo)的CSS

我們首先定義圖標(biāo)外圍樣式：

time.icon

{

  font-size: 1em; /* change icon size */

  display: block;

  position: relative;

  width: 7em;

  height: 7em;

  background-color: #fff;

  border-radius: 0.6em;

  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;

  overflow: hidden;

}

圖標(biāo)的寬度和高度都是7em，因此我們可以把字體設(shè)置為任意大小，圖標(biāo)會隨之縮放。試試看！

圖標(biāo)底部的多頁效果是利用多個box-shadow樣式實(shí)現(xiàn)的。我最開始考慮使用偽類，但是這行不通，因?yàn)槲覀兌x了overflow:hidden（將頂上的月份部分的圓角切出來）。

我們把position設(shè)為relative，一邊定位里面的行內(nèi)元素。讓我給它們加上基礎(chǔ)樣式：

time.icon *

{

  display: block;

  width: 100%;

  font-size: 1em;

  font-weight: bold;

  font-style: normal;

  text-align: center;

}

通配符*選擇器，讓圖標(biāo)內(nèi)的多有元素使用相同的樣式。應(yīng)該沒有問題，不過如果你的日歷有不同的布局，你可能需要更明確些。

定義月份的樣式：

time.icon strong

{

  position: absolute;

  top: 0;

  padding: 0.4em 0;

  color: #fff;

  background-color: #fd9f1b;

  border-bottom: 1px dashed #f37302;

  box-shadow: 0 2px 0 #fd9f1b;

}

將橫條放在圖標(biāo)的頂部，使用虛線邊框?qū)崿F(xiàn)一個縫紉線的效果。月份橫條要超過縫紉線邊緣，我在下面使用了一個box-shadow。

星期放在圖標(biāo)的底部：

time.icon em

{

  position: absolute;

  bottom: 0.3em;

  color: #fd9f1b;

}

放大定位日期：

time.icon span

{

  font-size: 2.8em;

  letter-spacing: -0.05em;

  padding-top: 0.8em;

  color: #2f2f2f;

}

最后，我添加了點(diǎn)動畫效果，你的鼠標(biāo)滑到圖標(biāo)上時，它會抖動&mdash;&mdash;但是我把這個工作留給你，你自己來完成。

感謝各位的閱讀，以上就是“如何使用HTML5和CSS3制作日歷圖標(biāo)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用HTML5和CSS3制作日歷圖標(biāo)這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

標(biāo)題名稱：如何使用HTML5和CSS3制作日歷圖標(biāo)
網(wǎng)頁路徑：http://aaarwkj.com/article38/pdicsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、網(wǎng)站制作、搜索引擎優(yōu)化、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)