【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

已于 2023-05-03 11:37:29 修改
阅读量1.2k 收藏 7
点赞数 6
分类专栏： 移动端网页布局 文章标签： css html css3 移动端网页布局 流式布局
于 2023-05-03 04:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/130466785
版权

文章目录





一、Banner 栏样式及核心要点



1、实现效果


在上一篇博客中 , 实现了 搜索栏 , 在本篇博客开始实现 搜索栏 下方的 Banner 栏 ;

在这里插入图片描述


2、核心要点分析


Banner 栏需要在 搜索栏的下方 , 搜索栏还需要保持 不管如何进行滚动 , 始终悬浮在最上方 ;

搜索栏 必须是同 固定定位 , 才能实现上述效果 ; 搜索栏 父容器 样式如下 :

/* 下面是搜索栏样式 */

.search-wrap {
    /* 第二排搜索栏样式 */
    /* 该样式在滑动时 , 始终在最上方显示 */
    position: fixed;
    /* 防止外边距塌陷进行的设置 */
    overflow: hidden;
    /* 搜索栏宽度充满全屏 */
    width: 100%;
    /* 搜索栏的高度为 44 像素 */
    height: 44px;
    /* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */
    min-width: 320px;
    /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */
    max-width: 640px;
}

Banner 栏 , 只需要进行简单的标准流设置 , 将 Banner 栏设置为第一个标准流图片即可 ;

HTML 结构如下 :

    <!-- 搜索栏下方的主要内容 -->
    <div class="main-content">
        <!-- Banner 栏滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
    </div>

对应的 css 样式为 :

.slider img {
    /* 设置 Banner 栏大图宽度尺寸为 100% */
    width: 100%;
}

设置了 100% 宽度 , 界面布局就会随着设备宽度进行变化 ;

设备宽度宽时 , 样式如下 :

在这里插入图片描述
设备界面变窄时 , 界面如下 :

在这里插入图片描述





二、完整代码示例



1、HTML 标签结构


完整代码 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要开发的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
</body>

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要开发的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
    <!-- 第一排 : 顶部 APP 提示标签 -->
    <header class="app">
        <ul>
            <li>
                <!-- 左侧的关闭按钮 -->
                <img src="images/close.png" alt="">
            </li>
            <li>
                <!-- 关闭按钮右侧的京东 LOGO -->
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东APP, 实惠又轻松</li>
            <li>立即打开</li>
        </ul>
    </header>

    <!-- 第二排 : 搜索栏 -->
    <div class="search-wrap">
        <!-- 左侧的列表按钮 -->
        <div class="search-btn"></div>
        <!-- 中间的搜索框 -->
        <div class="search">
            <!-- 中间搜索框中的 JD 图标 -->
            <div class="jd-icon"></div>
            <!-- 中间搜索框中的 放大镜 图标 -->
            <div class="sou"></div>
        </div>
        <!-- 右侧的登录按钮 -->
        <div class="search-login">登陆</div>
    </div>

    <!-- 搜索栏下方的主要内容 -->
    <div class="main-content">
        <!-- Banner 栏滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
    </div>
</body>

</html>

2、CSS 样式


完整代码 :

a {
    /* 取消链接点击时的高亮效果 */
    -webkit-tap-highlight-color: transparent;
}

img,
a {
    /* 禁用 长按弹出菜单 */
    -webkit-touch-callout: none;
}

input {
    /* 设置 iOS 取消按钮的自定义样式 */
    -webkit-appearance: none;
}

div {
    /* 设置 CSS3 盒子模型样式 */
    box-sizing: border-box;
}

ul {
    /* 取消 ul 列表项的内外边距 */
    margin: 0;
    padding: 0;
    /* 取消列表项的样式 - 左侧的小圆点 */
    list-style: none;
}

img {
    /* 默认的图片对齐方式是基线对齐 只要不是基线对齐
       这里随便设置 顶部 / 底部 / 中部 对齐都可以 */
    vertical-align: middle;
}

a {
    /* 设置字体颜色值 */
    color: #666;
    /* 取消链接的底部横线样式 */
    text-decoration: none;
}

.clearfix:after {
    /* 清除浮动的固定样式
       如果要为某个容器清除浮动 
       为其设置 class="clearfix" 样式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

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: #666;
    /* 行高 */
    line-height: 1.5;
    background-color: gray;
}

.app {
    /* 设置顶部提示条高度 45 像素 */
    height: 45px;
}

.app ul li {
    /* 设置左浮动 令列表元素水平排列 */
    float: left;
    /* 设置高度 45 像素 = 行高 垂直居中 */
    height: 45px;
    line-height: 45px;
    /* 设置总体背景 */
    background-color: #333333;
    /* 文本水平居中 */
    text-align: center;
    /* 文本颜色白色 */
    color: #fff;
}

.app ul li:nth-child(1) {
    /* 关闭按钮 宽度占布局宽度 / 设备宽度 的 8% */
    width: 8%;
}

.app ul li:nth-child(1) img {
    /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */
    width: 10px;
}

.app ul li:nth-child(2) {
    /* 设置 Logo 宽度 10% */
    width: 10%;
}

.app ul li:nth-child(2) img {
    /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素
       高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */
    width: 30px;
    /* 默认的图片对齐方式是基线对齐 只要不是基线对齐
       这里随便设置 顶部 / 底部 / 中部 对齐都可以 */
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    /* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度 */
    width: 57%;
}

.app ul li:nth-child(4) {
    /* 右侧的 立即打开 红色按钮盒子 */
    width: 25%;
    background-color: #F63515;
}


/* 下面是搜索栏样式 */

.search-wrap {
    /* 第二排搜索栏样式 */
    /* 该样式在滑动时 , 始终在最上方显示 */
    position: fixed;
    /* 防止外边距塌陷进行的设置 */
    overflow: hidden;
    /* 搜索栏宽度充满全屏 */
    width: 100%;
    /* 搜索栏的高度为 44 像素 */
    height: 44px;
    /* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */
    min-width: 320px;
    /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */
    max-width: 640px;
}

.search-btn {
    /* 左侧按钮布局 */
    /* 左侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 定位到左上角 */
    top: 0;
    left: 0;
    /* 设置盒子的尺寸 */
    width: 40px;
    height: 44px;
}

.search-btn::before {
    /* 在 指定的标签元素内部的 前面 插入内容 */
    /* 左侧按钮盒子中 插入 三 图片 */
    content: "";
    /* 显示模式设置为块级元素 */
    display: block;
    /* 盒子大小设置为 20 x 18 像素 */
    width: 20px;
    height: 18px;
    /* 设置背景 */
    background: url(../images/s-btn.png) no-repeat;
    /* 设置图片背景大小 */
    background-size: 20px 18px;
    /* 设置图像的外边距 */
    margin: 14px 0 0 15px;
}

.search-login {
    /* 右侧按钮布局 */
    /* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 盒子定位到右上角 */
    right: 0;
    top: 0;
    /* 布局尺寸 40 x 44 像素 */
    width: 40px;
    height: 44px;
    /* 文字颜色白色 */
    color: #fff;
    /* 行高 = 内容高度 垂直居中 */
    line-height: 44px;
}

.search {
    /* 中间部位搜索栏盒子内容 */
    /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */
    position: relative;
    /* 搜索框高度 30 像素 */
    height: 30px;
    /* 白色字体 */
    background-color: #fff;
    /* 上下 0 像素外边距 左右 50 像素外边距 */
    margin: 0 50px;
    /* 左侧和右侧设置为 15 像素圆角 */
    border-radius: 15px;
    /* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */
    margin-top: 7px;
}

.jd-icon {
    /* 搜索框中插入 JD 图标 */
    /* 设置 JD 图标的宽高 */
    width: 20px;
    height: 15px;
    /* 设置绝对定位 */
    position: absolute;
    /* 定位到左上角 距离顶部 8 像素  距离左侧编剧 13 像素 */
    top: 8px;
    left: 13px;
    /* 设置 JD 图片背景 */
    background: url(../images/jd.png) no-repeat;
    /* 设置背景图片的尺寸 会缩放背景图片 */
    background-size: 20px 15px;
}

.jd-icon::after {
    /* 插入竖线 */
    content: "";
    /* 竖线盒子模型 使用绝对定位 */
    position: absolute;
    /* 竖线盒子模型 在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */
    right: -8px;
    top: 0;
    /* 设置显示模式为块级元素 可以设置宽高 */
    display: block;
    /* 盒子模型尺寸为 1 x 15 像素 */
    width: 1px;
    height: 15px;
    /* 设置盒子的灰色背景 */
    background-color: #ccc;
}

.sou {
    /* 二倍精灵图 */
    /* 设置 精灵图中的放大镜图标 */
    /* 该图标是绝对定位 */
    position: absolute;
    /* 设置放大镜图标的 绝对定位位置 */
    top: 8px;
    left: 50px;
    /* 设置盒子模型尺寸 */
    width: 18px;
    height: 15px;
    /* 设置精灵图 以及精灵图中的放大镜图标位置 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    /* 此处将 二倍精灵图缩小了一倍 */
    background-size: 200px auto;
}

.slider img {
    /* 设置 Banner 栏大图宽度尺寸为 100% */
    width: 100%;
}

3、展示效果


在这里插入图片描述

韩曙亮
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
boostrap学习小记-给网站加一个简单大方的banner吧
qq_25292481的博客
09-20 483
boostrap学习小记-给网站加一个简单大方的banner吧 今天学习boostrap，发现很多boostrap网站都有看起来很大气的banner，结果分析了源码之后发现还是挺容易实现的。就试着做了一下。
Banner制作
yuyuyu0w0的博客
05-22 562
一，加载本地图片： 1，在XMl文件中写： 2，在MainActivity里写： 3，图片加载器： 二，加载网络图片： ** 1，一言不和先加依赖 （当然是网络的了）：** 2，加权限： <uses-permission android:name="android.permission.INTERNET" /> 3，xml文件里： 4，类里写: 5,图片加载器： PS：图片加载器知识点： 主要是ImageView加载图片的知识点（一心想复制粘贴网上的教程略略略）： 1、 setIm
(html+css)入门网页制作.rar
05-19
这是一个关于（html+css）网页主页布局：logo+导航+banner+新闻列表的入门级网页制作文件，里面包括.html和三个.css，分别是reset,public,index三个样式表，以及一些我切的图（images），是作者小白的努力历程记录档案，如果有同样热爱web前端的，可以关注我一起学习哦
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
05-19
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。
京东首页移动端-web实战
最新发布
guai_guai_guai的博客
02-05 694
京东自主研发推出DPG图片压缩技术，经测试该技术,可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。之后的布局以及样式都与上面大致相同，京东移动端的练习就先到这里啦。根据改变之后的图片测量坐标。转换伪元素为块级元素。
CSS 网页布局排版实例
12-10
代码如下： <html> <head> <style type=”text/css”> <!– body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left;
移动WEB开发之流式布局--移动端常见布局--流式布局
薛定谔的猫
11-21 815
京东自主研发推出DPG图片压缩技术，经测试 该技术，可直接节省用户近50%的浏览流量， 极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼 容支持，经过内部和外部上万张图片的人眼浏 览测试后发现，压缩后的图片和webp的清晰度 对比没有差距。不占标准文档流 中间的搜索宽度就跟父元素一样，此时我们设置它的外边距，这样它就会随浏览器的大小变化而变化。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局，就是百分比布局，也称非固定像素布局。
HTML DIV+CSS制作通栏实例
09-25
通栏在网页中的概念想必大家都有所了解吧，下面本文通过HTML DIV+CSS简单实现下，喜欢的朋友可以参考下哦
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-14 9696
一、顶部固定定位搜索栏 1、固定定位盒子居中对齐 2、设置最大宽度和最小宽度 3、使用 Flex 弹性布局管理宽度 4、二倍精灵图设置 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
移动端页面布局中的流动布局（百分比布局）和弹性布局
qq_57340195的博客
04-15 1394
移动端页面布局 一、流式布局(百分比布局) 概念：流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度。 换算格式：目标元素宽度 / 父盒子宽度 = 百分数宽度 没有流式布局 <html lang="en"> <head> <style> ...
Demo.rar 底层5页demo，含首页banner轮播图，上拉刷新，下来加载，瀑布流布局，个人中心
06-10
底层5页demo，含首页banner轮播图，上拉刷新，下来加载，瀑布流布局，个人中心
原生javascript移动端滑动banner效果
10-20
主要为大家详细介绍了原生javascript移动端滑动banner效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
热门推荐
duzanuolu的专栏
03-18 1万+
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？本篇文章将讲述自适应网页设计的概念和方法，使网页开发人员维护同一个网页代码，即可使网站在多种设备上具有更好的阅读体验。本文详细介绍了自适应网页的实现方法，希望能给迷惑的你带来帮助。 　　一. 在HTML的头部加入meta标签
移动 Web 开发布局（一）——流式布局、flex布局
Lyrelion的博客
03-16 1054
一.移动端基础 1.移动端 web 开发现状 移动端浏览器主要针对 webkit 内核做兼容。 碎片化严重，手机分辨率和大小不一。 2.视口标签 <mate> 2.1 定义 浏览器显示页面内容的屏幕区域，包括：布局视口、视觉视口、理想视口。 ①布局视口 layout viewport：让PC网页大多都能在手机上呈现，只不过元素看上去很小，可以手动缩放网页。 ② 视觉...
Banner设计技巧总结
LZNxiaoxiang的博客
08-22 746
网页Banner是什么? 网页Banner是目前互联网中最常见的营销形式之一，它以各种形式存在。网页Banner也是最有可能创造点击量的设计方式。 Banner广告是嵌入在网页上的广告图像，展示产品或品牌，并链接到广告商的网站。大多数公司以这样或那样的形式使用它们，因为它是一种成本合理、追踪性好、传达效率高的宣传形式，非常适合用来提升品牌知名度。 如何设计出优秀的Banner广告? 如何设计和创建网页Banner广告才能带来点击?下面是关于设计Banner广告的一些建议和通用指南。 1.使用有效、标准
从前慢-移动WEB开发之百分比布局及flex布局
unique_perfect的博客
01-17 317
移动WEB开发之流式布局 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 布局视口 layout viewport，一般手机浏览器都默认设置了一个布局 视口，用于解决早期的PC端页面在手机上显示的问题 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的 网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可 以通过手动缩放网页。 视觉视口 visual viewport用户正在看到的网站的区域 理想视口 ideal
网页通栏广告的编写技巧
weixin_30823001的博客
07-29 276
通栏banner在编写代码的时候，需要分块来进行，不是自己原来想的设计稿给的什么样式就切个图填充进去就好了，考虑到PC端屏幕大小，拉伸之后都能百分百填充。 html代码： <div class="banner" style="background:#eee"> 　　<div class="banner-m"> 　　　　<img src="images/banne...
仿京东首页的实现（搜索框在顶部固定）
guozhiwen的博客
07-17 4949
一.自定义ScrollView public class ObservableScrollView extends ScrollView { public interface ScrollViewListener { void onScrollChanged(ObservableScrollView scrollView, int x, int y, ...
const banner = parseInt(res.data.data.banner) || 0 解释这段代码，||有什么作用
12-06
这段代码的作用是将res.data.data.banner转换为整数类型并赋值给常量banner，如果转换失败则将banner赋值为0。||是逻辑或运算符，如果左侧表达式的值为false，则返回右侧表达式的值，否则返回左侧表达式的值。在这里，如果parseInt(res.data.data.banner)返回NaN，则左侧表达式的值为false，因此返回0。如果parseInt(res.data.data.banner)返回一个非NaN的值，则左侧表达式的值为true，因此返回该值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值