HTml5侧边栏基本格式制作_侧边栏怎么写html5-优快云博客

本文介绍了如何使用HTML5制作一个基本的侧边栏，重点在于通过CSS样式控制侧边栏的位置，利用选择器优先级实现left属性的覆盖效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#sideToggle:checked~aside {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个同级aside*/
/*position: absolute;*/
/*由于有其他选择器是同个目标（aside），同样的样式（绝对定位）,所以这里可以省略*/

left: 0px;

/*这里选择器优先级高，所以left 0会覆盖在选择时覆盖优先级低的里的left-200;

background-color: #00FF00;
/*//设置背景颜色变化直观些*/
}

#sideToggle:checked~#wrap {
/*//ID为#sideToggle的checkbox在打钩状态(即checked时)选择它后边每个ID为#wrap*/
padding-left: 220px;
background-color: #0099FF;
/*//设置背景颜色变化直观些*/
}
/*//设置足够大的label标签的padding不会因为侧边栏的出现而尴尬的被侧边栏遮住.*/

aside {
position: absolute;
/*//绝对定位，会与不同优先级的同一个目标共用绝对定位*/
top: 0;
/*//往上拉伸至顶*/
bottom: 0;
/*//往下拉伸至底*/
left: -200px;
/*//通过绝对定位,控制aside往左侧隐藏入200px*/
width: 100px;
/*//设置aside小于或等于200就好隐藏*/
background: deepskyblue;
/*//设置背景颜色变化直观些*/
}
</style>

<body>

<input type="checkbox" id="sideToggle" />


<aside>

22222</aside>
<div id="wrap">

<label id="sideMenuControl" for="sideToggle">侧边栏</label>


</div>



</body>

</html>