H5的标题栏置顶css样式实现（附通用标题栏全代码） |
您所在的位置：网站首页 › steam怎么找回账户手机号过期了 › H5的标题栏置顶css样式实现（附通用标题栏全代码） |
H5的标题栏置顶css样式实现（附通用标题栏全代码）
|
前言
H5的标题栏置顶的实现方式有多种，但是我们的置顶还需要满足下面两种情况： 1、滚动时标题栏也要置顶 2、标题栏处不应该显示滚动条 如图所示：
title-bg ，标题背景的样式： position: relative; 使内容与标题分离。 content ，标题下的内容样式： .content { height: 100%; width: 100%; font-size: 0.15rem; /* 页面能滚动 */ overflow: scroll; } 通用的标题栏代码：1、滚动时标题栏也要置顶 2、标题栏处不应该显示滚动条 3、0.44rem = 44px (使用rem适配各种移动设备） Document * { box-sizing: border-box; } html { height: 100%; width: 100%; /* 根元素 */ font-size: 100px; color: #333333; } body { height: 100%; width: 100%; font-size: 0.13rem; margin: 0; background: #f6f6f6; display: flex; flex-direction: column; /* 页面不能滚动 */ overflow: hidden; } #app { height: 100%; width: 100%; background: #f6f6f6; display: flex; flex-direction: column; } .title-bg { width: 100%; min-height: 0.44rem; position: relative; top: 0; left: 0; z-index: 998; background-color: white; display: flex; align-items: center; justify-content: center; color: black; font-size: 0.16rem; font-weight: bold; border-bottom: 0.01rem #f6f6f6 solid; } .title-arrow { position: absolute; left: 0.10rem; display: flex; align-items: center; justify-content: center; } .title-img { width: 0.26rem; } .content { height: 100%; width: 100%; font-size: 0.15rem; /* 页面能滚动 */ overflow: scroll; }
标题
效果展示
|
【本文地址】
今日新闻 |
推荐新闻 |