0
我新的CSS，建設這個日曆我做了這個，我需要這個日曆放入一個JSP頁面。CSS日曆路線
- 這跨越了整個頁面。任何人都可以提出如何使可調整大小
- 還當我必須做出箱空到本月1日起移至 一週的一天框上下移動。有什麼可以做 來修復
- 有沒有更好的方式來做到這一點，需要這樣的以這種方式與工具 提示。感謝您的期待。
* {
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%;
height: 75px;
text-align: center;
margin-bottom: 20px;
font-size: 17px;
border: 3px solid #73AD21;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
@media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
@media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<head/>
<body>
<h1>CSS Calendar</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> </li>
<li>1<br><br>$1.25
</li>
<li>2<br><br>$1.25
</li>
<li>3<br><br>$1.25
</li>
<li>4<br><br>$1.25
</li>
<li>5<br><br>$1.25
</li>
<li>6<br><br>$1.25
</li>
<li>7<br><br>$1.25
</li>
<li>8<br><br>$1.25
</li>
<li>9<br><br>$1.25
</li>
<li>10<br><br>$1.25
</li>
<li>11<br><br>$1.25
</li>
<li>12<br><br>$1.25
</li>
<li>13<br><br>$1.25
</li>
<li>14<br><br>$1.25
</li>
<li>15<br><br>$1.25
</li>
<li>16<br><br>$1.25
</li>
<li>17<br><br>$1.25
</li>
<li>18<br><br>$1.25
</li>
<li>19<br><br>$1.25
</li>
<li>20<br><br>$1.25
</li>
<li>21<br><br>$1.25
</li>
<li>22<br><br>$1.25
</li>
<li>23<br><br>$1.25
</li>
<li>24<br><br>$1.25
</li>
<li>
<div class="tooltip">25<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">26<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">27<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">28<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">29<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">30<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
<li>
<div class="tooltip">31<br><br>$1.25
<span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
</div>
</li>
</ul>
</body>
</html>
謝謝，但 一起使用
vertical-align: middle並沒有太大的幫助，如果你看一下結果空的第一月的一天箱仍與日曆的休息對齊。 [link] https://jsfiddle.net/wdsLapz7/ –要修正方塊對齊方式，可以在'.days li'類中使用'vertical-align：bottom'，這樣方塊的底部就會對齊到線。 – Gaara
偉大的Gaara，你還可以告訴我整個日曆的大小，因爲它佔據整個頁面。 –