发表于： 2019-03-13 22:42:42
1 803
今天完成的事情：修改任务十，任务十二，完成任务十三侧边导航栏
明天计划的事情：任务十三全部
遇到的问题：暂无
收获：1注意css书写规范。2减少嵌套div。3学了侧边栏（aside+input+checked）
修改了任务十的底部logo，除了在全屏时，其他都独自占一行；
修改任务十的底部文字，增加上下间距。
修改任务十二：规范css书写顺序，删除无用代码，修改首页点击效果。
居中问题：
<header>
<img src="images-personal/back_icon.png" alt="back">
<span>个人主页</span>
<div></div>
</header>
因为用的是display: flex;
align-items: center;
justify-content: space-between;
原因：justify-content: space-between;是空间平分，但是hearer容器中第三个元素div没有设置宽度，就没占空间，平分出来就不是平均分配的感觉。
解决方案：将hearer容器中第三个元素div设置与img相同的宽。
侧边栏（aside+input）html部分。
<body>
<input type='checkbox' id='sidemenu'> <!--input类型；id要与 label的for一致--><aside> <!--菜单栏-->
<ul id="sideul">
<a href="##">
<img src="images/page/menu-icon-1.png"><li>公告</li><img src="images/page/menu-icon-r.png" >
</a>
<a href="##">
<img src="images/page/menu-icon-2.png"><li>设置</li><img src="images/page/menu-icon-r.png" >
</a>
<a href="##">
<img src="images/page/menu-icon-3.png"><li>帮助</li><img src="images/page/menu-icon-r.png" >
</a>
<a href="##">
<img src="images/page/menu-icon-4.png"><li>关于</li><img src="images/page/menu-icon-r.png" >
</a>
</ul>
</aside>
<div id='wrap'>
<header>
<label id='sideMenuControl' for='sidemenu'>≡</label>
<!--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定--></header>
<main>......</main>
<footer>......</footer>
</div>
<body>
在css修改#sidemenu、 aside 、#wrap 、label、#sideul、label:hover、#sideul li、#sideul li:hover、#sideul a 的样式。
然后用checked选择器进行类似hover类似媒体查询的效果。
返回列表
评论