发表于： 2019-12-22 21:34:08
1 1028
一、今天完成的事情
在web端，侧边栏经常会出现，代码展示如何实现侧边栏的定位
实现侧边栏定位最简单的就是使用固定定位，但是固定定位在ie6中不支持
在ie6中只能使用代码中展示的js去计算定位
在其他浏览器中，可以使用代码中样式注释掉的方式进行定位，很方便
html
head
meta utf-8
titletitle
style
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
/*position: fixed;
* top：50%；
* margin-top:-50px;
* 使用固定定位可以实现侧边栏定位，完全不需要js；
但是在ie6中不支持固定定位*/
}
style
script
//window.onresize 处理在窗口放大缩小时，侧边栏的位置
//window.onload 处理在窗口加载时，侧边栏的位置
//window.onscroll 处理在窗口滚动时，侧边栏的位置
window.onresize = window.onload = window.onscroll = function()
{
var oDiv = document.getElementById("div1");
//在不同的浏览器中一下document.documentElement.scrollTop，document.body.scrollTop 这两个值总会有一个恒为0
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var t = (document.documentElement.clientHeight - oDiv.offsetHeight)/2;
oDiv.style.top = scrollTop + t + "px";
}
script
head
body height: 2000px;
div
div1div
body
html
以上代码实现，不管是放大缩小窗口还是滚动窗口都能实现侧边栏的定位
css侧边栏的隐藏与显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*隐藏checked复选框*/
#sidemenu{
display: none;
}
#sidemenu:checked + aside {
/*为被选中的sidemenu后的aside设置属性（紧邻）*/
left: 0;
/*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
}
#sidemenu:checked ~ #wrap {
/*为被选中的sidemenu后的wrap设置属性（非紧邻）*/
padding-left: 220px;
}
aside {
/*侧边栏,初始位置为-200px，即隐藏效果*/
position: absolute;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
background: black;
transition: 0.2s ease-out;
/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
}
h2 {
color: white;
text-align: center;
font-size: 2em;
}
/*控制侧边栏进出的按钮（外部包裹）*/
#wrap {
margin-left: 20px;
padding: 10px;
transition: 0.2s ease-out;
}
/*控制侧边栏进出的按钮（内部文字样式）*/
label {
/*控制侧边栏进出的按钮*/
background: white;
border-radius: 70px;
color: orange;
cursor: pointer;
display: block;
font-family: Courier New;
font-size: 2em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
display: inline-block;
}
label:hover {
background: #000;
}
#sideul li {
list-style: none;
color: white;
width: 100%;
height: 1.8em;
font-size: 1.5em;
text-align: center;
}
a {
text-decoration: none;
}
#sideul li:hover {
color: orange;
}
</style>
</head>
<body>
<input type='checkbox' id='sidemenu'>
<aside>
<h2>主菜单</h2>
<br />
<ul id="sideul">
<a href="##">
<li>首页</li>
</a>
<a href="##">
<li style="color: orange;">导航1</li>
</a>
<a href="##">
<li>导航2</li>
</a>
<a href="##">
<li>导航3</li>
</a>
<a href="##">
<li>导航4</li>
</a>
<a href="##">
<li>导航5</li>
</a>
<a href="##">
<li>导航6ʳ</li>
</a>
</ul>
</aside>
<div id='wrap'>
<label id='sideMenuControl' for='sidemenu'>≡</label>
<!--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定-->
</div>
</body>
</html>
这就是实现之后的效果
二、遇到的困难
就是侧边栏的实际应用
三、明天要做的事情
任务十三
四、收获
侧边栏的进一步学习了解
返回列表
评论