今天完成的内容
1.添加音频组件
<div class="miusc">
<div></div>
<audio src="东风破.mp3" controls="controls"></audio>
</div>
2.给音频组件添加样式 并使其透明隐藏
.miusc {
.block;
.relative;
top: 50px;
.height(50px);
background-color: rgb(185, 233, 245);
div {
.block;
.absolute;
right: 15px;
top: 5px;
.width(40px);
.height(40px);
background-color: #ffb50c;
border-radius: 50%;
}
div::after {
content: "";
.absolute;
top: 10px;
left: 15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid white;
}
audio {
.absolute;
opacity: 0;
right: -45px;
top: 5px;
width: 100px;
.pointer
}
}
3.架构“点击得票……”文字部分
<div class="toupiao">
点击得票数最多人的头像
</div>
4.文字部分引入样式
.toupiao {
.block;
.relative;
.bac-color;
padding: 10px 0px 0px 50px;
.white;
white-space: nowrap;
top: 50px;
color: white;
}
.toupiao::before {
content: "";
.relative;
top: -5px;
left: 18px;
border-top: 10px solid rgb(185, 233, 245);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
5.架构单个玩家部分
<div class="column">
<div class="content">水民
<div class="div">1号</div>
<div class="hover1"></div>
<div class="hover2"></div>
<div class="hover3"></div>
<div class="hover4"></div>
</div>
</div>
6.添加样式
.column {
.flex;
.vw100;
flex-wrap: wrap;
justify-content: space-around;
.absolute;
top: 180px;
margin-bottom: 70px;
.content {
.relative;
width: 19vw;
height: 19vw;
text-align: center;
line-height: 19vw;
background-color: rgb(243, 200, 149);
margin: 5vw;
border: 1vw solid rgb(245, 255, 245);
.div {
.block;
.absolute;
.vw100;
height: 4vw;
line-height: 4vw;
bottom: 0px;
background-color: rgb(130, 175, 155);
color: white;
font-size: 1vw;
}
.content:hover .hover1 {
.block;
.absolute;
bottom: -6vw;
left: -1vw;
width: 4vw; /*设点方块的宽 自适应变化大小*/
height: 4vw; /*设点方块的高 自适应变化大小*/
background-image: url("组4.png");
background-repeat: no-repeat;
background-color: white;
background-position: 0.25vw 0px;
background-size: 16vw 4vw;
}
.content:hover .hover2 {
display: block;
position: absolute;
bottom: -6vw;
left: 4.66vw;
width: 4vw;
height: 4vw;
background-image: url("组4.png");
background-repeat: no-repeat;
background-color: white;
background-position: -4vw 0vw;
background-size: 16vw 4vw;
}
.content:hover .hover3 {
display: block;
position: absolute;
bottom: -6vw;
left: 10.33vw;
width: 4vw;
height: 4vw;
background-image: url("组4.png");
background-repeat: no-repeat;
background-color: white;
background-position: -7.75vw 0.25vw;
background-size: 16vw 4vw;
}
.content:hover .hover4 {
display: block;
position: absolute;
bottom: -6vw;
left: 16vw;
width: 4vw;
height: 4vw;
background-image: url("组4.png");
background-repeat: no-repeat;
background-color: white;
background-position: -11.75vw 0.25vw;
background-size: 16vw 4vw;
}
}
}
7.架构footer部分
<footer class="footer">
<a class="footer-a" href="task13-3.html">投死</a>
</footer>
8.给footer添加样式
.footer {
.block;
.fixed;
bottom: 0px;
.vw100;
.height(70px);
.bac-color;
transform: translateX(0px);
transition: transform 500ms ease;
.footer-a {
.block;
.relative;
.height(50px);
.width(70vw);
top: 10px;
margin-left: 15vw;
background-color: rgb(248, 180, 69);
text-align: center;
line-height: 50px;
color: white;
}
}
明天计划的事
1.完成第三个页面
2.解决页面2存在的问题
3.完成任务
遇到的问题
1.鼠标移到玩家方块上时 设定的hover样式四个小图标没有显示
2.footer包含在main主体方块内，按照以前的方式不能紧贴在窗口下方 总是重叠在上方。
百度后发现
当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。
由于我对main主体设置了动画效果 导致position：fixed 相对于main主体定位而不是浏览器窗口
将main主体的
transform
设置为none时 position:fixed生效 但是当点击开隐藏导航栏时 footer又会受到影响跑到上方
暂时还没有比较好的兼容解决思路
暂时的一个模糊思路就是玩家方块部分设置可滑动 然后footer在main主体内使用margin强制定在屏幕下端
但是估计适应性不是很好
今天的收获
重构的时候很多样式都混乱了。代码久不巧就容易遗忘。
添加了一个侧面的隐藏导航栏，很多结构都得重新调整。
返回列表
评论