头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】
css
*{
margin:0px;
padding:0px;
}
.main{
width:100%;
height:600px;
background-color:red;
}
.content{
width:1000px;
height:2300px;
background-color:#ccc;
margin: 0 auto;//Div居中
}
.logo{
width:1000px;
height:150px;
position:fixed;//此处是将头部Div固定在浏览器的指定位置,位置不随页面的移动等而变化
background-color:aqua;
text-align:center;//Div中内容居中
}
.o{
display:inline-block;//内部块,属于上级Div内容,由text-align:可实现居中。
width:200px;
height:100px;
background-color:green;
margin-top:10px;
padding-bottom:10px;
}
html代码
<div class="main">
<div class="content">
<div class="logo">
<div class="o">1</div>
<div class="o"&g