今天完成的事
1.架构第三个页面的header部分
<header>
游戏结果
<div class="header-after"></div>
</header>
2.给header添加样式
header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color:
rgb(41, 189, 224);
background-image: url("矩形5拷贝2.png");
background-position: 10px;
background-repeat: no-repeat;
background-size: 30px;
text-align: center;
line-height: 50px;
color:
white;
z-index: 10;
.header-after {
display: block;
position: absolute;
margin: 0px;
top: 15px;
right: 10px;
width: 20px;
height: 20px;
background-color: transparent;
border-radius: 50%;
border: 2px solid white;
}
.header-after:after {
content: "";
display: block ;
position: absolute ;
bottom: 3px;
left: 9px;
height: 10px;
width: 2px;
background-color:
white;
}
.header-after:before {
content: "";
display: block ;
position: absolute ;
height: 2px;
width: 2px;
right: 9px;
top: 3px;
background-color:
white;
}
}
3.对于页面二的问题 思考后调整架构 将footer部分从main部分中独立出来 这样就不会受到影响并且在导航栏显示或隐藏的情况下都会固定在最底部
唯一的缺点就是到导航栏在显示的时候footer不能和main部分一样右移
也许还有我没想到的方法
4.根据师兄的建议 修改main主体的属性
将因此导航栏以及的main主体的过度动画属性去除
重新调整各个元素显示层次
将footer放入main主体元素中
5.修改音频组件的长度 避免右侧出现一个空白部分进而产生横向滚动条
audio {
.absolute;
opacity: 0;
right: 9px;
top: 5px;
width: 49px;
.pointer
}
6.仔细寻找之后 发现小方块不出现的原因是在less文件中 样式的层次放置错误
.content:hoverf放置在.content之中 导致玩家方块在hover时没有引用到样式
将.content:hover与.content并列放置之后问题解决
7.给导航栏按钮添加反向旋转的动画 使页面更加生动 开启与关闭的动画前后呼应
transform: rotate(-360deg);
transition: transform 250ms ease;
8.给column主体添加下内边距 防止下拉到底部之后 玩家方块的hover的小方块被阻挡
padding-bottom: 80px;
9.细微调整四个小方块的图标雪碧图定位数据
10.完成页面三的任务总结部分
<div class="h1">
<p class="p1">警察胜利</p>
<p class="p2">太棒了！你知道吗？在抓鬼游戏中只有20%的卧底取得游戏最终的胜利哦</p>
<p class="p3">本次游戏共计用时0小时25分钟</p>
<dt class="p3 dt">
<dl class="dl">杀   手0人</dl>
<dl class="dl">警   察1人</dl>
<dl class="dl">平   民6人</dl>
<dl class="dl">狙击手0人</dl>
<dl class="dl">医   生1人</dl>
</dt>
<p class="p3 p5">
卧底词汇：爱新觉罗
<br/>
水民词汇：努尔哈赤
</p>
</div>
并添加样式
.h1 {
z-index: 10;
.p1 {
display: table-cell;
position: relative;
top: 50px;
width: 100vw;
height: 140px;
padding: 15px;
color:
white;
background-color:
rgb(41, 189, 224);
background-image: url("图层1.png") ,url("图层2.png");
background-repeat: no-repeat;
background-position: center,bottom;
background-size: 60px,200px;
text-align: center;
vertical-align: bottom;
}
.p2 {
display: block;
position: relative;
top: 32px;
color:
rgb(255,200,101);
background-color:
rgb(41, 189, 224);
padding: 10px 40px 20px 40px;
}
.p3 {
display: block;
position: relative;
color:
white;
background-color:
rgb(41, 189, 224);
padding: 0px 40px 0px 40px;
font-size: 12px;
margin: 0px;
}
.dt {
display: flex ;
flex-wrap: wrap;
padding: 0px 40px 0px 40px;
.dl {
margin: 0px;
width: 25vw;
}
}
.p5 {
padding: 0 40px 10px 40px;
}
}
11.简单架构每日游戏情况的主体
<main class="main">
<div class="main-div">
<dt class="main-dt">
<dl class="dl1">第一天</dl>
<dl class="dl2">0小时07分</dl>
<dl class="dl3">晚上：5号被杀手杀死。5号是水民</dl>
<dl class="dl4">白天：8号被全民投票投死，8号是杀手</dl>
</dt>
</div>
12.引用样式
.main {
display: block ;
width: 100%;
.main-div {
display: flex ;
position: absolute ;
margin: 0 0 70px 0;
flex-direction: column;
width: 100%;
overflow: hidden;
border-bottom: 1px solid rgb(227, 228, 229);
.main-dt {
display: block;
position: relative;
padding: 10px 20px;
.dl1 {
position: absolute;
margin: 0px;
top: 10px;
left: 20px;
}
.dl2 {
position: absolute;
margin: 5px 0px 0px 0px;
top: 10px;
right: 10px;
color:rgb(216,218,218);
font-size: 12px;
}
.dl3 {
position: relative;
padding: 20px 0px 0px 0px;
color:rgb(189,190,191);
}
.dl4 {
color:rgb(189,190,191);
margin: 0px 0px 0px 0px;
}
}
}
}
13.架构footer
<footer class="footer">
<a class="footer-a" type="button" href="task13-2.html">
再来一局
</a>
<a class="footer-a footer-a2" type="button">分享并上传</a>
</footer>
14.引入样式
.footer {
display: flex ;
position: fixed ;
bottom: 0;
background-color: rgba(41, 189, 224, 0.5);
flex-wrap: wrap;
width: 100%;
height: 70px;
justify-content: space-around;
align-items: center;
.footer-a {
background-color:rgb(243,112,114);
width: 45vw;
height: 50px;
border-radius: 5px;
line-height: 50px;
text-align: center;
color:white;
}
.footer-a2 {
background-color: rgb(248,180,69);
}
}
15.将header上的主页图标修改为可以跳转到版本选择页面
添加一个a元素到header中并添加样式和跳转
<header>
<a class="header-a" type="button" href="task13-1.html"></a>
游戏结果
<div class="header-after"></div>
</header>
.header-a {
display: block;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
left: 10px;
background-image: url("矩形5拷贝2.png");
background-repeat: no-repeat;
background-size: 30px;
}
明天的计划
1.开始任务14
遇到的问题
1.不知道是我设置错误还是vscode的问题
less里引用另一个less文件里的公用类时时不时就会出现问题
只能完整输入属性与属性值来解决
今天的收获
返回列表
评论