我是CSS新手,构建这个日历我做了这个,我需要这个日历适合JSP页面。
* {
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>
&#13;
答案 0 :(得分:0)
我不确定这是否是您正在寻找的。
vertical-align: bottom
来修复框对齐。margin: 0 auto
在页面中水平居中日历。https://jsfiddle.net/yxhgq1tz/3/
.wrapper {
width: 500px;
margin: 0 auto;
}
垂直居中。有几种选择。
vertical-align: middle
和display: table