移动端学习笔记（黑马教程）-仿京东首页

一，琐碎的部分

1，移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。
2，图片输入时，是和文字以基线对齐的，而不是设置了line-height就可以甩手不干了。

还需要把图片在垂直方向上居中对齐：

vertical-align: middle;

二，头部的完成

     <header class="app"><ul><li><img src="data:images/close.png"></li><li><img src="data:images/logo.png"></li><li>打开京东APP,购物更轻松</li><li>立即打开</li></ul></header>

四个li，宽度用百分比设置好即可。

三，搜索区域的布局

实现的效果如图：

代码结构：

     <div class="search_wrap"><div class="search_btn"></div><div class="search"></div><div class="search_login">登陆</div></div>

接下来重点是二倍精灵图的做法：

也就是都除以比例值就行了！
然后是搜索框的制作：

尤其是搜索内容的部分，要设置的样式挺多的：

.search .put{width: 90%;box-sizing: border-box;line-height: 16px;vertical-align: middle;border: 0;color: #232326;font-size: 12px;text-overflow: ellipsis;white-space: nowrap;margin-top: 6px;padding-left: 65px;outline: none;
}

四，导航栏的布局

大盒子宽度100%，小盒子宽度20%

             <nav><a href="#"><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav2.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav3.webp" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.webp" alt=""><span>京东超市</span></a></nav>

移动端学习笔记（黑马教程）-仿京东首页相关推荐

Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
108页《SpringBoot 学习笔记完整教程》PDF附下载
今天Hydra分享给大家一本108页的<SpringBoot 学习笔记完整教程>,从SpringBoot的基本入门使用,到搭建项目进行代码实战,最终研究底层实现原理,基本涵盖了各个环节,可 ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
HTMLCSS仿京东首页制作静态页面总结
目录一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用三.字体图标的使用四.base.css和comm ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
android 高仿京东首页,android 粗略的仿京东首页嵌套方式滚动
简单述说最近没有什么事情,就看到了京东的首页,感觉还不错,但是我目前也只是粗略的模仿了出来. github 地址 V2版本仿京东首页.gif 设计思路简单画图.png 滚动黄色的recycleV ...
Fiddler 学习笔记--Fiddler 教程
学习网址: 1.https://www.cnblogs.com/yyhh/p/5140852.html 2.https://www.cnblogs.com/FounderBox/p/4653588.h ...
基于weblogic 的EJB 学习笔记-JSP教程,资料/其它
http://www.west263.com/www/info/14655-1.htm ejb 学习笔记 1.ejb 基础知识 (1) 无状态会话bean 不保存客户机的会话状态优点 ...
C#学习笔记——菜鸟教程C#学习重点归纳
C#学习笔记第一章:程序结构一.结构命名空间声明(Namespace declaration) 一个 class Class 方法 Class 属性一个 Main 方法语句(Statemen ...
仿京东首页（静态html+css）
京东首页的头部和尾部代码 html代码: <!DOCTYPE> <html lang="en"><head><meta charset=& ...