发表于： 2018-06-01 21:08:50
1 558
今天完成的事情：
完成css搭建的栅格布局框架
完成css搭建的折叠导航栏，还有样式细节没有修改
明天计划的事情：
用sass编译栅格布局框架
页面的模块化
遇到的问题：
如何改变checkbox默认样式？
收获：
改变checkbox默认样式
https://www.cnblogs.com/qqfontofweb/p/7017229.html
虽然按照网上搜索的教程使用input标签的checkbox属性、css3 :checked选择器 完成了折叠导航栏，但时间所限感觉对于input标签的属性还是没有理解透，只学了自己任务需要的部分。
折叠导航的css以及html代码：
<style>
/* nav */
ul,li{
list-style: none;
}
.xiuzhenyuan{
display: inline-block;
}
.nav {
position: relative;
margin: 20px 0;
}
.menu{
display: inline-block;
position: absolute;
right: 0px;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
}
input{
display: none;
}
input[type="checkbox"] {
-webkit-appearance: none; /*清除复选框默认样式*/
background: #fff url(./header-1-1.png);
height: 24px;
vertical-align: middle;
width: 25px;
}
input[type="checkbox"]:checked {
background-position: -50px 0;
}
@media screen and (max-width: 768px) {
.nav {
position: relative;
min-height: 40px;
}
input{
display: block;
position: absolute;
top: 0;
right: 0;
}
.nav ul {
width: 90px;
padding: 5px 0;
position: absolute;
top: 35px;
right: 0;
border: solid 1px #aaa;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
}
input:checked + ul{
display: none;
}
}
</style>
</head>
<body>
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>
<input type="checkbox" checked="checked"/>
<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>
</body>
</html>
返回列表
评论