效果图：
html部分：
<div class="calender-wrap">
<div class="calender">
<div class="icon-title">
<h3>
<img src="./img/日历.png" alt="">
<span>日历</span>
</h3>
<div class="more-right">
<a href=""><span>更多内容</span></a>
</div>
</div>
<div class="calender-content">
<div class="calender-top">
<div class="calender-top-today">
<img src="./img/calender-icon.png" alt="">2022年7月29日 星期五
</div>
<div class="cal">
<ul class="calender-time">
<li class="month">8月</li>
<li>
<div class="day">一</div>
<div class="date">1</div>
</li>
<li>
<div class="day">二</div>
<div class="date">2</div>
</li>
<li>
<div class="day">三</div>
<div class="date">3</div>
</li>
<li>
<div class="day">四</div>
<div class="date">4</div>
</li>
<li>
<div class="day">五</div>
<div class="date">5</div>
</li>
<li>
<div class="day">六</div>
<div class="date">6</div>
</li>
<li>
<div class="day">日</div>
<div class="date">7</div>
</li>
</ul>
</div>
</div>
<div class="calender-bottom">
<ul>
<li>
<div class="cal-left">天赋培养</div>
<div class="cal-right">
<div class="cal-prev" onclick="prev1()"></div>
<div class="cal-ID-Photo-wrap">
<ol class="cal-ID-Photo" id="cal-ID-Photo1">
<li>
<a href="#">
<img src="./img/神子证件照.jpg" alt="">
<div class="name">八重神子</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/啊影证件照.png" alt="">
<div class="name">啊影</div>
</a>
</li>
<li>
<a href="">
<img src="./img/钟离证件照.png" alt="">
<div class="name">钟离</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/巴巴托斯证件照.png" alt="">
<div class="name">巴巴托斯</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/阿贝多证件照.png" alt="">
<div class="name">阿贝多</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/五郎证件照.png" alt="">
<div class="name">五郎</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/早柚证件照.png" alt="">
<div class="name">早柚</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/行秋证件照.png" alt="">
<div class="name">二小姐</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/皇女证件照.png" alt="">
<div class="name">皇女</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/烟绯证件照.png" alt="">
<div class="name">烟绯</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/班尼特证件照.png" alt="">
<div class="name">班尼特</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/辛焱证件照.png" alt="">
<div class="name">辛焱</div>
</a>
</li>
<li>
<a href="">
<img src="./img/云堇证件照.png" alt="">
<div class="name">云堇</div>
</a>
</li>
</ol>
</div>
<div class="cal-next" onclick="next1()"></div>
</div>
</li>
<li>
<div class="cal-left">武器突破</div>
<div class="cal-right">
<div class="cal-prev" onclick="prev2()"></div>
<div class="cal-ID-Photo-wrap">
<ol class="cal-ID-Photo" id="cal-ID-Photo2">
<li>
<a href="#">
<img src="./img/神乐之真意.png" alt="">
<div class="name">神乐之真意</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/阿莫斯.png" alt="">
<div class="name">阿莫斯之弓</div>
</a>
</li>
<li>
<a href="">
<img src="./img/苍古自由之誓.png" alt="">
<div class="name">苍古自由之誓</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/薙草之稻光.png" alt="">
<div class="name">薙草之稻光</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/护摩之杖.png" alt="">
<div class="name">护摩之杖</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/冬极白星.png" alt="">
<div class="name">冬极白星</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/尘世之锁.png" alt="">
<div class="name">尘世之锁</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/天空之脊.png" alt="">
<div class="name">天空之脊</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/狼的末路.png" alt="">
<div class="name">狼的末路</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/若水.png" alt="">
<div class="name">若水</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/雾切之回光.png" alt="">
<div class="name">雾切之回光</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/不灭月华.png" alt="">
<div class="name">不灭月华</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/松籁响起之时.png" alt="">
<div class="name">松籁响起之时</div>
</a>
</li>
<li>
<a href="#">
<img src="./img/和璞鸢.png" alt="">
<div class="name">和璞鸢</div>
</a>
</li>
</ol>
</div>
<div class="cal-next" onclick="next2()"></div>
</div>
</li>
<li style="height: auto;">
<div class="cal-left">限时活动</div>
<ol class="activity">
<li>
<a href="">
<img src="./img/远海诗夏游记.png" alt="">
<div class="introduce">
<div class="title">「远海诗夏游纪」活动</div>
<div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div>
</div>
</a>
</li>
<li>
<a href="">
<img src="./img/幻影留声.png" alt="">
<div class="introduce">
<div class="title">「幻声留形」活动</div>
<div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div>
</div>
</a>
</li>
<li>
<a href="">
<img src="./img/残像暗战.png" alt="">
<div class="introduce">
<div class="title">「残像暗战」活动</div>
<div class="time">2022.07.15 10:00 - 2022.08.23 23:59</div>
</div>
</a>
</li>
</ol>
</li>
</ul>
</div>
</div>
</div>
</div>css部分：
.calender-top-today {
padding: 0 12px 0 10px;
height: 40px;
line-height: 40px;
background: #fbfbfb;
border-radius: 3px;
border: 1px solid #f4f4f4;
font-size: 14px;
box-sizing: border-box;
}
.calender-top-today img {
width: 24px;
height: 24px;
vertical-align: middle;
margin-top: -4px;
}
.calender-top .cal {
margin-top: 10px;
}
.calender-time {
display: flex;
justify-content: space-between;
height: 60px;
}
.month {
background: url(../img/month背景图.png) center/cover no-repeat;
font-size: 24px;
font-weight: bold;
color: #b59b90;
width: 101px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.calender-time li {
margin-right: 5px;
}
/* 选中后面所有兄弟 */
.month ~ li {
background: #f4f4f4;
height: 60px;
width: 0px;
flex-grow: 1;
text-align: center;
cursor: pointer;
}
.calender-time li:nth-of-type(6){
background: url(../img/day背景图.png) center/contain no-repeat;
}
.calender-time .day {
margin-top: 8px;
font-size: 12px;
color: #a9a9a9;
line-height: 16px;
}
.calender-time .date {
font-weight: bold;
margin-top: 6px;
line-height: 22px;
color: #a9a9a9;
font-size: 17px;
}
.calender-bottom > ul > li {
margin: 5px -5px 0 0;
height: 125px;
display: flex;
}
.calender-bottom .cal-left {
font-size: 14px;
color: #333;
border: 1px solid #f4f4f4;
background: #fbfbfb;
width: 100px;
border-radius: 3px;
margin-right: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cal-right {
display: flex;
align-items: center;
}
.cal-prev,
.cal-next {
margin: 0 5px 0 1px;
width: 28px;
height: 28px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
flex-shrink: 0;
cursor: pointer;
}
.cal-prev {
background-image: url(../img/cal-toleft.png);
}
.cal-next {
background-image: url(../img/cal-toright.png);
}
/* 日历证件照部分 */
.cal-ID-Photo-wrap{
overflow: hidden;
}
.cal-ID-Photo {
align-items: center;
display: flex;
flex-grow: 0;
width: 607px;
position: relative;
transition: all .5s;
}
.cal-ID-Photo > li {
margin-left: 10px;
width: 60px;
}
.cal-ID-Photo > li:nth-of-type(1) {
margin-left: 0px;
}
.cal-ID-Photo a img {
width: 60px;
height: 60px;
border-radius: 3px;
background: #f5f5f5;
}
.cal-ID-Photo a .name {
margin-top: 5px;
font-size: 12px;
color: #333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
/* 限时活动 */
.activity {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: flex-end;
}
.activity li > a {
height: 60px;
display: block;
margin: 5px 10px 0 0;
padding: 0 10px;
display: flex;
align-items: center;
border-radius: 4px;
}
.activity li:nth-of-type(1) > a {
background: rgb(197, 243, 255) none repeat scroll 0% 0%;
color: rgb(16, 63, 86);
margin-top: 0;
}
.activity li:nth-of-type(2) > a {
background: rgb(214, 175, 237) none repeat scroll 0% 0%;
color: rgb(43, 7, 75);
}
.activity li:nth-of-type(3) > a {
float: right;
background: #fbd2d2;
color: #880c0c;
width: 70%;
}
.activity a img {
height: 40px;
margin-right: 9px;
}
.activity .introduce .title {
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
.activity .introduce .time {
font-size: 12px;
line-height: 14px;
margin-top: 8px;js部分：
function prev1() {
var Photo = document.getElementById("cal-ID-Photo1");
Photo.style.right = "0px";
}
function next1() {
let Photo = document.getElementById("cal-ID-Photo1");
Photo.style.right = "295px";
}
function prev2() {
var Photo = document.getElementById("cal-ID-Photo2");
Photo.style.right = "0px";
}
function next2() {
let Photo = document.getElementById("cal-ID-Photo2");
Photo.style.right = "365px";
}
代码奉上，感谢大家支持！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
