移动Web-03-流式布局

最新推荐文章于 2019-07-22 07:40:59 发布
最新推荐文章于 2019-07-22 07:40:59 发布
阅读量188 收藏
点赞数 1
分类专栏： 移动Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_shihao/article/details/96433908
版权

移动端布局核心
1.水平方向不能出现滚动条(禁止缩放，元素宽度超过视口的宽度)
2.需要适配宽度，高度使用固定值（高度允许出现滚动条）

百分比布局（流式布局）：宽度使用百分比，高度使用px
3.移动端盒子模型使用内减模型： box-sizing: border-box;
避免由于border和padding导致的水平滚动条的问题

拓展:
手机端的a标签会有背景颜色
解决方法:给a标签添加如下代码

-webkit-tap-highlight-color: transparent;

京东首页-练习案例

html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 移动端视口适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东首页</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 版心容器 -->
    <div class="container">
        <!-- 1-搜索栏 -->
        <div class="top-bar">
            <a href="" class="menu"></a>
            <input type="text" placeholder="商品名称">
            <a href="" class="login">登录</a>
        </div>
        <!-- 2-banner栏 -->
        <div class="banner">
            <img src="images/slide.png" alt="">
        </div>
        <!-- 3.导航栏 -->
        <div class="nav-bar">
            <ul class="clearfix">
                <li><a href=""><img src="images/nav01.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav02.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav03.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav04.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav05.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav06.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav07.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav08.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav09.png" alt=""><span>京东超市</span></a></li>
                <li><a href=""><img src="images/nav10.png" alt=""><span>京东超市</span></a></li>
            </ul>
        </div>
        <!-- 4.京东快报 -->
        <div class="jd-news">
            <span><span>热门&nbsp;&nbsp;</span>价格太贵买不起</span>
            <a href="">更多</a>
        </div>
        <!-- 5.活动列表 -->
        <div class="adv-list clearfix">
            <a href=""><img src="images/adv01.jpg" alt=""></a>
            <a href=""><img src="images/adv02.jpg" alt=""></a>
            <a href=""><img src="images/adv03.jpg" alt=""></a>
        </div>
        <!-- 6.商品列表 -->
        <div class="good-list">
            <div class="good-title"><img src="images/goods_title.jpg" alt=""></div>
            <div class="good-list01 clearfix">
                <a href="" class="clearfix">
                    <span>二手寻宝</span>
                    <span>跳蚤市场逛一逛</span>
                    <img src="images/goods.jpg" alt="">
                    <img src="images/goods.jpg" alt="">
                </a>
                <a href="" class="clearfix">
                    <span>二手寻宝</span>
                    <span>跳蚤市场逛一逛</span>
                    <img src="images/goods.jpg" alt="">
                    <img src="images/goods.jpg" alt="">
                </a>
            </div>
            <div class="good-list02 clearfix">
                <a href="">
                    <span>爱是一道光</span>
                    <span>绿到你发慌</span>
                    <img src="images/goods.jpg" alt="">
                </a>
                <a href="">
                    <span>爱是一道光</span>
                    <span>绿到你发慌</span>
                    <img src="images/goods.jpg" alt="">
                </a>
                <a href="">
                    <span>爱是一道光</span>
                    <span>绿到你发慌</span>
                    <img src="images/goods.jpg" alt="">
                </a>
                <a href="">
                    <span>爱是一道光</span>
                    <span>绿到你发慌</span>
                    <img src="images/goods.jpg" alt="">
                </a>
            </div>
        </div>
        <!-- 7.底部栏 -->
        <div class="bottom-bar clearfix">
            <a href=""><img src="images/icon_index.png" alt=""></a>
            <a href=""><img src="images/icon_category.png" alt=""></a>
            <a href=""><img src="images/icon_center.png" alt=""></a>
            <a href=""><img src="images/icon_shopping.png" alt=""></a>
            <a href=""><img src="images/icon_mime.png" alt=""></a>
        </div>
    </div>
</body>

</html>

c’ss



/* 版心 */
.container{
    width: 100%;
    /* 限制pc端版心范围 */
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
}

/* 1-搜索栏 */
.top-bar{
    /* 固定定位相对于页面，想要居中显示也要限制版心范围 */
    min-width: 320px;
    max-width: 750px;
  
    position: fixed;
    top:0;
    width: 100%;
    height: 44px;
    background-color: #E72E27;
    padding: 0px 50px;
}

.top-bar .menu{
    position: absolute;
    left: 14px;
    top:14px;
    width: 20px;
    height: 18px;
    background: url(../images/jd_icons.png) no-repeat;
    background-size: 250px 200px;
}

.top-bar input{
    width: 100%;
    height: 30px;
    margin-top: 7px;
    padding-left: 10px;
    border-radius: 15px;
}

.top-bar .login{
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 12px 12px auto;
    color: #fff;
}

/* 2-banner栏 */
.banner{
    width: 100%;
    /* 注意点：固定定位fixed会脱标
       解决方案：设置元素margin撑开脱标的高度
    */
    margin-top: 44px;
}

.banner img{
    width: 100%;
}

/* 3.导航栏 */

.nav-bar{
    width: 100%;
    height: 175px;
}


.nav-bar ul{
    width: 100%;
}

.nav-bar ul>li{
    float: left;
    width: 20%;
    text-align: center;
}

.nav-bar ul>li img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 10px auto 5px;
}

/* 4.京东快报 */
.jd-news{
    width: 100%;
    height: 16px;
    background: url(../images/jd_icons.png) no-repeat 8px -22px;
    background-size: 250px 200px;
    text-align: center;
}

.jd-news>span>span{
    color: red;
}

.jd-news a{
    float: right;
    padding: 0px 5px;
    border-left: 1px solid #E0E0E0;
}

/* 5.活动列表 */
.adv-list{
    width: 100%;
    margin: 10px 0px;
}

.adv-list a{
    display: block;
    float: left;
    width: 50%;
    padding: 0px 5px;
}

.adv-list a:nth-child(n+2){
    width: 25%;
    border-left: 1px solid #e0e0e0;
    
}

.adv-list a img{
    width: 100%;
}

/* 6.商品列表 */

.good-list{
    width: 100%;
    /* 解决底部栏固定定位脱标问题 */
    margin-bottom: 44px;
}

/* 商品头部 */
.good-list .good-title{
    width: 100%;
    height: 35px;
    background-color: #F5F5F5;
}

.good-list .good-title img{
    display: block;
    height: 100%;
    margin: 0 auto;
}

/* 商品列表01 */
.good-list .good-list01{
    width: 100%;
}

.good-list .good-list01 a{
    display: block;
    float: left;
    width: 50%;
    text-align: center;
}

.good-list .good-list01 a:nth-child(2){
    border-left: 1px solid #e0e0e0;
}

.good-list .good-list01 a span{
    display: block;
}

.good-list .good-list01 a span:nth-child(1){
    font-size: 16px;
}

.good-list .good-list01 a span:nth-child(2){
    color: #779CFF;
}

.good-list .good-list01 a img{
    float: left;
    width: 50%;
    padding: 5px;
}

/* 商品列表02 */

.good-list .good-list02{
    width: 100%;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.good-list .good-list02 a{
    display: block;
    float: left;
    width: 25%;
    text-align: left;
    padding: 5px;
}

.good-list .good-list02 a:nth-child(n+2){
    border-left: 1px solid #e0e0e0;
}

.good-list .good-list02 a span{
    display: block;
}

.good-list .good-list02 a span:nth-child(1){
    font-size: 16px;
}

.good-list .good-list02 a span:nth-child(2){
    color: green;
}

.good-list .good-list02 a img{
    width: 100%;
}

/* 7.底部栏 */
.bottom-bar{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 44px;
    background-color: #fff;
}

.bottom-bar a{
    float: left;
    width: 20%;
}

.bottom-bar a img{
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto;
}
YoungShiHao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
- **流式布局**：利用flexbox或grid布局，可以使内容在不同屏幕尺寸下灵活分布，配合rem单位，能更好地实现响应式设计。 - **触摸优化**：确保按钮和可点击区域的大小至少为48px * 48px（约4rem * 4rem），以满足...
移动布局——流式布局
m0_52197531的博客
02-11 9929
流式布局 文章目录流式布局1.1 什么是流式布局1.2 固定布局和流式布局比较1.3流式布局的缺点2.1弹性布局2.1.1 弹性盒子属性——父容器属性1.flx-direction属性2.flex-wrap属性3.flex-flow属性4.align-items属性5.justify-content属性2.1.2 弹性盒子属性——子容器属性1.order属性2.flex-grow属性3.flex-shrink属性4.flex-basis属性 1.1 什么是流式布局 ​ 在PC端进行网页制作时，
流式布局
qq_43577742的博客
07-22 166
流式布局：宽度是百分比宽度em % 固定布局：宽度是固定像素宽度px 将固定布局计算成流式布局公式： 目标元素 / 父元素 = 百分比宽度 public class AddDecreaseView extends ViewGroup { public AddDecreaseView(Context context, AttributeSet attrs) { super(context, attr...
Web-前端html+css从入门到精通 200. 移动端流式布局整页制作（2）.zip
05-23
移动端流式布局整页制作（2）"中，我们将深入探讨移动端网页开发中的关键概念——流式布局。流式布局是一种现代网页设计技术，旨在确保网页内容在不同设备和屏幕尺寸上都能呈现出良好的适应性和可读性。它对于移动...
Web-前端html+css从入门到精通 202. 移动端流式布局整页制作（4）.zip
05-23
移动端流式布局整页制作（4）"中，我们将深入学习移动端网页开发的关键技术——流式布局。流式布局是现代网页设计的核心，尤其在响应式设计中扮演着至关重要的角色。这种布局方式能够确保网页在不同屏幕尺寸和设备...
Web-前端html+css从入门到精通 201. 移动端流式布局整页制作（3）.zip
05-23
移动端流式布局整页制作（3）"中，我们将深入探讨移动端网页开发中的关键概念——流式布局。流式布局是一种适应不同屏幕尺寸和设备的布局方式，能够确保网页在手机、平板电脑以及桌面电脑等不同设备上都能呈现出...
web 移动布局，微信场景
01-31
总的来说，Web移动布局在微信场景下需要综合运用响应式设计、流式布局、自适应图片等技术，同时兼顾微信内核的特性和微信小程序的开发规范。只有这样，才能确保网页在微信平台上的用户体验达到最佳，满足不同用户的...
Rust案例分析.docx
07-16
Rust 是一种系统编程语言，具有内存安全、并发编程和高性能等特点。下面是一个 Rust 案例分析，展示如何使用 Rust 开发一个简单的命令行程序，该程序将读取文件内容并统计文件中的单词数量。
"Python 编程基础与应用概览"
07-16
Python 是一种广泛使用的高级编程语言，它以其清晰的语法和代码可读性而闻名。Python 支持多种编程范式，包括面向对象、命令式、函数式和过程式编程。它具有丰富的标准库和第三方库，使其在各种领域如网络服务器、科学计算、人工智能、数据分析、机器学习、Web 开发等都具有广泛的应用。 以下是一些关于 Python 的关键点： ### 1. **基本特性** - **易于学习**：Python 有一个简洁的语法，使得新手容易上手。 - **跨平台**：可以在多种操作系统上运行，包括 Windows、Mac OS X、Linux 等。 - **解释型语言**：Python 代码在运行时会被解释器逐行执行，无需编译。 ### 2. **应用领域** - **Web 开发**：使用 Django、Flask 等框架可以快速开发 Web 应用。 - **数据科学**：NumPy、Pandas、SciPy、Matplotlib 等库是数据科学和科学计算的常用工具。 - **机器学习**：Scikit-learn、TensorFlow、PyTorch 等库提供了机器学习和深度学习的工具。 -
财务记账（财务记账管理）Excel模板
07-16
【作品名称】：财务记账（财务记账管理）Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
2024数学建模培训-力学（3）闫明.pptx
07-16
数学建模力学
传感器试题库2016.doc
07-16
传感器
传感器练习题.docx
07-16
传感器
475.14-desktop-win8-win7-64bit-international.exe
最新发布
07-16
475.14-desktop-win8-win7-64bit-international.exe
mysql练习题题库，期末考试学习使用，小白也可以使用，多多交流学习
07-16
mysql练习题题库，期末考试学习使用，小白也可以使用，多多交流学习
html+css笔记内容
07-16
html+css笔记内容
数字乡村网络文化服务平台建设方案PPT(79页).pptx
07-16
**数字乡村解决方案摘要** **国家战略与乡村振兴** 中国正实施国家大数据战略，以加快数字中国的建设，整合数据资源，保障数据安全，并推动产业升级。2023年中央一号文件强调了乡村振兴战略，旨在通过产业兴旺、生态宜居、乡风文明、治理有效和生活富裕五大方面，实现农业农村现代化。 **数字乡村建设的重要性** 数字乡村建设是乡村振兴战略的重要组成部分，通过整合资源数据，推动物联网和遥感技术在农业中的应用，促进农业现代化。它被视为促进乡村转型发展的新方向，是数字化在农业农村经济社会发展中的应用。 **关键要素与效益** 数字乡村建设的关键要素包括数据资源整合、产业促进、农业发展规模化和标准化，以及改善乡村生活服务体系。预期效益包括提升国家治理能力，实现政府决策科学化和社会治理精准化，同时推动公共服务高效化。 **体系架构与数据融合** 数字乡村的体系架构包括乡村生态、基层治理、慧治、慧享、慧融、慧美、慧智和慧图等多个方面，实现城乡、政企、农户各级平台及服务的融合。数据融合是核心，整合乡村人口、产值、环境监测等多方面数据，为乡村治理和产业发展提供支撑。 **多业务协同与智慧治理** 数字乡村通过多业务协同应用平台，实现乡村物联网的布局和触达，涵盖农业生产、农资厂商、消费者等环节。区块链技术在农产品质量溯源中的应用，确保了产品全过程可追溯。乡村智慧治理通过村务管理、财务管理等方面提升治理效能，实现绿色发展理念。综合服务体系通过“互联网+服务”模式，提供便民服务和乡村经济发展支持，推动乡村全面振兴。
图书管理系统-JAVA程序设计
07-16
图书管理系统-JAVA程序设计
web移动应用开发怎么学
07-14
2. 掌握响应式设计：学习如何使用媒体查询和流式布局等技术，以适应不同尺寸和设备的屏幕。了解移动优化的原则，确保你的应用在各种移动设备上都能良好展示。 3. 学习移动开发框架：掌握流行的移动开发框架，例如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值