移动端流体布局[3]

2017年10月29日07:00:34 发表评论

本章主要开始如果通过第一个 PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。

一.搜索部分

搜索部分包含三个内容,背景区块、文本框和按钮。

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

注:本章为第54课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: