【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

news2024/11/27 16:49:28

文章目录

  • 一、顶部固定定位搜索栏
    • 1、固定定位盒子居中对齐
    • 2、设置最大宽度和最小宽度
    • 3、使用 Flex 弹性布局管理宽度
    • 4、二倍精灵图设置
    • 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 )
  • 二、代码示例
    • 1、HTML 标签结构
    • 2、CSS 样式
    • 3、展示效果





一、顶部固定定位搜索栏


需求 : 制作如下搜索栏 ;

在这里插入图片描述


1、固定定位盒子居中对齐


首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;

    /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
    position: fixed;

然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ;

    /* 固定定位盒子位置紧贴顶部 */
    top: 0;

再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ;

    /* 将固定定位的盒子在页面中居中对齐
       先将盒子左侧设置到中心位置
       注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
    left: 50%;

最后 , 整个盒子模型向左走自身宽度的一半 , 此处还要配置兼容老版本浏览器的样式 ;

    /* 兼容老版本浏览器 */
    -webkit-transform: translateX(-50%);
    /* 向左走盒子自身宽度的一半 */
    transform: translateX(-50%);

2、设置最大宽度和最小宽度


在移动端网页中 , 一般都要设置一个 最大宽度 和 最小宽度 ;

  • 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ;
  • 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局 ;
    /* 设置最大和最小宽度 */
    min-width: 320px;
    max-width: 640px;

3、使用 Flex 弹性布局管理宽度


在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ;

  • 右侧的搜索按钮始终都是 44x44 像素大小 ;
  • 左侧的搜索栏随着网页布局的宽度变化而变化 ;

此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ;

Flex 子项目的 flex 样式默认都为 0 , 只要有一个子项目设置了 flex: 1; 样式 , 那么该子项目就会自动占据剩余的所有空间 ;


4、二倍精灵图设置


下图中的 放大镜图片 和 头像图标 都定义在精灵图中 ,
在这里插入图片描述

二倍精灵图设置步骤 :

  • 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ;
  • 测量坐标 : 在缩小一半的精灵图中测量坐标 ;
  • 设置代码 : 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半 ;

插入的放大镜精灵图 :

.search::before {
    /* 使用伪元素方式 插入 搜索栏放大镜图片 */
    content: "";
    /* 绝对布局 */
    position: absolute;
    /* 令该图片放置在中间偏上位置 */
    top: 5px;
    left: 5px;
    /* 设置图片宽高 */
    width: 15px;
    height: 15px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
}

插入的头像精灵图 :

.user::before {
    /* 使用伪元素方式 插入 用户栏头像图片 */
    content: "";
    /* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
    display: block;
    /* 设置图标的宽高 */
    width: 23px;
    height: 23px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
    /* 设置用户信息按钮外边距 */
    margin: 4px auto -2px;
}

5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 )


普通盒子模型中 , 设置垂直居中对齐时 , 直接设置 内容高度 = 行高 即可 ;

由于采用的是 CSS3 样式 , 该模式下 , 设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ;

如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ;

因此在该 CSS3 样式中 , 高度设置为 26 像素 , 其中包括了 24 像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ;

    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;

完整代码示例 :

.search {
    /* 搜索框样式 */
    /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
    position: relative;
    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
    flex: 1;
    /* 设置文字大小和颜色 */
    font-size: 12px;
    color: #666;
    /* 设置搜索框的内外边距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 设置搜索框圆角矩形半径 */
    border-radius: 5px;
    /* 设置盒子模型阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}




二、代码示例



1、HTML 标签结构


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Flex 弹性布局案例</title>
</head>

<body>
    <!-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 -->
    <div class="search-index">
        <!-- 搜索栏提示内容 -->
        <div class="search">输入搜索信息</div>
        <!-- 搜索栏右侧按钮 -->
        <a href="#" class="user">我 的</a>
    </div>
</body>

</html>

2、CSS 样式


body {
    /* 网页布局宽度 = 设备宽度 */
    width: 100%;
    /* 最小宽度 320 像素 */
    min-width: 320px;
    /* 最大宽度 640 像素 */
    max-width: 640px;
    /* 居中对齐 */
    margin: 0 auto;
    /* 字体大小 14 像素 */
    font-size: 14px;
    /* 如果是苹果就是用苹果默认字体 
       如果不是苹果手机 就使用后啊面的字体 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字体颜色 */
    color: #000;
    /* 行高 */
    line-height: 1.5;
    /* 水平方向超出隐藏 */
    overflow-x: hidden;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #000;
    /* 取消链接的下划线样式 */
    text-decoration: none;
}

ul {
    /* 设置列表的默认样式 */
    margin: 0;
    padding: 0;
    /* 去掉小圆点 */
    list-style: none;
}

img {
    /* 图片与文字对齐样式 默认是与文字基线对齐 */
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.clearfix:after {
    /* 清除浮动样式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}


/* 上面是 CSS 的默认样式, 每个 CSS 文件都有上述样式, 下面开始就是正式样式 */


/* 顶部固定定位搜索栏样式 */

.search-index {
    /* 将其内部设置成 弹性布局 
       右侧的按钮设置固定大小 
       左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */
    display: flex;
    /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
    position: fixed;
    /* 固定定位盒子位置紧贴顶部 */
    top: 0;
    /* 将固定定位的盒子在页面中居中对齐
       先将盒子左侧设置到中心位置
       注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
    left: 50%;
    /* 兼容老版本浏览器 */
    -webkit-transform: translateX(-50%);
    /* 向左走盒子自身宽度的一半 */
    transform: translateX(-50%);
    /* 固定的盒子模型必须设置宽度 */
    width: 100%;
    /* 设置最大和最小宽度 */
    min-width: 320px;
    max-width: 640px;
    /* 设置高度 */
    height: 44px;
    /* 设置盒子背景颜色 */
    background-color: #F6F6F6;
    /* 设置上下边框 */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    /* 搜索框样式 */
    /* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
    position: relative;
    /* 设置 高度 = 26 行高 = 24 像素 垂直居中
       设置行高 = 26 会偏下
       上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
       CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
    flex: 1;
    /* 设置文字大小和颜色 */
    font-size: 12px;
    color: #666;
    /* 设置搜索框的内外边距 */
    margin: 7px 10px;
    padding-left: 25px;
    /* 设置搜索框圆角矩形半径 */
    border-radius: 5px;
    /* 设置盒子模型阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.search::before {
    /* 使用伪元素方式 插入 搜索栏放大镜图片 */
    content: "";
    /* 绝对布局 */
    position: absolute;
    /* 令该图片放置在中间偏上位置 */
    top: 5px;
    left: 5px;
    /* 设置图片宽高 */
    width: 15px;
    height: 15px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 279 像素 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
}

.user {
    /* 用户栏样式 */
    width: 44px;
    height: 44px;
    /* 设置文字大小为 12 像素 */
    font-size: 12px;
    /* 设置文本居中 */
    text-align: center;
    /* 设置文本颜色 */
    color: #2eaae0;
}

.user::before {
    /* 使用伪元素方式 插入 用户栏头像图片 */
    content: "";
    /* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
    display: block;
    /* 设置图标的宽高 */
    width: 23px;
    height: 23px;
    /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置, 
       设置背景时将精灵图
            向左移动 59 像素 
            向上移动 194 像素 */
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
    background-size: 104px auto;
    /* 设置用户信息按钮外边距 */
    margin: 4px auto -2px;
}

3、展示效果


在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/524757.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Pytroch nn.Unfold() 与 nn.Fold(）图码详解

Pytroch nn.Unfold() 与 nn.Fold(）图码详解

文章目录 Unfold()与Fold()的用途nn.Unfold()Unfold()与Fold() 变化模式图解 nn.Fold()单通道 滑动窗口无重叠模拟图片数据&#xff08;b,3,9,9&#xff09;&#xff0c;通道数 C 为3&#xff0c;滑动窗口无重叠。单通道 滑动窗口有重叠。 卷积等价于&#xff1a;Unfold Matri…
阅读更多...
国民技术N32G430开发笔记（20）- FreeRTOS的移植

国民技术N32G430开发笔记（20）- FreeRTOS的移植

FreeRTOS的移植 1、官网下载FreeRTOSv202212.01&#xff0c;搜索官网下载即可。 2、新建一个FreeRTOSDemo的工程&#xff0c;可以把之前的工程中的Bootloader工程复制一份。 3、打开下载的freertos代码将相应代码移植到我们的工程中。 protable文件夹&#xff0c;因为是gcc环…
阅读更多...
ChatGPT国内镜像网站集合

ChatGPT国内镜像网站集合

ChatGPT是一个基于人工智能的聊天机器人&#xff0c;它可以与用户进行自然语言交互。ChatGPT使用了最新的自然语言处理技术&#xff0c;包括深度学习和神经网络&#xff0c;以便更好地理解用户的意图和回答用户的问题。 ChatGPT可以回答各种问题&#xff0c;包括但不限于常见问…
阅读更多...
RabbitMQ如何避免丢失消息

RabbitMQ如何避免丢失消息

目录标题 消息丢失1. 生产者生产消息到RabbitMQ Server 消息丢失场景1. 网络问题2. 代码层面&#xff0c;配置层面&#xff0c;考虑不全导致消息丢失解决方案&#xff1a;开启confirm模式 2. 队列本身可能丢失消息1. 消息未完全持久化&#xff0c;当机器重启后&#xff0c;消息…
阅读更多...
shell脚本之“sed“命令

shell脚本之“sed“命令

文章目录 1.sed编辑器概述2.sed命令常用选项3.sed命令常用操作4.sed命令演示操作部分5.总结 1.sed编辑器概述 sed是一种流编辑器&#xff0c;流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。 sed编辑器可以根据命令来处理数据流中的数据&#xff0c;这些…
阅读更多...
C嘎嘎~~[类 下篇 之 日期类的实现]

C嘎嘎~~[类 下篇 之 日期类的实现]

类 下篇 之 日期类的实现 6.const成员6.1 const成员的引入6.2const成员的概念 7.日期类的实现 6.const成员 6.1 const成员的引入 class Date { public:// 构造函数Date(int year 2023, int month 5, int day 5){_year year;_month month;_day day;}void Print(){cout &…
阅读更多...
【STL】vector的使用

【STL】vector的使用

目录 前言 默认成员函数 构造函数 拷贝构造 赋值重载 迭代器 正向迭代器 反向迭代器 容量管理 查看容量和大小 扩容 判空 访问数据 下标访问 边界访问 数据修改 尾插尾删 指定位置插入删除 迭代器失效 清空 ​编辑 交换 查找数据 vector可以代替strin…
阅读更多...
VOACAP 软件的简单介绍

VOACAP 软件的简单介绍

VOACAP 软件可以预测短波通信中的最高可用频率、最佳传输频率、角度、延迟、反射点高度、信噪比、收发增益等参数&#xff0c;它可以直接输出文本文件&#xff0c;或者以图表输出&#xff0c;同时&#xff0c;它也可以绘制某一参数随时间、距离的变化图表。 该软件的下载安装可…
阅读更多...
C语言从入门到精通第18天(指针和函数的联用)

C语言从入门到精通第18天(指针和函数的联用)

指针和函数的联用 一级指针作为函数的形参二级指针 一级指针作为函数的形参 当函数的形参为数组时&#xff0c;我们定义函数如下&#xff1a; 语法: 数据类型 函数名(数据类型 数组名) 例如 : void func(int a[],int a){ 语句; } 但是在实际使用中我们通常用指针的形式进行…
阅读更多...
GEE：如何进行对MOD09GA数据集进行水体/云掩膜并计算NDVI将其导出至云盘？

GEE：如何进行对MOD09GA数据集进行水体/云掩膜并计算NDVI将其导出至云盘？

目录 01 为什么用GEE而不是传统的下载ENVIArcGIS&#xff1f; 02 操作详解 01 为什么用GEE而不是传统的下载ENVIArcGIS&#xff1f; 由于地理空间数据云中缺少2015年10月份的NDVI月合成影像&#xff0c;于是查看了地理空间数据云的NDVI数据集处理的一些介绍如下(地理空间数据…
阅读更多...
【Linux内核】信号量semaphore机制

【Linux内核】信号量semaphore机制

信号量实现方法 信号量机制是一种用于控制并发访问的同步机制&#xff0c;常用于多进程或多线程之间的协调。在Linux内核中&#xff0c;信号量机制是通过struct semaphore结构体来实现的。 每个semaphore结构体包含一个计数器和一个等待队列&#xff0c;它们用于跟踪当前可用…
阅读更多...
Linux 并发与竞争

Linux 并发与竞争

一、并发与竞争 1、并发 Linux 系统是个多任务操作系统&#xff0c;会存在多个任务同时访问同一片内存区域&#xff0c;这些任务可 能会相互覆盖这段内存中的数据&#xff0c;造成内存数据混乱。 多线程并发访问&#xff0c; Linux 是多任务(线程)的系统&#xff0c;所以多线…
阅读更多...
命令firewalld和firewall-cmd用法

命令firewalld和firewall-cmd用法

firewalld命令跟firewall-cmd 1.启动firewalld服务 systemctl start firewalld.service2.关闭firewalld服务 systemctl stop firewalld.service3.重启firewalld服务 systemctl restart firewalld.service4.查看firewalld状态 systemctl status firewalld.service5.开机自启…
阅读更多...
接口测试怎么做？全网最详细从接口测试到接口自动化详解，看这篇就够了...

接口测试怎么做？全网最详细从接口测试到接口自动化详解，看这篇就够了...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 抛出一个问题&…
阅读更多...
孙鑫VC++第三章 2.基于MFC的程序框架剖析

孙鑫VC++第三章 2.基于MFC的程序框架剖析

目录 1. MFC向导生成类 2. 框架流程 2.1 WinMain 2.2 全局对象&#xff1a;theApp 2.3 AfxWinMain函数 1.AfxWinMain&#xff1a; 2.AfxGetThread函数&#xff08;thrdcore.cpp&#xff09;&#xff1a; 3.AfxGetApp是一个全局函数&#xff0c;定义于&#xff08;afxwin1…
阅读更多...
原型/原型链/构造函数/类

原型/原型链/构造函数/类

认识构造函数 为什么有构造函数 因为一般的创建对象的方式一次只能创建一个对象, 利用工厂模式创建的对象&#xff0c;对象的类型都是Object类型 什么是构造函数 构造函数也称之为构造器&#xff08;constructor&#xff09;&#xff0c;通常是我们在创建对象时会调用的函数…
阅读更多...
Uni-app项目应用总结（一）

Uni-app项目应用总结（一）

目录 一.新建uniapp项目 第一步&#xff1a;下载HBuilder 第二步:创建uni-app项目 第三步&#xff1a;运行uni-app 二.uni-app组件使用 三.uni-app路由跳转  1.页面路由配置    (1)在pages.json中配置页面路由    (2)在pages.json中配置底部导航栏 2.路由跳转方法…
阅读更多...
【输配电路 DZY-104端子排中间继电器 接通、信号转换 JOSEF约瑟】

【输配电路 DZY-104端子排中间继电器 接通、信号转换 JOSEF约瑟】

DZY-104端子排中间继电器品牌:JOSEF约瑟型号:DZY-104名称:端子排式中间继电器触点容量:5A/250V功率消耗:≤1.5W/≤3W/≤7W/≤3VA/≤7VA/≥5W绝缘电阻:≥10MΩ 系列型号&#xff1a; DZY-101端子排中间继电器&#xff1b; DZY-104端子排中间继电器&#xff1b; DZY-105端子排…
阅读更多...
华南农业大学|图像处理与分析技术综合测试|题目解答：求芒果单层坏损率

华南农业大学|图像处理与分析技术综合测试|题目解答：求芒果单层坏损率

设计任务 对于一幅芒果果实内部的 CT 断层图像&#xff0c;试采用图像处理与分析技术&#xff0c;设计适当的算法和程序&#xff0c;首先分割出其中的坏损区域&#xff0c;然后计算其像素面积占整个果肉区域的百分比&#xff08;单层坏损率&#xff09;。请按统一要求写出算法…
阅读更多...
nuc980 uboot 2017.11 移植：env 保存位置选择问题

nuc980 uboot 2017.11 移植：env 保存位置选择问题

开发环境 Win10 64位 ubuntu 20.04 虚拟机 VMware Workstation 16 Pro 开发板&#xff1a;NK-980IOT&#xff08;NUC980DK61Y&#xff09; gcc 交叉编译工具链&#xff1a; ARM 官方 gcc version 11.2.1 20220111 NUC980 uboot 版本 &#xff1a;尝试移植到 u-boot-2017.1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023