入土系列 | 前端入门实战项目（八）
写在前边
此次项目页面内容比较多，可分为两次做完。
可以说项目八可作为一个旅游网站包含的最常见的几个页面，也是最基本的几个页面，页面设计到的内容虽不是特别多，但是相比以往几个项目布局，稍微有点难度。
如果前边分享的几个项目你认真做了，每次也总结出了自己的问题，今天的项目八对你来说，小菜一碟。
项目实战八：飘城旅行社
设计要求
1、 header 头部往下，设计一块搜索区。这个区域，可以是广告大图，也可以是用户注册，也可以是一个搜索条，都是一个大幅背景，内嵌一个表单。
2、从网上搜索一张风景图，原图的分辨率为：1920 x 1200。我们截取了中间一段变成：1920 x 600。
如果使用 1920 的宽度，势必在底部产生滚动条，非常的难看。那不采用 1920 的宽度，整张大图无法全面显示。
那么我们的设计理念是，1280 分辨率显示大图中部区域的图片内容，而浏览器不断增大，就显示的内容越多。超过 1920 分辨率，让图片居中，两边空白即可。
3、使用 100%，并插入背景图片。当我们故意缩小分辨率时，小于 1280 时，底部会出现滚动条。当我们拉动滚动条时，发现右侧出现的大量空白。这时由于之前采用了 100%自适应导致的，那我们强行设置这里虽然是 100%。但如果小于 1280 分辨率，就必须固定在 1280 即可。
对于大于 1920 的分辨率，我们将背景图片居中显示即可，两边留白。当然，还有一种方式，是专门设计这张大图的过渡渐变，两边快要接近纯色是，添加背景过渡。
4、搜索框
我们希望在大图中间安插一个搜索框，先安插一个半透明的区块。
素材获取
所有设计要求，都在后台获取的设计图中，不再用文字叙述，直接开干。
假如此次公司的美工请假了，素材不得不靠你自己用 PS 切图，老板说，自己看着办吧！
原型设计图后台回复：【QDSZ8】即可获取！
小结
入土系列前端入门实战项目共十个，十天内完成即可。
项目中遇到什么问题，欢迎加入小鹿大大前端技术切磋群和 200 名小伙伴一起切磋，切磋，看谁更硬核。
©著作权归作者所有：来自51CTO博客作者mb5fe1601ede528的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- 入土系列 | 前端入门实战项目（九）
- 推荐一个使用 Go 语言题解 LeetCode 的开源项目
- 推荐一个项目：数据结构和算法必知必会的 50 个代码实现
- 数据分析师必知必会：AB测试项目复盘（附PPT、python源码）
- 如何创建你的第一个Python项目
- PMP项目管理：PMIID与PDU数量速查
- 阅读优秀 Python 开源项目的代码，提升编程技能（GitHub 资源帖推荐）