移动端流式布局练习

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量170 收藏 1
点赞数
分类专栏： html+css+Javascript 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53575143/article/details/127602496
版权

案例：京东移动端首页

内容为黑马程序员教学

1.技术选型

方案：采取单独制作移动页面方案

技术：采取流式布局 不再使用固定像素

2.搭建文件结构

在这里插入图片描述

3.设置视口标签以及引入初始化样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0 user-scalable=no ,minimum-scale=1.0">
    <!-- 禁止用户缩放 -->
    <title>Document</title>
    <!-- 引入首页css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
</head>

4.常用初始化页面样式

经过分析给body宽度为100% 但限制最大最小宽度

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

4.1.分析导航栏样式

四个部分占比分别为8/10/57/25

请添加图片描述

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    background-color: #333;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515; 
}


.app {
    height: 45px;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333;
    text-align: center;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 16px;
    vertical-align: middle;
    /* margin: 0 auto; */
    /* height: auto; */
}

.app ul li:nth-child(2) {
    width: 10%;
}

.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

以下为效果图

在这里插入图片描述

4.2.搜索模块布局

分析 屏幕宽度变化是只有中间搜索框伸缩

将两边内容使用定位 搜索框使用标准流并使用margin值空出两边内容的部分

在这里插入图片描述

.search-wrap {
    position: relative;
    overflow: hidden;
    height: 44px;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    background-color: purple;
    width: 40px;
    height: 44px;
}

.search {
    /* 不能给宽度 否则会将btn和login内容撑出 */
    height: 30px;
    /* 给margin值 */
    margin: 0 50px;
    /* 只给mt值时会发生外边距合并   解决方法给父盒子添加overflow:hidden */
    margin-top: 7px;
    background-color: #fff;
    border-radius: 25px;
}

填充内容 使用伪标签

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s_btn.png) no-repeat;
    /* 原图太大 需要更改大小 */
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

5.二倍精灵图做法

  • 在图片软件里将精灵图等比例缩放为原来的一般
  • 之后根据大小测量坐标
  • 注意代码里面background-size也要写：精灵图原来宽度的一半

注意不要在ps等软件里点击保存 会更改原图大小

只需要测量后在background-size里设置图片大小

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
    /* 此处需要将精灵图制作为二倍精灵图 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    /* 原图大小为400px */
    background-size: 200px auto;
}

在这里插入图片描述

添加banner图 并更改搜索框定位为fixed

在这里插入图片描述

修改搜索框定位使其在banner图上方

.search-wrap {
    /* 固定盒子需要有100%宽  */
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}

在这里插入图片描述

去除图片底下的空白缝隙

img {
    vertical-align: top;
}

品牌日板块

在这里插入图片描述

/* 品牌日 */
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}

6.图片格式

在这里插入图片描述

导航栏板块

移动端 流式布局只考虑宽度

nav {
    padding: 5px;
}

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}

为了方便模拟拖动给body加2000px高度

此时会发现搜索框由于固定定位显示在屏幕中 后期用js解决

在这里插入图片描述

在这里插入图片描述

新闻板块

注意事项 加竖线时添加的边框属性会撑开原来的百分比宽度

但使用CSS中的box-sizing : border-content; 就不会出现这种情况

/* 新闻板块 */

.news {
    margin-top: 20px;
}

.news img {
    width: 100%;
}

.news a {
    float: left;
    box-sizing: border-box;
}

.news a:nth-child(1) {
    width: 50%;
}


/* n+2 就是从第2个往后面选 */

.news a:nth-child(n+2) {
    width: 25%;
    /* 直接加边框的话会打破百分比  但使用CSS3的盒子模型就不会出现撑开盒子的问题*/
    border-left: 1px solid #ccc;
}

案例要点 ：nth-child(n+x) 选中x及之后的

CSS3盒子模型 box-sizing ：border-content； 不会撑开盒子

特殊样式

/* 清楚点击高亮效果    设置为transparent 透明*/
* {
    -webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在ios上加上更改输入按钮和输入框自定义样式 */
input {
    -webkit-appearance: none;
    appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,
a {
    -webkit-touch-callout: none;
}

在这里插入图片描述

Vantage0328
关注
专栏目录
移动端之rem布局
yexiangCSDN的专栏
05-10 203
一、移动端之rem布局 1. rem 基础 rem (root em)是一个相对单位，类似于em，em是相对父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小 /* 根html 为 12px */ html { font-size: 12px;...
＜前端练习＞ 京东移动端首页
weixin_47816527的博客
07-14 779
1.技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/> <link rel="stylesheet" type="text/css" href="css/nor
移动端rem布局初步练习
wujimiao的专栏
03-17 1226
渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。 你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！ 公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。 首先是移动头
移动端流式布局练习分享
weixin_46385636的博客
02-29 182
移动端流式布局 学习HTML5已经一段时间，现在分享一个用流式布局在移动端的一个案例，具体请看这篇文章。 在我们平时的生活中，刷微博，刷朋友圈，分享一些实时动态已经是我们每个人习以为常的事情，当我们发表一些动态时，朋友，家人，同学基本会给你发表的动态送上几句评论之类的。今天要说的就是利用流式布局做出一个这种个人动态的页面布局以及样式。整体效果如下： 接下来就是我的方法及思路，不合理的地方可以提出...
移动web开发之流式布局及案例练习
xia_zai_ya的博客
05-03 1347
开始学习移动web开发布局，给自己做一些总结。 移动端技术解决方案 1.移动端浏览器兼容问题. 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。 我们可以放心使用 H5 标签和 CSS3 样式。 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可. 2.移动端公共样式 这里推荐使用normalize.css/ 官网地址 移动端大量使用 CSS3盒子...
每日一练28：移动端页面布局总结
Super Livia
01-30 231
效果图如下：只有中间内容滚动，头部红色定位在顶部，底部绿色背景定位在底部，只有中间内容滚动 这个效果用的盒子模型写的，不用定位 <template> <div class="app"> <div class="top"> <p>我是top</p> </div> <div class="content"> <
CSS//移动端常见布局——流式布局+flex布局
xinkuIe
11-20 1187
1.流式布局 即百分比布局(一般给宽度写百分比)，效果： 即随着不同浏览器或屏幕，可以自适应宽度，给定50%，再给每个div float:left即实现下面效果 清除上面的边框： 除此之外，还可以设置最大最小宽度：max-width & min-width 案例：京东移动端页面： 100% / 5 = 20% 2.flex布局 对比传统布局： ①传统布局：兼容性好，但布局繁琐、不能在移动端很好的布局 ②flex弹性布局：操作方便、布局极为简单、移动端应用很广泛，.
移动端布局资料.rar
03-12
核心概念包括媒体查询（Media Queries）、流式布局（Fluid Grids）和自适应图片（Flexible Images）。通过媒体查询，我们可以定义不同屏幕尺寸下的样式规则。 2. **HTML5**：HTML5是构建移动应用的基础，它引入了新...
pc端移动端响应式三个案例练习.rar
07-18
在PC端和移动端，常见的布局策略有：固定布局、流式布局、混合布局和栅格布局。固定布局适用于屏幕尺寸相对固定的设备，流式布局则适合多设备兼容，混合布局结合两者优点，栅格布局则常用于响应式框架，如Bootstrap...
Travel:一个旅游网站，适合前端初学者学习练习布局
04-29
Travel ... 简单介绍下这个项目，这是很久之前刚开始学前端做的项目，用来练习HTML和CSS的，只是单纯的页面，而不是应用。分为三个目录，分别对应三个...这一版主要是利用了媒体查询和流式布局来做的，也算是最终版了。
黑马程序员__移动商城项目实战
12-21
黑马程序员__移动商城项目实战 包括黑马程序员乐淘商城实战和慕课React+Antd
CSS day12 移动端布局练习
qq_34620296的博客
09-13 817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
移动端rem布局 案例练习
MartinYP的博客
08-07 310
学习记录博客
前端小白移动端布局总结（含四大实战项目）及笔记
热门推荐
weixin_45817780的博客
03-30 1万+
前言 眼看着做两顿凉皮的功夫，2020第一季度就要过完了。 过去的三个月，好像经历了很多，又好像什么都没留下。 这种茫然的背后，是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示，疫情期间日均超3.5亿人次搜索、浏览教育相关的内容，同比上涨86%。 在这个人人都准备抓住机会弯道超车的时期，你准备学点什么？现在就冲！和博主一起学前端吧。 截至发表博文前的最新数据： 那么我们正式步入正题吧，...
移动端学习笔记（黑马教程）-仿京东首页
weixin_42349568的博客
08-09 819
一，琐碎的部分 1，移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。 2，图片输入时，是和文字以基线对齐的，而不是设置了line-height就可以甩手不干了。 还需要把图片在垂直方向上居中对齐： vertical-align: middle; 二，头部的完成 <header class="app"> <ul> <li><img src="images/clo
CSS画出三角形的做法
mingangel的博客
10-01 203
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 200
CSS 盒子属性
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 263
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
【CSS】position
最新发布
小秀的博客
10-02 129
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
css移动端布局练习
09-16
CSS移动端布局练习是用于设计和开发适应移动设备的网页的练习。移动设备的屏幕尺寸较小，需要针对不同尺寸的设备进行响应式布局，以保证页面在不同设备上的显示效果和用户体验。 在进行CSS移动端布局练习时，需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值