html代码|顶部固定浮动横幅
时间:2年前 阅读:871
<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>
跟随屏幕移动
网友评论