移动端流体布局[2]

2017年10月28日07:00:08 发表评论

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

一.基础 CSS

在 PC 端项目中,有很多常用的固定 CSS,在移动端同样适用,我们直接复制过来即可。

//通用 CSS

body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f5f5f5;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
ul,ol {
    list-style: outside none none;
}
a {
    text-decoration: none;
}
.none {
    display: none;
}

二.头部设计

头部设计用的是全屏流体 100%,高度为 45px,分为四栏,每栏两个中文字,再多就容易溢出。

//HTML 部分

<header id="header">
    <nav class="link">
        <h2 class="none">网站导航</h2>
    <ul>
        <li class="active"><a href="index.html">首页</a></li>
        <li><a href="information.html">资讯</a></li>
        <li><a href="ticket.html">票务</a></li>
        <li><a href="about.html">关于</a></li>
    </ul>
    </nav>
</header>

我们决定尝试一下新单位:rem。可是发现一个问题,如果按照基础课程中讲解的,在 html {}的 CSS 中设置 62.5%相当于 10px,在 Chrome 浏览器却出现偏差。那么统一解决的方法就是设置 625%,默认是 100px,这样达到全兼容。
//默认 100px

html {
    font-size: 625%;
}

//头部 CSS 如下

#header {
    width: 100%;
    height: 0.45rem;
    font-size: 0.16rem;
    margin: 0 auto;
    background-color: #333;
    position: fixed;
    top: 0;
    z-index: 9999;
}
#header .link {
    height: 0.45rem;
    line-height: 0.45rem;
}
#header .link li {
    width: 25%;
    text-align: center;
    float: left;
}
#header .link a {
    color: #eee;
    display: block;
}
#header .link a:hover,#header .active a {
    background-color: #000;
}

三.轮播设计

轮播图片设计比较简单,只不过我们并没有真正的做图片轮播,是一个假的。因为这个设计到 JS 或 JQ 部分知识,并且,还要涉及到移动端触摸以及滑动知识,暂时略过。

//HTML 部分

<div id="adver">
    <img src="img/search.png" alt="移动端流体布局[2]" alt="search">
</div>

//CSS 部分,设置总区域为 640px

#adver {
    max-width: 6.4rem;
    margin: 0 auto;
    padding: 0.45rem 0 0 0;
}

备注:如果你不适应 rem,用 px 也没什么问题。现在很多响应式都还是使用的 px,em计算太麻烦。

四.底部设计

底部参考 PC 端项目,适当缩减即可,长度限制为 640px。

//HTML 部分

<footer id="footer">
    <div class="top">
        客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">
        Copyright © YCKU 瓢城旅行社 | 苏 ICP 备 120110119 号
    </div>
</footer>

//CSS 部分

#footer {
    max-width: 6.4rem;
    background-color: #222;
    clear:both;
    margin: 0 auto;
    color: #777;
    text-align: center;
    padding: 0.1rem 0;
}
#footer .top {
    padding: 0 0 0.05rem 0;
}

注:本章为第53课。本次教程共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: