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

一&＃xff0c;琐碎的部分

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

还需要把图片在垂直方向上居中对齐&＃xff1a;

vertical-align: middle;


二&＃xff0c;头部的完成

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


四个li&＃xff0c;宽度用百分比设置好即可。

三&＃xff0c;搜索区域的布局

实现的效果如图&＃xff1a;

代码结构&＃xff1a;

<div class&＃61;"search_wrap"><div class&＃61;"search_btn"></div><div class&＃61;"search"></div><div class&＃61;"search_login">登陆</div></div>


接下来重点是二倍精灵图的做法&＃xff1a;

也就是都除以比例值就行了&＃xff01;
然后是搜索框的制作&＃xff1a;

尤其是搜索内容的部分&＃xff0c;要设置的样式挺多的&＃xff1a;

.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;
}


四&＃xff0c;导航栏的布局

大盒子 宽度100%&＃xff0c;小盒子宽度20%

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