html代码|顶部固定浮动横幅
时间:2021-11-08 10:14:26 阅读:1348
Markup
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--自适应代码-->
<header class="zshaowl">
<div class="zshao vip">
<!-- 内容放下面 -->
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<!-- 内容放上面面 -->
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
<img src="http://img.zshao.vip/2021/04/20/3ec1f2ecb2df1.jpg">
</div>
<style type="text/css">
.zshaowl {
position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
height: 44px; padding: 0 10px;/* 模块大小 */
background-color: #fff ;/* 模块底色 */ opacity: 0.8; /* 透明效果设置 */
z-index: 10;
}
.zshao.vip {
height: 30px; padding: 7px 0;/* 模块大小 */
text-align: center;/* 居中 */
}
.background img {/*可以删除*/
width: 100%;/*height: 100%;*/
}
</style>
复制成功!跟随屏幕移动
网友评论