随笔分类 - 京东H5-流式布局（百分比布局）

京东H5-流式布局（百分比布局）

摘要：二倍图精灵图的做法：把精灵图等比例缩放为原来的一半之后根据大小测量坐标代码里面的background-size也要为原来宽度的一半如图：如下图片是400x400大小的图片，阅读全文

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

摘要：做如下这个效果：这两个使用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 洛飞阅读(82) 评论(0) 推荐(0) 编辑

京东移动端首页（五）

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

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

京东移动端首页（四）

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

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

vertical-align:middle 属性

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

posted @ 2022-03-31 16:21 洛飞阅读(1625) 评论(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 洛飞阅读(66) 评论(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 洛飞阅读(205) 评论(0) 推荐(0) 编辑