洛飞 - 博客园

2022年4月1日

摘要：做如下这个效果：这两个使用before属性加上content来设置。效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I 阅读全文

posted @ 2022-04-01 16:08 洛飞阅读(81) 评论(0) 推荐(0) 编辑

京东移动端首页（五）

摘要：实现如下效果，中间的搜索栏是可以自适应的，所以中间的这个搜索不设置宽度，两边两个小盒子设置宽度，然后中间设置外边距。中间遇到一个问题，就是设置不了子元素的margin-top的值（因为没有给父元素加上overflow:hidden属性），如下：原因：在div里面有子元素div1时，若父元素div 阅读全文

posted @ 2022-04-01 14:54 洛飞阅读(142) 评论(0) 推荐(0) 编辑

2022年3月31日

京东移动端首页（四）

摘要：制作最上面的注意图片和文字默认是基线对齐的，如果想要垂直居中对齐的话。那么需要添加vertical-align:middle的属性 body { width: 100%; min-width: 320px; max-width: 640px; /* body居中 */ margin: 0 auto 阅读全文

posted @ 2022-03-31 16:31 洛飞阅读(65) 评论(0) 推荐(0) 编辑

vertical-align:middle 属性

摘要：对于行内块（比如说图片）元素如果设置了text-align 和line-height 出现了不居中的情况下，因为图片和文字是基线对齐的。如下图所示：解决方案：我们需要设置图片的vertical-align属性，将这个属性设置为vertical-align:middle; 通过上边的例子，我们可以阅读全文

posted @ 2022-03-31 16:21 洛飞阅读(1598) 评论(0) 推荐(0) 编辑

京东H5首页最上面的横条

摘要： body { width: 100%; min-width: 320px; max-width: 640px; /* body居中 */ margin: 0 auto; /* 移动端字体14px */ font-size:14px; /* 设置字体类型 */ font-family: -apple- 阅读全文

posted @ 2022-03-31 15:35 洛飞阅读(65) 评论(0) 推荐(0) 编辑

京东移动端首页

摘要： ①初始化视口以及引入normalize.css文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置阅读全文

posted @ 2022-03-31 10:45 洛飞阅读(202) 评论(0) 推荐(0) 编辑

移动端常见布局

摘要：移动端布局和我们以前学习的PC端有所区别：单独制作移动端页面（主流）流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局混合布局响应式页面兼容移动端（其次）媒体查询 bootstrap 流式布局流式布局，就是使用百分比布局，也称为非固定像素布局。通过合资阅读全文

posted @ 2022-03-31 10:23 洛飞阅读(222) 评论(0) 推荐(0) 编辑

2022年3月30日

移动端开发选择

摘要：移动端主流方案 1、单独制作移动端页面（主流）京东、淘宝苏宁易购手机版 2、响应式页面兼容移动端（其次）三星手机官网通过判断设备，如果是移动端设备打开，则跳到移动端页面。移动端技术解决方案：移动端浏览器基本以webkit内核为主，因此我们需要考虑webkit兼容性问题。浏览器私有前缀考阅读全文

posted @ 2022-03-30 17:15 洛飞阅读(46) 评论(0) 推荐(0) 编辑

背景缩放background-size

摘要： background-size属性规定背景图像的尺寸 background-size:背景图片宽度背景图片的高度；可取如下的值：例：我们有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是需要准备2倍，100*100。我们需要把这个图片缩放一半 50*50，我们使用backgro 阅读全文

posted @ 2022-03-30 10:34 洛飞阅读(144) 评论(0) 推荐(0) 编辑

2022年3月28日

二倍图

摘要：物理像素和物理像素比物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是产商在出厂时就设置好了，比如苹果6\7\8 是750*133 我们开发时候的1px不是一定等于1个物理像素的。PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同 1px可以显示的物理像素点的个数，称为物理像素比阅读全文

posted @ 2022-03-28 15:37 洛飞阅读(137) 评论(0) 推荐(0) 编辑

洛飞

公告