HTML案例：2022年美好祝福
对很多人来说是个特殊的日子，今天，是2022年的第一天，相信昨晚大家的朋友圈和微信群已经被送上了大量的祝福，我也是回了一趟家，陪家人渡过这一美好的节日，不过，晚上觉得无聊还是得来敲一敲代码，顺便在这里为大家送上美好的祝福，好了，直接上效果图：
效果图
这个案例没什么难度，就是把鼠标放到相应的语句上，就会展开，右边的文本和图片。
其中红色框里的文字是竖起来的，它是通过设置<p>标签的writing-mode: vertical-rl;属性来完成的。
差不多就这样，好了，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022年美好祝福</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="big-box">
<ul>
<li class="show" v-for='(item,index) in bless'>
<div class="endways">
<div class="title">
<p>{{item.sentence}}</p>
</div>
<div class="text">
<ul>
<li>
<p v-for='(text,demo) in item.text'>{{text}}</p>
<button>{{item.idiom}}</button>
</li>
</ul>
<div class="img-box">
<img v-for='(image,imageindex) in item.src' :src="image" alt="">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="../../js/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.big-box {
width: 80%;
height: 500px;
margin: 50px auto;
}
.big-box ul {
width: 100%;
height: 100%;
margin: 0 50px;
overflow: hidden;
}
.big-box ul .show {
float: left;
width: 50px;
height: 100%;
overflow: hidden;
margin-left: 10px;
transition: all 1s;
}
.big-box ul .show:hover {
width: 600px;
}
.endways {
width: 600px;
height: 100%;
}
.endways .title {
float: left;
width: 50px;
height: 100%;
background-color: rgb(250, 96, 96);
position: relative;
}
.endways .title p {
width: 30px;
font-size: 18px;
position: absolute;
bottom: 20px;
writing-mode: vertical-rl;
color: white;
margin: 10px;
}
.endways .text {
float: left;
width: 550px;
height: 96%;
background-color: rgb(255, 255, 255);
margin: 2% 0;
box-shadow: 0 0 8px rgba(139, 139, 139, 0.4)
}
.endways .text .img-box {
float: left;
width: 160px;
height: 100%;
margin-left: 30px;
overflow: hidden;
}
.endways .text .img-box img {
width: 160px;
min-height: 30%;
box-shadow: 0 0 2px rgba(51, 51, 51, 0.4);
margin: 0 auto;
}
.endways .text ul {
float: left;
width: 350px;
height: 100%;
margin: 0;
overflow: hidden;
margin-left: 10px;
}
.endways .text ul li p {
margin: 14px 0;
padding: 0;
font-size: 14px;
font-weight: 520;
}
.endways .text ul li button {
width: 100px;
height: 40px;
border-radius: 50px;
color: white;
font-size: 16px;
background-color: rgb(255, 97, 150);
border: 0;
margin-top: 40px;
cursor: pointer;
box-shadow: 0 2px 2px rgba(139, 139, 139, 0.2)
}
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#app',
data: {
bless: [{
sentence: '2022年美好祝愿:元旦快乐',
text: ['1.溪水不知道为什么总要流向大海，蝴蝶不知道为什么总要在空中飞舞，我不知道为什么短信总要发送给你。可能是元旦到了的缘故吧，祝你元旦节快乐。',
'2.有一抹色彩叫做阳光，有一种味道叫做温馨，有一款装饰叫做心意，有一份祝福叫做平安，朋友，元旦快乐，健康幸福。',
'3.元旦到，祝你上班偷偷傻笑，下班活蹦乱跳，嘴里哼着小调，不知不觉跑调，早上叽哩呱啦乱叫，晚上唏哩呼噜睡觉，醒来一看吓一跳，枕边全是钞票。',
'4.元旦快乐，我的朋友！愿你：年年圆满如意，月月事事顺心，日日喜悦无忧，时时高兴欢喜，刻刻朝气蓬勃，祝福你！'
],
idiom: '元旦快乐',
src: ['./images/yd1.jpeg', './images/yd2.jpeg']
}, {
sentence: '2022年美好祝愿:万事如意',
text: ['1.新年的钟声缓缓敲响，送走了旧年的回味悠长，迎来了新年的热情绽放，借着一声又一声吉祥的钟声，为你送上最美的新年祝福。祝你在新的一年里身体健康，阖家幸福，万事如意！',
'2.过年总要盘点一下，不仅数钱，也要盘点人情、心态和健康。对那些过往的人和事，该翻篇就翻篇。健康最重要的元素是：不纠缠不愉快的往事，跟对的人交往，心存善意，顺其自然，无愧于心地向前走。',
'3.过年的节奏，春节的前奏。慌乱的脚步，拥挤的归途。积攒的思念，绽放的笑脸，恍恍惚惚又一年，过年回家，回家过年，团团圆圆迎新年。'
],
idiom: '万事如意',
src: ['./images/ry1.jpeg', './images/ry2.jpeg']
},
{
sentence: '2022年美好祝愿:心想事成',
text: ['1、如果这世上真的能够心想事成，那就让我赌上意志与献上生命祈祷吧,只为此次的心想事成。',
'2、人生向往，唯愿：平平淡淡+安安乐乐；事业追求，祈愿：平平坦坦+顺顺安安；平安夜祝福你，愿你一生平平淡淡却和安安乐乐相伴，追求从此平平坦坦却与顺顺安安缠绵！',
'3、愿你有一份轻松的心情愿你所做的一切顺利，愿你的坚持发芽、梦想开花相信自己,去吧你的笑可以美了这世界!',
'4、尽力做好自己份内的事，剩下的就交给老天，其实人生如是而已。'
],
idiom: '心想事成',
src: ['./images/xx1.jpeg', './images/xx2.jpeg']
}, {
sentence: '2022年美好祝愿:招财进宝',
text: ['1、盼望着，盼望着，开业的鞭炮响了，亲朋的笑声更亮了，心豁亮了，梦靠近了，无论走到何时何地，我都支持你，加油！祝愿开业大吉，生意兴隆。',
'2、财神祝福你：冬去春来百花香，一条信息送四方，东方送你摇钱树，南方送你永安康，西方送你好生意，北方送你钱满箱。',
'3、开店大喜，六六六，顺风顺水朝前走；开业大吉，八八八，恒发隆发发发发；开张大乐，九九九，好运财运到永久。祝福你生意兴隆，财源茂盛，人气旺旺，财富旺旺。',
'4、秋风送爽心舒畅，财源滚滚到身旁。事业顺利佳绩创，工资奖金腰包藏；生意兴隆达三江，迎来送往多繁忙；万事顺心好运傍，财运亨通不停享。818发一发，祝你发发发！'
],
idiom: '招财进宝',
src: ['./images/zc1.jpeg', './images/zc2.jpeg']
},
{
sentence: '2022年美好祝愿:合家欢聚',
idiom: '合家欢聚',
text: ['1、合家欢，甜蜜蜜；全家福，甜蜜蜜；爱情美，甜蜜蜜；事业红，甜蜜蜜。祝你：爱情甜蜜，心情甜蜜，生活甜蜜，家庭甜蜜！',
'2、幸福，原来是有声音的。人们总要在清醒的时候，才听的。只有理智清醒时，还能放心去爱的感情，才是值得永久珍藏的幸福。',
'3、祝全家身体健康，因为身体是本钱；团结和睦，因为家和万事兴；生活幸福，因为这是人生追求的目的。',
'4、收藏无助，典当愁苦，整理心情，展开坦途，这个地方是家，给我们无数，却不求回报。祝福你的家庭妻贤子孝，温馨幸福。',
'5、小小家庭，幸福无比，甜蜜四溢，装满温馨，交好运气，事事如意，无忧无虑，快乐第一，祝：合家幸福，万事如意。'
],
src: ['./images/hj1.jpeg', './images/hj2.jpeg']
}, {
sentence: '2022年美好祝愿:一帆风顺',
text: ['1、道离别，离别就在眼前；说再见，再见不会是永远。芳草萋萋下，我将你送别，祝愿你今后的道路越走越宽，越走越顺，一路珍重！',
'2、人生路，有点苦，走过风，走过雨，路过欢笑，经过痛苦，有些感情，停留心中，有些朋友，时常挂念，朋友，一路保重！',
'3、如果生活的不开心，就去走另一条更想去的路吧，相遇难得，愿你一路顺风，累的时候也要回过头一起笑。',
'4、祝你一路顺风，半路失踪；祝你笑口常开，笑死活该；祝你天天开心，两腿抽筋；祝你万事如意，处处碰壁。',
'5、欢迎乘坐旅途祝福快车，起点是祝福，旅程是健康站，幸福站，快乐站，好运站，终点是平安站。愿你一路顺风，旅途愉快！'
],
idiom: '一帆风顺',
src: ['./images/yf1.jpeg', './images/yf2.jpeg']
}
]
},
})
发表评论 (审核通过后显示评论)：