一．搜索部分
搜索部分包含三个内容，背景区块、文本框和按钮。
//HTML 部分
//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 部分热门旅游
最新的各种热门旅游资讯的推荐！
//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; }}