[03]项目实战-移动端流体布局
2017-02-22 00:56
232 查看
一.搜索部分
搜索部分包含三个内容,背景区块、文本框和按钮。//HTML 部分 <div id="search"> <input type="text" class="search" placeholder="请输入旅游景点或城市"> <button class="button">搜索</button> </div>
//CSS 部分 #search { max-width: 6.4rem; height: .33rem; background-color: #ddd; margin: 0 auto; position: relative; padding: .03rem 0 0 0; } #search .search { display: block; outline: none; width: 95%; font-size: .14rem; border-radius: .04rem; background-color: #fff; border: none; height: .27rem; padding: 0 .05rem; margin: 0 auto; } #search .button { display: block; background-color: #eee; outline: none; cursor: pointer; color: #666; width: .5rem; height: .27rem; border: none; border-top-right-radius: .04rem; border-bottom-right-radius: .04rem; position: absolute; font-size: .12rem; top: .03rem; right: 1%; } //布局忽略边框计算 div { box-sizing: border-box; }
二.旅游部分
这里,我们首先设计一个标题,具体图片部分放到后面一节。//HTML 部分 <div id="tour"> <hgroup> <h2>热门旅游</h2> <h3>最新的各种热门旅游资讯的推荐!</h3> </hgroup> </div>
//CSS 部分 #tour { max-width: 6.4rem; margin: .1rem auto 0 auto; } #tour h2 { text-align: center; color: #666; font-size: .26rem; } #tour h3 { text-align: center; font-weight:normal; color: #666; margin: 0.05rem 0 0.1rem 0; font-size: .16rem; }
三.媒体查询
媒体查询,这里我们不去详细去讲,这个放到后面响应式章节讲,这里简单使用即可。/*媒体查询,大于 480 小于 640*/ @media (min-width: 480px)and (max-width: 640px) { #tour h2 { font-size: .26rem; } #tour h3 { font-size: .16rem; } #footer { font-size: .14rem; } } /*媒体查询,小于 480*/ @media (max-width: 480px){ #tour h2 { font-size: .18rem; } #tour h3 { font-size: .14rem; } #footer { font-size: .12rem; } }
相关文章推荐
- [03]项目实战-移动端流体布局
- [03]项目实战-移动端流体布局
- [06]项目实战-移动端流体布局
- [01]项目实战-移动端流体布局
- [02]项目实战- 移动端流体布局
- [01]项目实战-移动端流体布局
- [02]项目实战- 移动端流体布局
- [04]项目实战-移动端流体布局
- [01]项目实战-移动端流体布局
- [03]项目实战-PC 端固定布局(3)
- [03]项目实战-PC 端固定布局(3)
- [03]项目实战-PC 端固定布局(3)
- Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形
- 项目实战-PC端固定布局【1】之完成导航
- 项目实战-PC端固定布局【5】之aside
- 项目实战--PC端固态布局[5]之footer
- 项目实战--PC端固定布局[4]之figure
- React Native商城项目实战03 - 包装Navigator
- 第 31 章 项目实战-PC 端固定布局[5]
- 第 31 章 项目实战-PC 端固定布局[4]