三行 CSS 完成
行事曆排版
講者: 王婕瑜
日期: 2020/12/27
OUTLINE
-
實作
-
Reference
實作
只有十分鐘啦邊做邊講吧
簡陋版成果
- 不限天數，自動對應週數
- 使用 <li> 做出類似 <table> 的排版
html 部分
<div class="calendar-wrapper">
<h1>December</h1>
<ul class="calendar">
<li class="weekday">SUN</li>
<li class="weekday">MON</li>
<li class="weekday">TUE</li>
<li class="weekday">WED</li>
<li class="weekday">THU</li>
<li class="weekday">FRI</li>
<li class="weekday">SAT</li>
<li class="first-day">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>
</ul>
</div>CSS Grid 屬性
grid-template-columns
grid-template-rows
grid-template-columns: auto auto auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 100px auto 25%;fr
將可用的剩餘空間按比例分割
repeat (次數, 格線)
重複隔線
CSS 部分
.calendar{
/* 轉成 grid layout 排版 */
display: grid;
/* 設置每週七天的樣式 */
grid-template-columns: repeat(7, 1fr);
}/* 設置第一天的位置 */
.first-day{
grid-column-start: 3;
}/* 簡單美化 */
.calendar-wrapper{
width: 280px;
}
.weekday{
background: #eee;
}
h1{
text-align: center;
}
ul{
/* 不設定項目編號 */
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}完整程式碼
<!DOCTYPE html>
<html>
<head>
<title>calendar</title>
<style type="text/css">
.calendar{
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day{
grid-column-start: 3;
}
.calendar-wrapper{
width: 280px;
}
.weekday{
background: #eee;
}
h1{
text-align: center;
}
ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="calendar-wrapper">
<h1>December</h1>
<ul class="calendar">
<li class="weekday">SUN</li>
<li class="weekday">MON</li>
<li class="weekday">TUE</li>
<li class="weekday">WED</li>
<li class="weekday">THU</li>
<li class="weekday">FRI</li>
<li class="weekday">SAT</li>
<li class="first-day">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>
</ul>
</div>
</body>
</html>REFERENCE
- Chris Coyier (2020). A Calendar in Three Lines of CSS. Retrieved from: https://css-tricks.com/a-calendar-in-three-lines-of-css/
- 卡斯伯 (2017). CSS Grid 屬性介紹. Retrieved from: https://wcc723.github.io/css/2017/03/22/css-grid-layout/
Thanks for listening.
三行 CSS 行事曆排版
By juliewah
三行 CSS 行事曆排版
SIRLA 109-1 This 15 Speech
