首页 > 其他分享 >CSS：顶部导航栏固定位置、分类标题栏、底部提示文案固定位置

CSS：顶部导航栏固定位置、分类标题栏、底部提示文案固定位置

时间：2024-07-23 22:56:26浏览次数：15  
标签：1rem color 标题栏 height 固定 rem font CSS left

一、效果图

在这里插入图片描述

页面body的css代码

body {
	position: absolute;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	bottom: 0;
	background-color #eee;
	/* overflow: auto;
	overflow-y: scroll; */

	/* ::-webkit-scrollbar {
		display: none;
	} */
}

.content-root {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	position: absolute;
	padding-bottom: 2.5rem;
	background-color: #7ddcf8;
}

二、顶部导航栏固定位置

页面内容可以上下滑动，顶部导航栏始终固定显示在顶部

css代码

.tool-bar {
	width: 100%;
	height: 3.125rem;
	display: flex;
	/* 固定位置 */
	position: fixed;
	background-color: aqua;
	padding-left: 1rem;
	padding-bottom: 0.9375rem;
	/* 数值越大，表示越会显示在其他堆叠元素之上 */
	z-index: 999;
	align-items: flex-end;
	justify-content: space-between;
	box-sizing: border-box;
}

.back-img {
	width: 1.875rem;
	height: 1.25rem;
	margin-left: 0.16rem;
}

.title {
	position: absolute;
	font-family: PingFangSC, PingFang SC;
	font-size: 1.25rem;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;
}

.search {
	position: absolute;
	right: 1rem;
	width: 1.25rem;
	height: 1.25rem;
}

三、分类标题栏

一般项目首页分类列表里的item会显示该类型的标题和一行描述，右边显示icon表示点击可查看更多

css代码

.list-root {
	/* 100%的宽度，减去左右边距的总和 */
	width: calc(100% - 32px);
	height: 11.25rem;
	position: relative;
	margin-top: 1rem;
	margin-left: 1rem;
	/* 左右边距 这里注释掉因为 上面 margin-top， 具体根据实际页面样式进行设置 */
	/* margin: 0 16px; */
	border-radius: 0.5rem;
	background-color: white;
}

.top-type {
	width: 100%;
	height: 3.125rem;
	background-color: aqua;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.type-name {
	margin-left: 1rem;
	font-size: 1rem;
	color: #333333;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	padding: 0;
	text-align: left;
	font-style: normal;
}

.type-desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 0.875rem;
	margin-left: 0.08rem;
	color: #4a4a4a;
	text-align: left;
	overflow: hidden;
	font-style: normal;
	/* 占位剩余空间 */
	flex: 1;
	/*内容超过后面显示... */
	text-overflow: ellipsis;
	/* 不换行 */
	white-space: nowrap;
}

.type-arrow-img {
	width: 0.875rem;
	height: 1rem;
	margin-right: 1rem;
}

四、底部提示文案固定位置

金融类的项目，一般在首页或者下单页面可以上下滑动，提醒用户的文案固定在底部。

css代码

.bottom-tip {
	width: 100%;
	height: 3.125rem;
	bottom: 0;
	left: 0;
	position: fixed;
	padding-left: 1rem;
	padding-right: 1rem;
	/* 让元素变成一个盒模型， 解决 padding-right 不生效问题*/
	box-sizing: border-box;
	z-index: 999;
	font-size: 0.875rem;
	color: #333333;
	/* 内容居中 */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e5e5e5;
}

五、title.css完整代码

body {
	position: absolute;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	bottom: 0;
	background-color #eee;
	/* overflow: auto;
	overflow-y: scroll; */

	/* ::-webkit-scrollbar {
		display: none;
	} */
}

.content-root {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	position: absolute;
	padding-bottom: 2.5rem;
	background-color: #7ddcf8;
}

.content-top {
	width: 100%;
	height: 9.375rem;
	/* 如果需要让下面的内容覆盖在这上面，使用  position: absolute; */
	position: relative;
	background-color: white;
	padding-bottom: 4.125rem;
	align-items: center;
}


.tool-bar {
	width: 100%;
	height: 3.125rem;
	display: flex;
	/* 固定位置 */
	position: fixed;
	background-color: aqua;
	padding-left: 1rem;
	padding-bottom: 0.9375rem;
	/* 数值越大，表示越会显示在其他堆叠元素之上 */
	z-index: 999;
	align-items: flex-end;
	justify-content: space-between;
	box-sizing: border-box;
}

.back-img {
	width: 1.875rem;
	height: 1.25rem;
	margin-left: 0.16rem;
}

.title {
	position: absolute;
	font-family: PingFangSC, PingFang SC;
	font-size: 1.25rem;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;
}

.search {
	position: absolute;
	right: 1rem;
	width: 1.25rem;
	height: 1.25rem;
}

.list-root {
	/* 100%的宽度，减去左右边距的总和 */
	width: calc(100% - 32px);
	height: 11.25rem;
	position: relative;
	margin-top: 1rem;
	margin-left: 1rem;
	/* 左右边距 这里注释掉因为 上面 margin-top， 具体根据实际页面样式进行设置 */
	/* margin: 0 16px; */
	border-radius: 0.5rem;
	background-color: white;
}

.top-type {
	width: 100%;
	height: 3.125rem;
	background-color: aqua;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.type-name {
	margin-left: 1rem;
	font-size: 1rem;
	color: #333333;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	padding: 0;
	text-align: left;
	font-style: normal;
}

.type-desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 0.875rem;
	margin-left: 0.08rem;
	color: #4a4a4a;
	text-align: left;
	overflow: hidden;
	font-style: normal;
	/* 占位剩余空间 */
	flex: 1;
	/*内容超过后面显示... */
	text-overflow: ellipsis;
	/* 不换行 */
	white-space: nowrap;
}

.type-arrow-img {
	width: 0.875rem;
	height: 1rem;
	margin-right: 1rem;
}

.bottom-tip {
	width: 100%;
	height: 3.125rem;
	bottom: 0;
	left: 0;
	position: fixed;
	padding-left: 1rem;
	padding-right: 1rem;
	/* 让元素变成一个盒模型， 解决 padding-right 不生效问题*/
	box-sizing: border-box;
	z-index: 999;
	font-size: 0.875rem;
	color: #333333;
	/* 内容居中 */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e5e5e5;
}

六、title.html完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link rel="stylesheet" href="../css/title.css" />
	</head>
	<body>
		<div class="content-root">
			<div class="content-top">
				<div class="tool-bar">
					<img class="back-img" src="../images/icon_title_back_black.png" />
					<span class="title">title样式</span>
					<img class="search" src="../images/icon_search.png" />
				</div>
				<div style="position: absolute; margin-top: 60px;">这里可以显示banner图</div>
			</div>
			
			<div class="list-root">
				<div class="top-type">
					<span class="type-name">这里显示标题</span>
					<span class="type-desc"> | 这里显示描述内容</span>
					<img class="type-arrow-img" src="../images/icon_arrow_right_black.png" />
				</div>
			</div>
			
			<div class="list-root">
				<div class="top-type">
					<span class="type-name">这里显示标题</span>
					<span class="type-desc"> | 这里显示描述内容</span>
					<img class="type-arrow-img" src="../images/icon_arrow_right_black.png" />
				</div>
			</div>
			
			<div class="list-root">
				<div class="top-type">
					<span class="type-name">这里显示标题</span>
					<span class="type-desc"> | 这里显示描述内容</span>
					<img class="type-arrow-img" src="../images/icon_arrow_right_black.png" />
				</div>
			</div>

			<div class="bottom-tip">
				温馨提示：css 样式多练习、研究浏览器兼容性 css 样式多练习研究浏览器兼容性
			</div>


		</div>
	</body>


</html>

七、testH5源码

点击查看testh5源码

标签：1rem,color,标题栏,height,固定,rem,font,CSS,left
From： https://blog.csdn.net/ChinaDragon10/article/details/140560474

相关文章

  • 史上最全的xpath 、CSS定位方法
    史上最全的xpath、CSS定位方法   Xpath常用的定位方法相信做过seleniumUI自动化的朋友都知道，工作中大部分的元素定位都是使用xpath进行定位，所以xpath是UI自动化工作中非常重要的一个环节，所以我单独整理出来一篇博客出来~~希望对大家有帮助~相对定位相对定位是两个......
  • CSS 容器查询 CSS Container Queries
    CSS容器查询的主要思想是将一个元素注册为“容器”，并在容器元素满足某些条件时将样式应用于其他元素。 容器查询通常被认为是响应式网页设计的一种现代方法，其中传统媒体查询长期以来一直是黄金标准-原因是我们可以创建由响应容器宽度而不是视口宽度的元素组成的布局。.par......
  • CSS 动画专题
    0x01过渡transition过渡（transition）是应用于特定元素的CSS属性，在指定时间内平滑过渡到目标样式（1）必要属性使用transition-property指定需要过渡的CSS属性可以列入一个或多个CSS属性也可以使用all值，表示所有变化的CSS属性都需要过渡仅可以用于过渡的值是可以......
  • css 蛇形排序
    先看效果需求：一个【4 *？】的网格布局，奇数行布局从左往右，偶数行布局从右往左。思路1：js将数组按4个每份进行分割，将偶数份进行反向，然后再将分割后的数据，重新组装。（太麻烦，劝退。）思路2：flex布局，然后用order属性来更改排列顺序。补充：or......
  • html+css 简易摩天轮效果
    vuedom<divclass="ferris_wheel"><divclass="wheelBg"></div><divclass="wheelBox"><divclass="bg"></div><ulclass="list">......
  • Tailwind CSS 实现响应式布局
    TailwindCSS实现响应式布局CSS3如何实现响应式先聊聊纯CSS方案是怎么做的：使用CSS3特性:@mediascrren表示设备屏幕，and用于并列多个条件一般来讲每个响应式系统的ui规范都要有多个断点:small：640px起，横向模式显示状态的手机medium：768px起，平板large：1024px起，电脑......
  • HTML5+CSS3学习笔记第二天
    二、HTML第二天（列表、表格、表单）1.列表无序列表：每行前面多一个小点<ul><li>列表条目1</li><li>列表条目2</li><li>列表条目3</li></ul>有序列表：每行前面自动加1.2.3.的序号<ol><li>有序列表条目1</li><li>有序列表条......
  • HTML5+CSS3学习笔记第一天
    一、HTML初体验11.HTML定义：超文本标记语言超文本：链接标记：标签、带尖括号的文本2.标签语法双标签：成对出现，中间包裹内容单标签：只有开始标签eg:水平线hr、换行br<>放英文字母即标签名结束标签多一个/3.HTML基本骨架<html> <head> <title>网页标题</title> </head>......
  • 在 Django 表单中使用正确的 Bootstrap CSS 进行单选表单输入
    如何让Django表单将正确的Bootstrap渲染到Radioselect表单输入？我在表单中传递了form-controlform-checkclassess，但生成的表单HTML对于radioselect选项并不准确。我正在寻找渲染引导程序原色和内联单选按钮。表单classPersonForm(forms.Form......
  • 另一个函数的 lambda 函数但强制固定参数
    我刚刚从Matlab切换到Python，我想使用lambda函数将具有多个参数的函数f1(x,y)映射到一个参数函数f2(x)进行优化。我希望当我映射函数时f2(x)<-f1(x,y=y1)然后y无论发生什么变化都保持不变，在Matlab中默认情况下这是正确的，但如果我在P......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99