一.搜索部分
搜索部分包含三个内容,背景区块、文本框和按钮。
//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;
}
}