做一件事情不难 难的是天天坚持去做
----自勉
今天完成的事
1.在隐藏导航栏这个卡了几天 翻了许久找到了思路并理解了师兄说的方向
使用checked 来控制点击事件
导航栏的默认margin-left设置为负值
点击之后checked使导航栏margin为正值或者0
2.先用另外的dome试验 确定架构及思路
3.修改版本选择界面的架构
分成三个部分
导航栏按钮
导航栏
主体
<input type="checkbox" id="input">
<label class="label" for="input">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav" id="nav">
<ul class="ul">
<li>公告</li>
<li>设置</li>
<li>帮助</li>
<li>关于</li>
</ul>
</nav>
<main class="main">
<header class="header">
</header>
</main>
4.调整样式
.label {
.fixed;
.flex;
.width(30px);
.height(30px);
.pointer;
top: 10px;
left: 10px;
flex-direction: column;
justify-content: space-around;
z-index: 100;
span {
.width(30px);
.height(3px);
.white;
}
}
.label:checked~.nav {
left: 0;
transition: left 500ms ease;
}
.label:checked~.main {
transform: translateX(300px);
transition: transform 500ms ease;
}
.nav {
.fixed;
.block;
.width(300px);
.height(100%);
top: 0;
left: -300px;
transition: left 500ms ease;
.ul {
position: relative;
list-style-type: none;
margin: 100px 0;
padding: 0;
}
}
.main {
.block;
.fixed;
.vw100;
.height(100%);
transform: translateX(0px);
transition: transform 500ms ease;
.header {
.bac-color;
.fixed;
top: 0;
left: 0;
.vw100;
.height(50px);
}
}
5.发觉导航栏按钮不起作用 排查后发现
lable:checked~.nav {
写错了
正确的写法应该是
input:checked~.nav {
6.给导航栏按钮添加样式 使其在点击后成X形状
input:checked~.label {
transform: rotate(360deg);
transition: transform 250ms ease;
span:nth-of-type(1) {
transform: translateY(3px) rotate(45deg);
}
span:nth-of-type(2) {
display: none;
}
span:nth-of-type(3) {
transform: rotate(-45deg);
}
}
明天的计划
1.完成导航栏的样式调整
2.完成版本选择页面的主体部分
3.开始游戏页面的架构优化
遇到的问题
1.对CSS功能的不熟悉
checked
这个选择器用过但是没能理解原理
后面需要用到的时候没想到
后面找到这个选择器之后也理解了师兄说的思路
今天的收获
1.理解了一些checked的用法
用来根据点击事件来控制并赋予某些元素不同的样式
2.学习了:nth-of-type() 选择器
：nth-of-type（）用来选择同一父元素下特定类型的第N个元素
3.
transform-origin作用
这个属性是用来设定改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个
transform-origin: 50px 50px;，表示该容器的旋转中心变为以盒模型左上角为原点，X和Y轴距离50px为原点进行旋转。
返回列表
评论