![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
文章平均质量分 64
小黄呀呀呀
整理的笔记要点主要是记录给自己看的,涉及原创可以私信我修改,谢谢!
展开
-
移动web开发项目2: 携程网(移动端、flex布局)
携程网链接:http://m.ctrip.com1.技术选型方案:我们采取单独制作移动页面方案技术:布局采取flex布局2.搭建相关文件夹3.设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href原创 2021-02-16 17:20:41 · 390 阅读 · 0 评论 -
移动web开发重点4:实现中间的盒子随着大小,自由的伸缩(流式布局、flex布局)
实现中间的盒子随着大小,自由的伸缩用flex的方法将最外面的盒子的大小设置为60%,然后将第一个和第三个盒子的宽度和高度设置好,然后父亲盒子的剩余部分就是中间部分,再用flex:1,将父亲盒子的剩余部分分成1份,给第二个盒子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2021-02-15 23:52:20 · 393 阅读 · 0 评论 -
移动web开发重点3:justify-content:flex-end和flex-direction: row-reverse的区别
justify-content:flex-end主轴方向的子元素全部贴在主轴的最右边,子元素之间的排列顺序是不变的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-15 23:51:48 · 1233 阅读 · 0 评论 -
移动web开发重点2:实现盒子水平垂直居中(flex布局和定位的两种方法)
实现盒子水平垂直居中1:用flex布局这里只写一种情况,就是设置主轴是x,侧轴是y,然后设置主轴上的子元素的排列顺序居中,也就是justify-content:center;再设置侧轴行的子元素的排列顺序,这是考虑的是单行的,也就是align-items:center<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-02-15 23:51:21 · 431 阅读 · 0 评论 -
css的重点17:flex实现图片贴底的效果
实现所有的图片贴底的效果代码: display: flex; align-items: flex-end;注意:刚开始出错,是因为没有将margin设置成0原创 2020-11-07 18:43:24 · 259 阅读 · 0 评论 -
移动web开发笔记2:flex布局、父项常见属性、子项常见属性、携程网
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活原创 2020-09-08 16:57:17 · 297 阅读 · 0 评论 -
移动web开发重点1:消除div和图片之间的空隙
问题:div和图片之间有空隙解决方法:在图片上添加img { vertical-align: top;}原创 2021-02-15 23:25:59 · 193 阅读 · 0 评论 -
移动web开发笔记1:移动端基础、常见移动端屏幕尺寸、布局视口、视觉视口、理想视口、meta标签、二倍图、物理像素、物理像素比、背景缩放、css3盒子模型、特殊样式、常见布局、流式布局、京东案例
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Web原创 2021-02-14 22:34:25 · 875 阅读 · 2 评论 -
移动web开发项目1:京东首页(移动端、流式布局也称百分比布局)
1、先设置理想视口、导入样式(将body居中,设置字体大小)初始化样式链接:http://necolas.github.io/normalize.css/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 理想型视口 --&原创 2021-02-14 22:33:33 · 416 阅读 · 0 评论