发表于： 2018-06-04 23:06:03

1 730

今天完成的事情：


折叠菜单、明天再修改下位置样式

大于768px;



小于768px时；


明天计划的事情： 


完成14和15


遇到的问题：


1.修改checkbox默认样式

先用属性选择器隐藏input

再对label设置样式，


html部分

<nav class="nav">

<div class="xiuzhenyuan">修真院|技能树</div>


<!-- <input type="checkbox" checked="checked"/> -->

<input type="checkbox" name="SocSecNum" id="SSN" />
<label for="SSN" class="wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
<br>

<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">职业</a></li>
<li><a href="#">推荐</a></li>
<li><a href="#">关于</a></li>
</ul>

</nav>


css部分


/* label标签 */

input[type='checkbox'] {
display: none;
}

#SSN:checked~ul {
display: none;
}

.wrap {
display: inline-block;
width: 20px;
height: 13px;
border: 1px solid transparent;
padding: 5px;
border-radius: 5px;
background: #29b078;
visibility: hidden;
position: absolute;
}

ul,
li {
list-style: none;
}

.line {
width: 20px;
height: 3px;
background: #dedede;
margin-bottom: 2px;
}




2.哪些标签不支持伪元素？（补充于2016.06.28）

我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。

伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。

究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。



收获：

见上




上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1