昨天效率有点低,没有上传小练习,今天补上;
主要使用的是背景属性中的固定背景图片,实际上应用并不是很多
类似于qq的页面 链接:https://im.qq.com/index
代码
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 1000px;
/* 溢出裁切 */
overflow: hidden;
}
.top1{
background:url(./img/bg1.png) no-repeat center fixed ;
}
.top2{
background:url(./img/bg2.png) no-repeat center fixed ;
}
.top3{
background:url(./img/bg3.png) no-repeat center fixed ;
}
p{
background: rgba(249, 247, 250, 0.8);
height:100px;
width: 100%;
margin-top: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!--三张背景图 -->
<div class="top1"><p>提示信息</p></div>
<div class="top2"><p>提示信息</p></div>
<div class="top3"><p>提示信息</p></div>
</body>